From fca1335a99fbb180e3dbd4279f7b849729edfe69 Mon Sep 17 00:00:00 2001
From: Vadim <korobeinikovv@mail.ru>
Date: Wed, 27 Jan 2021 19:37:26 +0300
Subject: [PATCH 1/5] Add prefixes to arrow

---
 src/components/Arrow/Arrow.svelte | 25 +++++++++++++------------
 1 file changed, 13 insertions(+), 12 deletions(-)

diff --git a/src/components/Arrow/Arrow.svelte b/src/components/Arrow/Arrow.svelte
index f553974..df44d29 100644
--- a/src/components/Arrow/Arrow.svelte
+++ b/src/components/Arrow/Arrow.svelte
@@ -1,5 +1,6 @@
 <script>
   import { NEXT, PREV } from '../../direction'
+
   /**
    * Indicates direction of the arrow ('next', 'prev')
    */
@@ -12,14 +13,14 @@
 </script>
 
 <div
-  class="circle"
-  class:disabled
+  class="carousel-arrow__circle"
+  class:carousel-arrow__circle_disabled={disabled}
   on:click
 >
   <i
-    class="arrow"
-    class:next={direction === NEXT}
-    class:prev={direction === PREV}
+    class="carousel-arrow__arrow"
+    class:carousel-arrow__arrow-next={direction === NEXT}
+    class:carousel-arrow__arrow-prev={direction === PREV}
   ></i>
 </div>
 
@@ -27,7 +28,7 @@
   :root {
     --size: 2px
   }
-  .circle {
+  .carousel-arrow__circle {
     width: 20px;
     height: 20px;
     border-radius: 50%;
@@ -38,25 +39,25 @@
     transition: opacity 100ms ease;
     cursor: pointer;
   }
-  .circle:hover {
+  .carousel-arrow__circle:hover {
     opacity: 0.9;
   }
-  .arrow {
+  .carousel-arrow__arrow {
     border: solid #1e1e1e;
     border-width: 0 var(--size) var(--size) 0;
     padding: var(--size);
     position: relative;
   }
-  .next {
+  .carousel-arrow__arrow-next {
     transform: rotate(-45deg);
     left: calc(var(--size) / -2);
   }
-  .prev {
+  .carousel-arrow__arrow-prev {
     transform: rotate(135deg);
     right: calc(var(--size) / -2);
   }
-  .disabled,
-  .disabled:hover {
+  .carousel-arrow__circle_disabled,
+  .carousel-arrow__circle_disabled:hover {
     opacity: 0.5;
   }
 </style>
\ No newline at end of file

From a210cab1f1825542fb28073fa624d8e7597e36b8 Mon Sep 17 00:00:00 2001
From: Vadim <korobeinikovv@mail.ru>
Date: Wed, 27 Jan 2021 19:40:10 +0300
Subject: [PATCH 2/5] Add prefixes to dot

---
 src/components/Dot/Dot.svelte | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/Dot/Dot.svelte b/src/components/Dot/Dot.svelte
index 22aabad..8749d27 100644
--- a/src/components/Dot/Dot.svelte
+++ b/src/components/Dot/Dot.svelte
@@ -20,10 +20,10 @@
   }
 </script>
 
-<div class="main-container">
+<div class="carousel-dot__container">
   <div
-    class="dot"
-    class:current="{active}"
+    class="carousel-dot__dot"
+    class:carousel-dot__dot_current={active}
     style="
       height: {$size}px;
       width: {$size}px;
@@ -33,14 +33,14 @@
 </div>
 
 <style>
-  .main-container {
+  .carousel-dot__container {
     display: flex;
     align-items: center;
     justify-content: center;
     height: 16px;
     width: 16px;
   }
-  .dot {
+  .carousel-dot__dot {
     background-color: #5d5d5d;
     border-radius: 50%;
     display: inline-block;
@@ -48,10 +48,10 @@
     cursor: pointer;
     transition: opacity 100ms ease;
   }
-  .dot:hover {
+  .carousel-dot__dot:hover {
     opacity: 0.9;
   }
-  .current {
+  .carousel-dot__dot_current {
     opacity: 0.7;
   }
 </style>
\ No newline at end of file

From a5a8b68ae9a381f6c6e5d0725495324e46b58020 Mon Sep 17 00:00:00 2001
From: Vadim <korobeinikovv@mail.ru>
Date: Wed, 27 Jan 2021 19:41:53 +0300
Subject: [PATCH 3/5] Add prefixes to dots

---
 src/components/Dots/Dots.svelte | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/Dots/Dots.svelte b/src/components/Dots/Dots.svelte
index 394c75a..4c11961 100644
--- a/src/components/Dots/Dots.svelte
+++ b/src/components/Dots/Dots.svelte
@@ -19,9 +19,9 @@
   }
 </script>
 
-<div class="main-container">
+<div class="carousel-dots__container">
   {#each Array(pagesCount) as _, pageIndex (pageIndex)}
-    <div class="dot-container">
+    <div class="carousel-dots__dot-container">
       <Dot
         active={currentPageIndex === pageIndex}
         on:click={() => handleDotClick(pageIndex)}
@@ -34,11 +34,11 @@
   :root {
     --dot-size: 10px; 
   }
-  .main-container {
+  .carousel-dots__container {
     display: flex;
     align-items: center;
   }
-  .dot-container {
+  .carousel-dots__dot-container {
     height: calc(var(--dot-size) + 10px);
     width: calc(var(--dot-size) + 10x);
     display: flex;

From 1b36742624cfe45265243ddeb99242df34c84062 Mon Sep 17 00:00:00 2001
From: Vadim <korobeinikovv@mail.ru>
Date: Wed, 27 Jan 2021 19:51:24 +0300
Subject: [PATCH 4/5] Add prefixes to carousel

---
 src/components/Carousel/Carousel.svelte | 21 +++++++++++----------
 1 file changed, 11 insertions(+), 10 deletions(-)

diff --git a/src/components/Carousel/Carousel.svelte b/src/components/Carousel/Carousel.svelte
index 75712ea..8a53a84 100644
--- a/src/components/Carousel/Carousel.svelte
+++ b/src/components/Carousel/Carousel.svelte
@@ -179,11 +179,11 @@
   }
 </script>
 
-<div class="main-container">
-  <div class="carousel-container">
+<div class="carousel__carousel-container">
+  <div class="carousel__content-container">
     {#if arrows}
       <slot name="prev" {showPrevPage}>
-        <div class="arrow-container">
+        <div class="carousel__arrow-container">
           <Arrow
             direction="prev"
             disabled={!infinite && originalCurrentPageIndex === 0}
@@ -193,10 +193,11 @@
       </slot>
     {/if}
     <div
-      class="content-container"
+      class="carousel__pages-window"
       bind:this={pageWindowElement}
     >
       <div
+        class="carousel__pages-container"
         use:swipeable="{{ thresholdProvider: () => pageWidth/3 }}"
         on:start={handleSwipeStart}
         on:move={handleSwipeMove}
@@ -213,7 +214,7 @@
     </div>
     {#if arrows}
       <slot name="next" {showNextPage}>
-        <div class="arrow-container">
+        <div class="carousel__arrow-container">
           <Arrow
             direction="next"
             disabled={!infinite && originalCurrentPageIndex === originalPagesCount - 1}
@@ -240,30 +241,30 @@
 </div>
 
 <style>
-  .main-container {
+  .carousel__carousel-container {
     display: flex;
     width: 100%;
     flex-direction: column;
     align-items: center;
   }
-  .carousel-container {
+  .carousel__content-container {
     position: relative;
     display: flex;
     width: 100%;
   }
-  .content-container {
+  .carousel__pages-window {
     flex: 1;
     display: flex;
     overflow: hidden;
     box-sizing: border-box;
   }
-  .content-container > div {
+  .carousel__pages-container {
     width: 100%;
     display: flex; /* to put child elements in one row */
     transition-timing-function: ease-in-out;
     transition-property: transform;
   }
-  .arrow-container {
+  .carousel__arrow-container {
     padding: 5px;
     box-sizing: border-box;
     display: flex;

From fcae87d9c6e1dd7b96663f5f9880ecadad8426af Mon Sep 17 00:00:00 2001
From: Vadim <korobeinikovv@mail.ru>
Date: Wed, 27 Jan 2021 19:56:06 +0300
Subject: [PATCH 5/5] Add global prefix

---
 src/components/Arrow/Arrow.svelte       | 24 ++++++++++++------------
 src/components/Carousel/Carousel.svelte | 22 +++++++++++-----------
 src/components/Dot/Dot.svelte           | 14 +++++++-------
 src/components/Dots/Dots.svelte         |  8 ++++----
 4 files changed, 34 insertions(+), 34 deletions(-)

diff --git a/src/components/Arrow/Arrow.svelte b/src/components/Arrow/Arrow.svelte
index df44d29..b97fec5 100644
--- a/src/components/Arrow/Arrow.svelte
+++ b/src/components/Arrow/Arrow.svelte
@@ -13,14 +13,14 @@
 </script>
 
 <div
-  class="carousel-arrow__circle"
-  class:carousel-arrow__circle_disabled={disabled}
+  class="sc-carousel-arrow__circle"
+  class:sc-carousel-arrow__circle_disabled={disabled}
   on:click
 >
   <i
-    class="carousel-arrow__arrow"
-    class:carousel-arrow__arrow-next={direction === NEXT}
-    class:carousel-arrow__arrow-prev={direction === PREV}
+    class="sc-carousel-arrow__arrow"
+    class:sc-carousel-arrow__arrow-next={direction === NEXT}
+    class:sc-carousel-arrow__arrow-prev={direction === PREV}
   ></i>
 </div>
 
@@ -28,7 +28,7 @@
   :root {
     --size: 2px
   }
-  .carousel-arrow__circle {
+  .sc-carousel-arrow__circle {
     width: 20px;
     height: 20px;
     border-radius: 50%;
@@ -39,25 +39,25 @@
     transition: opacity 100ms ease;
     cursor: pointer;
   }
-  .carousel-arrow__circle:hover {
+  .sc-carousel-arrow__circle:hover {
     opacity: 0.9;
   }
-  .carousel-arrow__arrow {
+  .sc-carousel-arrow__arrow {
     border: solid #1e1e1e;
     border-width: 0 var(--size) var(--size) 0;
     padding: var(--size);
     position: relative;
   }
-  .carousel-arrow__arrow-next {
+  .sc-carousel-arrow__arrow-next {
     transform: rotate(-45deg);
     left: calc(var(--size) / -2);
   }
-  .carousel-arrow__arrow-prev {
+  .sc-carousel-arrow__arrow-prev {
     transform: rotate(135deg);
     right: calc(var(--size) / -2);
   }
-  .carousel-arrow__circle_disabled,
-  .carousel-arrow__circle_disabled:hover {
+  .sc-carousel-arrow__circle_disabled,
+  .sc-carousel-arrow__circle_disabled:hover {
     opacity: 0.5;
   }
 </style>
\ No newline at end of file
diff --git a/src/components/Carousel/Carousel.svelte b/src/components/Carousel/Carousel.svelte
index 8a53a84..c75f774 100644
--- a/src/components/Carousel/Carousel.svelte
+++ b/src/components/Carousel/Carousel.svelte
@@ -179,11 +179,11 @@
   }
 </script>
 
-<div class="carousel__carousel-container">
-  <div class="carousel__content-container">
+<div class="sc-carousel__carousel-container">
+  <div class="sc-carousel__content-container">
     {#if arrows}
       <slot name="prev" {showPrevPage}>
-        <div class="carousel__arrow-container">
+        <div class="sc-carousel__arrow-container">
           <Arrow
             direction="prev"
             disabled={!infinite && originalCurrentPageIndex === 0}
@@ -193,11 +193,11 @@
       </slot>
     {/if}
     <div
-      class="carousel__pages-window"
+      class="sc-carousel__pages-window"
       bind:this={pageWindowElement}
     >
       <div
-        class="carousel__pages-container"
+        class="sc-carousel__pages-container"
         use:swipeable="{{ thresholdProvider: () => pageWidth/3 }}"
         on:start={handleSwipeStart}
         on:move={handleSwipeMove}
@@ -214,7 +214,7 @@
     </div>
     {#if arrows}
       <slot name="next" {showNextPage}>
-        <div class="carousel__arrow-container">
+        <div class="sc-carousel__arrow-container">
           <Arrow
             direction="next"
             disabled={!infinite && originalCurrentPageIndex === originalPagesCount - 1}
@@ -241,30 +241,30 @@
 </div>
 
 <style>
-  .carousel__carousel-container {
+  .sc-carousel__carousel-container {
     display: flex;
     width: 100%;
     flex-direction: column;
     align-items: center;
   }
-  .carousel__content-container {
+  .sc-carousel__content-container {
     position: relative;
     display: flex;
     width: 100%;
   }
-  .carousel__pages-window {
+  .sc-carousel__pages-window {
     flex: 1;
     display: flex;
     overflow: hidden;
     box-sizing: border-box;
   }
-  .carousel__pages-container {
+  .sc-carousel__pages-container {
     width: 100%;
     display: flex; /* to put child elements in one row */
     transition-timing-function: ease-in-out;
     transition-property: transform;
   }
-  .carousel__arrow-container {
+  .sc-carousel__arrow-container {
     padding: 5px;
     box-sizing: border-box;
     display: flex;
diff --git a/src/components/Dot/Dot.svelte b/src/components/Dot/Dot.svelte
index 8749d27..ec87eae 100644
--- a/src/components/Dot/Dot.svelte
+++ b/src/components/Dot/Dot.svelte
@@ -20,10 +20,10 @@
   }
 </script>
 
-<div class="carousel-dot__container">
+<div class="sc-carousel-dot__container">
   <div
-    class="carousel-dot__dot"
-    class:carousel-dot__dot_current={active}
+    class="sc-carousel-dot__dot"
+    class:sc-carousel-dot__dot_current={active}
     style="
       height: {$size}px;
       width: {$size}px;
@@ -33,14 +33,14 @@
 </div>
 
 <style>
-  .carousel-dot__container {
+  .sc-carousel-dot__container {
     display: flex;
     align-items: center;
     justify-content: center;
     height: 16px;
     width: 16px;
   }
-  .carousel-dot__dot {
+  .sc-carousel-dot__dot {
     background-color: #5d5d5d;
     border-radius: 50%;
     display: inline-block;
@@ -48,10 +48,10 @@
     cursor: pointer;
     transition: opacity 100ms ease;
   }
-  .carousel-dot__dot:hover {
+  .sc-carousel-dot__dot:hover {
     opacity: 0.9;
   }
-  .carousel-dot__dot_current {
+  .sc-carousel-dot__dot_current {
     opacity: 0.7;
   }
 </style>
\ No newline at end of file
diff --git a/src/components/Dots/Dots.svelte b/src/components/Dots/Dots.svelte
index 4c11961..5eb2f7b 100644
--- a/src/components/Dots/Dots.svelte
+++ b/src/components/Dots/Dots.svelte
@@ -19,9 +19,9 @@
   }
 </script>
 
-<div class="carousel-dots__container">
+<div class="sc-carousel-dots__container">
   {#each Array(pagesCount) as _, pageIndex (pageIndex)}
-    <div class="carousel-dots__dot-container">
+    <div class="sc-carousel-dots__dot-container">
       <Dot
         active={currentPageIndex === pageIndex}
         on:click={() => handleDotClick(pageIndex)}
@@ -34,11 +34,11 @@
   :root {
     --dot-size: 10px; 
   }
-  .carousel-dots__container {
+  .sc-carousel-dots__container {
     display: flex;
     align-items: center;
   }
-  .carousel-dots__dot-container {
+  .sc-carousel-dots__dot-container {
     height: calc(var(--dot-size) + 10px);
     width: calc(var(--dot-size) + 10x);
     display: flex;