From c442b20d67d9ca9aee6d8186231f9bced91a7a02 Mon Sep 17 00:00:00 2001
From: Nicolae Tataru <devdfan@gmail.com>
Date: Mon, 18 Jan 2021 11:21:56 +0200
Subject: [PATCH 1/6] Refactored scss by BEM rules

---
 .storybook/storybook.scss                     |   5 +-
 src/components/atoms/Alert/Alert.scss         |  52 +-
 src/components/atoms/Alert/Alert.tsx          |   4 +-
 src/components/atoms/Avatar/Avatar.scss       | 255 ++++-----
 src/components/atoms/Badge/Badge.scss         | 133 +++--
 src/components/atoms/Button/Button.scss       | 448 ++++++++--------
 src/components/atoms/Card/Card.scss           | 103 ++--
 src/components/atoms/Chips/Chips.scss         | 122 +++--
 src/components/atoms/Collapse/Collapse.scss   |  14 +-
 src/components/atoms/Extra/Extra.scss         |  54 +-
 src/components/atoms/Extra/Extra.tsx          |   2 +-
 src/components/atoms/Icon/Icon.scss           |  22 +-
 src/components/atoms/Input/Input.scss         | 139 +++--
 src/components/atoms/Label/Label.scss         | 236 ++++-----
 src/components/atoms/Radio/Radio.scss         | 236 ++++-----
 src/components/atoms/Switch/Switch.scss       | 128 +++--
 src/components/atoms/Tooltip/Tooltip.scss     |  56 +-
 .../molecules/Calendar/Calendar.scss          | 486 +++++++++--------
 .../molecules/Checkbox/Checkbox.scss          | 286 +++++-----
 .../molecules/InputPhone/InputPhone.scss      | 110 ++--
 .../molecules/InputSearch/InputSearch.scss    |  42 +-
 .../molecules/InputSelect/InputSelect.scss    | 159 +++---
 src/components/molecules/Loader/Loader.scss   |  28 +-
 .../SelectDropdown/SelectDropdown.scss        |  53 +-
 .../SelectDropdownItem.scss                   |  96 ++--
 src/components/molecules/Stepper/Stepper.scss | 275 +++++-----
 .../molecules/Textarea/Textarea.scss          | 104 ++--
 src/components/organisms/Actions/Actions.scss |  58 +-
 src/components/organisms/Form/Form.scss       | 108 ++--
 src/components/organisms/Layout/Layout.scss   | 329 ++++++------
 src/components/organisms/Modal/Modal.scss     | 222 ++++----
 .../organisms/Sidebar/Item/Item.scss          | 164 +++---
 .../organisms/Sidebar/Options/Item/Item.scss  |  22 +-
 .../organisms/Sidebar/Options/Options.scss    |   4 +-
 src/components/organisms/Sidebar/Sidebar.scss | 241 ++++-----
 src/components/organisms/SortBy/SortBy.scss   | 126 +++--
 src/components/organisms/Table/Table.scss     | 500 +++++++++---------
 37 files changed, 2632 insertions(+), 2790 deletions(-)

diff --git a/.storybook/storybook.scss b/.storybook/storybook.scss
index 60b3d6d8..88bdcb64 100644
--- a/.storybook/storybook.scss
+++ b/.storybook/storybook.scss
@@ -22,8 +22,9 @@
 
 .storybook-rows {
   display: flex;
-  width: 100%;
-  min-width: 50vw;
+  width: 50vw;
+  min-width: 100%;
+  max-width: 100%;
 
   .storybook-row {
     width: 100%;
diff --git a/src/components/atoms/Alert/Alert.scss b/src/components/atoms/Alert/Alert.scss
index d0983f65..11313ffe 100644
--- a/src/components/atoms/Alert/Alert.scss
+++ b/src/components/atoms/Alert/Alert.scss
@@ -5,38 +5,36 @@
   border: 1px solid $success-color;
   padding: $alert-padding;
   border-radius: $border-radius;
+}
 
-  svg {
-    width: $alert-icon-size;
-    height: $alert-icon-size;
-    border-radius: 100px;
-    margin-right: $alert-icon-margin;
-    color: $success-color;
-  }
+.ebs-alert .ebs-icon {
+  width: $alert-icon-size;
+  height: $alert-icon-size;
+  border-radius: 100px;
+  margin-right: $alert-icon-margin;
+  color: $success-color;
+}
 
-  &__type {
-    &--info {
-      border: 1px dashed $info-color;
+.ebs-alert.ebs-alert__type--info {
+  border: 1px dashed $info-color;
+}
 
-      svg {
-        color: $info-color;
-      }
-    }
+.ebs-alert.ebs-alert__type--info .ebs-icon {
+  color: $info-color;
+}
 
-    &--warning {
-      border: 1px dashed $warning-color;
+.ebs-alert.ebs-alert__type--warning {
+  border: 1px dashed $warning-color;
+}
 
-      svg {
-        color: $warning-color;
-      }
-    }
+.ebs-alert.ebs-alert__type--warning .ebs-icon {
+  color: $warning-color;
+}
 
-    &--error {
-      border: 1px solid $danger-color;
+.ebs-alert.ebs-alert__type--error {
+  border: 1px dashed $danger-color;
+}
 
-      svg {
-        color: $danger-color;
-      }
-    }
-  }
+.ebs-alert.ebs-alert__type--error .ebs-icon {
+  color: $danger-color;
 }
diff --git a/src/components/atoms/Alert/Alert.tsx b/src/components/atoms/Alert/Alert.tsx
index d93a43e5..78b01ab9 100644
--- a/src/components/atoms/Alert/Alert.tsx
+++ b/src/components/atoms/Alert/Alert.tsx
@@ -1,4 +1,6 @@
 import * as React from 'react';
+
+import cn from 'classnames';
 import { Icon } from '../';
 
 export type AlertType = 'success' | 'info' | 'warning' | 'error';
@@ -30,7 +32,7 @@ export const Alert: React.FC<Props> = ({ type = 'success', message = '', classNa
   }, [message, getHeader]);
 
   return message.length ? (
-    <div ref={ref} className={`ebs-alert ebs-alert__type--${type} ${className}`}>
+    <div ref={ref} className={cn(`ebs-alert`, `ebs-alert__type--${type}`, className)}>
       {renderByType[type]}
       {message}
     </div>
diff --git a/src/components/atoms/Avatar/Avatar.scss b/src/components/atoms/Avatar/Avatar.scss
index 73a40edd..a8418c4b 100644
--- a/src/components/atoms/Avatar/Avatar.scss
+++ b/src/components/atoms/Avatar/Avatar.scss
@@ -2,93 +2,98 @@
   position: relative;
   border-radius: $border-radius;
   @include flex-center;
+}
+
+.ebs-avatar.circle {
+  border-radius: 50%;
+}
+
+.ebs-avatar.circle .ebs-avatar__img {
+  border-radius: 50%;
+}
+
+.ebs-avatar__type--regular {
+  color: $primary-color;
+  background-color: $grey-100;
+}
+
+.ebs-avatar__type--primary {
+  color: $white;
+  background-color: $primary-color;
+}
+
+.ebs-avatar__type--white {
+  color: $text-color;
+  background-color: $white;
+}
 
-  &__type {
-    &--regular {
-      color: $primary-color;
-      background-color: $grey-100;
-    }
-
-    &--primary {
-      color: $white;
-      background-color: $primary-color;
-    }
-
-    &--white {
-      color: $text-color;
-      background-color: $white;
-    }
-  }
-
-  &.circle {
-    border-radius: 50%;
-
-    .ebs-avatar__img {
-      border-radius: 50%;
-    }
-  }
-
-  &.ebs-avatar__size {
-    &--small {
-      min-width: $avatar-size-small;
-      width: $avatar-size-small;
-      height: $avatar-size-small;
-
-      .ebs-avatar-short-alt {
-        font-size: $avatar-font-small;
-      }
-    }
-
-    &--big {
-      min-width: $avatar-size-big;
-      width: $avatar-size-big;
-      height: $avatar-size-big;
-
-      .ebs-avatar-short-alt {
-        font-size: $avatar-font-big;
-      }
-    }
-  }
-
-  .ebs-avatar__short-alt {
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    transform: translate(-50%, -50%);
-    @include fontBold;
-    white-space: nowrap;
-  }
-
-  .ebs-avatar__img {
-    position: relative;
-    width: 100%;
-    height: 100%;
-    z-index: 1;
-    border-radius: $border-radius;
-    object-fit: cover;
-  }
-
-  .ebs-avatar__status {
-    position: absolute;
-    bottom: rem(-2.5px);
-    right: rem(-2.5px);
-    width: rem(10px);
-    height: rem(10px);
-    border: 2px solid #fff;
-    border-radius: 50%;
-
-    &--active {
-      background-color: $avatar-status-active;
-    }
-
-    &--regular {
-      background-color: $primary-color;
-    }
-
-    &--uanctive {
-      background-color: $avatar-status-uanctive;
-    }
-  }
+.ebs-avatar.ebs-avatar__size--small {
+  min-width: $avatar-size-small;
+  width: $avatar-size-small;
+  height: $avatar-size-small;
+}
+
+.ebs-avatar.ebs-avatar__size--small .ebs-avatar-short-alt {
+  font-size: $avatar-font-small;
+}
+
+.ebs-avatar.ebs-avatar__size--big {
+  min-width: $avatar-size-big;
+  width: $avatar-size-big;
+  height: $avatar-size-big;
+}
+
+.ebs-avatar.ebs-avatar__size--big .ebs-avatar-short-alt {
+  font-size: $avatar-font-big;
+}
+
+.ebs-avatar .ebs-avatar__short-alt {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  @include fontBold;
+  white-space: nowrap;
+}
+
+.ebs-avatar .ebs-avatar__short-alt {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  @include fontBold;
+  white-space: nowrap;
+}
+
+.ebs-avatar .ebs-avatar__img {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+  border-radius: $border-radius;
+  object-fit: cover;
+}
+
+.ebs-avatar .ebs-avatar__status {
+  position: absolute;
+  bottom: rem(-2.5px);
+  right: rem(-2.5px);
+  width: rem(10px);
+  height: rem(10px);
+  border: 2px solid #fff;
+  border-radius: 50%;
+}
+
+.ebs-avatar .ebs-avatar__status--active {
+  background-color: $avatar-status-active;
+}
+
+.ebs-avatar .ebs-avatar__status--regular {
+  background-color: $primary-color;
+}
+
+.ebs-avatar .ebs-avatar__status--reuanctivegular {
+  background-color: $avatar-status-uanctive;
 }
 
 .ebs-avatar__card {
@@ -97,53 +102,51 @@
   background-color: #f9f9f9;
   border: 1px solid #dfddd6;
   border-radius: $border-radius;
+}
 
-  .ebs-avatar {
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-    height: rem(23px);
-    width: rem(23px);
+.ebs-avatar__card .ebs-avatar {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+  height: rem(23px);
+  width: rem(23px);
+}
 
-    img {
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
-    }
-  }
+.ebs-avatar__card .ebs-avatar img {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
 
-  .ebs-avatar__card-alt {
-    color: #333;
-    padding: rem(0 $gutter-size / 2);
-    border-top-right-radius: $border-radius;
-    border-bottom-right-radius: $border-radius;
-    @include fontMedium;
-    font-size: rem(9px);
-  }
+.ebs-avatar__card .ebs-avatar__card-alt {
+  color: #333;
+  padding: rem(0 $gutter-size / 2);
+  border-top-right-radius: $border-radius;
+  border-bottom-right-radius: $border-radius;
+  @include fontMedium;
+  font-size: rem(9px);
 }
 
 .ebs-avatar__inline {
   display: flex;
   align-items: center;
+}
+
+.ebs-avatar__inline .ebs-avatar__inline-alt {
+  margin-left: $gutter-size;
+  @include fontSemiBold;
+  font-size: rem(12px);
+  color: $black;
+}
+
+.ebs-avatar__inline.is-white .ebs-avatar__inline-alt {
+  color: $white;
+}
+
+.ebs-avatar__inline .ebs-avatar__inline-description {
+  font-size: rem(10px);
+  color: $avatar-description-color;
+}
 
-  .ebs-avatar__inline-alt {
-    margin-left: $gutter-size;
-    @include fontSemiBold;
-    font-size: rem(12px);
-    color: $black;
-  }
-
-  &.is-white .ebs-avatar__inline-alt {
-    color: $white;
-  }
-
-  .ebs-avatar__inline-description {
-    font-size: rem(10px);
-    color: $avatar-description-color;
-  }
-
-  &.is-reversed {
-    .ebs-avatar__inline-alt {
-      margin-left: 0;
-      margin-right: $gutter-size;
-    }
-  }
+.ebs-avatar__inline.is-reversed .ebs-avatar__inline-alt {
+  margin-left: 0;
+  margin-right: $gutter-size;
 }
diff --git a/src/components/atoms/Badge/Badge.scss b/src/components/atoms/Badge/Badge.scss
index 74cc01ac..a4bd4d96 100644
--- a/src/components/atoms/Badge/Badge.scss
+++ b/src/components/atoms/Badge/Badge.scss
@@ -3,88 +3,77 @@
 
   min-width: $badge-min-size;
   min-height: $badge-min-size;
+}
 
-  &__container {
-    @include flex-center;
-
-    position: absolute;
-    right: 0;
-    top: 0;
-    z-index: 2;
-    background-color: $badge-regular-bg-color;
-    width: $badge-size;
-    height: $badge-size;
-    color: $black;
-    border-radius: $badge-border-radius;
-    padding: $badge-padding;
-    transform: $badge-transform;
-    font-size: $badge-font-size;
-    font-weight: $badge-font-weight;
+.ebs-badge__container {
+  @include flex-center;
 
-    &.is-text {
-      width: auto;
-      padding: $badge-text-padding;
-      border-radius: $badge-text-border-radius;
-    }
+  position: absolute;
+  right: 0;
+  top: 0;
+  z-index: 2;
+  background-color: $badge-regular-bg-color;
+  width: $badge-size;
+  height: $badge-size;
+  color: $black;
+  border-radius: $badge-border-radius;
+  padding: $badge-padding;
+  transform: $badge-transform;
+  font-size: $badge-font-size;
+  font-weight: $badge-font-weight;
+}
 
-    + * {
-      margin: 0 5px;
-    }
-  }
+.ebs-badge__container.is-text {
+  width: auto;
+  padding: $badge-text-padding;
+  border-radius: $badge-text-border-radius;
+}
 
-  span {
-    @include flex-center;
+.ebs-badge__container + * {
+  margin: 0 5px;
+}
 
-    position: relative;
+.ebs-badge span {
+  @include flex-center;
+  position: relative;
+}
 
-    > .ebs-icon {
-      font-size: $badge-size;
-    }
-  }
+.ebs-badge span > .ebs-icon {
+  font-size: $badge-size;
+}
 
-  &__type {
-    &--success {
-      .ebs-badge__container {
-        background-color: $badge-success-bg-color;
-        color: $white;
-      }
-    }
+.ebs-badge__type--success .ebs-badge__container {
+  background-color: $badge-success-bg-color;
+  color: $white;
+}
 
-    &--info {
-      .ebs-badge__container {
-        background-color: $badge-info-bg-color;
-        color: $white;
-      }
-    }
+.ebs-badge__type--info .ebs-badge__container {
+  background-color: $badge-info-bg-color;
+  color: $white;
+}
 
-    &--warning {
-      .ebs-badge__container {
-        background-color: $badge-warning-bg-color;
-        color: $white;
-      }
-    }
+.ebs-badge__type--warning .ebs-badge__container {
+  background-color: $badge-warning-bg-color;
+  color: $white;
+}
 
-    &--danger {
-      .ebs-badge__container {
-        background-color: $badge-danger-bg-color;
-        color: $white;
-      }
-    }
-  }
+.ebs-badge__type--danger .ebs-badge__container {
+  background-color: $badge-danger-bg-color;
+  color: $white;
+}
 
-  .ebs-sidebar__prefix > & {
-    position: absolute;
-    left: rem(20px);
-    top: 50%;
-    transform: translateY(-50%);
-    font-size: rem(18px);
+.ebs-sidebar__prefix > .ebs-badge {
+  position: absolute;
+  left: rem(20px);
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: rem(18px);
+}
 
-    .ebs-icon {
-      position: unset;
-      left: unset;
-      top: unset;
-      transform: unset;
-      margin-left: 0;
-    }
-  }
+.ebs-sidebar__prefix > .ebs-badge .ebs-icon {
+  position: unset;
+  left: unset;
+  top: unset;
+  transform: unset;
+  margin-left: 0;
 }
diff --git a/src/components/atoms/Button/Button.scss b/src/components/atoms/Button/Button.scss
index 96073eaf..6ebf51f8 100644
--- a/src/components/atoms/Button/Button.scss
+++ b/src/components/atoms/Button/Button.scss
@@ -8,258 +8,248 @@
   border-radius: rem($border-radius);
   transition: $transition-base;
   border: 1px solid transparent;
+}
 
-  // button
-  .ebs-button {
-    width: 100%;
-    cursor: pointer;
-    font-size: rem(13px);
-    line-height: $btn-line-height;
-    border-color: transparent;
-    background: transparent;
-    padding: 0;
-    outline: none !important;
-    @include fontMedium;
-
-    &-icon {
-      line-height: 0;
-    }
+// button
+.ebs-button {
+  width: 100%;
+  cursor: pointer;
+  font-size: rem(13px);
+  line-height: $btn-line-height;
+  border-color: transparent;
+  background: transparent;
+  padding: 0;
+  outline: none !important;
+  @include fontMedium;
+}
+
+.ebs-button-icon {
+  line-height: 0;
+}
+
+// button size
+.ebs-button__wrapper.ebs-button__size--large {
+  border-radius: $btn-border-radius-lg;
+}
+
+.ebs-button__wrapper.ebs-button__size--large .ebs-button {
+  padding: rem($btn-padding-y-lg $btn-padding-x-lg);
+  font-weight: $btn-font-weight-lg;
+  font-size: rem($btn-font-size-lg);
+}
+
+.ebs-button__wrapper.ebs-button__size--medium {
+  border-radius: $btn-border-radius;
+}
+
+.ebs-button__wrapper.ebs-button__size--medium .ebs-button {
+  padding: rem($btn-padding-y $btn-padding-x);
+  font-weight: $btn-font-weight;
+  font-size: rem($btn-font-size);
+}
+
+.ebs-button__wrapper.ebs-button__size--small {
+  border-radius: $btn-border-radius-sm;
+}
+
+.ebs-button__wrapper.ebs-button__size--small .ebs-button {
+  padding: rem($btn-padding-y-sm $btn-padding-x-sm);
+  font-weight: $btn-font-weight-sm;
+  font-size: rem($btn-font-size-sm);
+  line-height: $btn-line-height-sm;
+}
+
+// button type (Color)
+.ebs-button__wrapper.ebs-button__type--primary {
+  border-color: $primary-color;
+  background-color: $primary-color;
+  color: $white;
+}
+
+.ebs-button__wrapper.ebs-button__type--primary:hover,
+.ebs-button__wrapper.ebs-button__type--primary.hover {
+  border-color: $primary-600;
+  background-color: $primary-600;
+}
+
+.ebs-button__wrapper.ebs-button__type--primary:active,
+.ebs-button__wrapper.ebs-button__type--primary.active {
+  border-color: $primary-700;
+  background-color: $primary-700;
+}
+
+.ebs-button__wrapper.ebs-button__type--primary .ebs-button {
+  color: $white;
+
+  &:hover {
+    color: $white;
   }
+}
+
+.ebs-button__wrapper.ebs-button__type--fill {
+  border-color: $primary-100;
+  background-color: $primary-100;
+  color: $primary-color;
+}
+
+.ebs-button__wrapper.ebs-button__type--fill .ebs-button {
+  color: $primary-color;
+}
 
-  // button size
-  &.ebs-button__size {
-    &--large {
-      border-radius: $btn-border-radius-lg;
-
-      .ebs-button {
-        padding: rem($btn-padding-y-lg $btn-padding-x-lg);
-        font-weight: $btn-font-weight-lg;
-        font-size: rem($btn-font-size-lg);
-      }
-    }
-
-    &--medium {
-      border-radius: $btn-border-radius;
-
-      .ebs-button {
-        padding: rem($btn-padding-y $btn-padding-x);
-        font-weight: $btn-font-weight;
-        font-size: rem($btn-font-size);
-      }
-    }
-
-    &--small {
-      border-radius: $btn-border-radius-sm;
-
-      .ebs-button {
-        padding: rem($btn-padding-y-sm $btn-padding-x-sm);
-        font-weight: $btn-font-weight-sm;
-        font-size: rem($btn-font-size-sm);
-        line-height: $btn-line-height-sm;
-      }
-    }
+.ebs-button__wrapper.ebs-button__type--fill:hover,
+.ebs-button__wrapper.ebs-button__type--fill.hover {
+  border-color: $primary-color;
+  background-color: $primary-color;
+  color: $white;
+
+  .ebs-button {
+    color: $white;
   }
+}
 
-  // button type (Color)
-  &.ebs-button__type {
-    &--primary {
-      border-color: $primary-color;
-      background-color: $primary-color;
-      color: $white;
-
-      .ebs-button {
-        color: $white;
-
-        &:hover {
-          color: $white;
-        }
-      }
-
-      &:hover,
-      &.hover {
-        border-color: $primary-600;
-        background-color: $primary-600;
-      }
-
-      &:active,
-      &.active {
-        border-color: $primary-700;
-        background-color: $primary-700;
-      }
-    }
-
-    &--fill {
-      border-color: $primary-100;
-      background-color: $primary-100;
-      color: $primary-color;
-
-      .ebs-button {
-        color: $primary-color;
-      }
-
-      &:hover,
-      &.hover {
-        border-color: $primary-color;
-        background-color: $primary-color;
-        color: $white;
-
-        & .ebs-button {
-          color: $white;
-        }
-      }
-
-      &:active,
-      &.active {
-        border-color: $primary-600;
-        background-color: $primary-600;
-        color: $white;
-
-        & .ebs-button {
-          color: $white;
-        }
-      }
-    }
-
-    &--ghost {
-      background-color: $btn-type-ghost-background;
-      border-color: $btn-type-ghost-border-color;
-      color: $btn-type-ghost-color;
-
-      .ebs-button {
-        color: $btn-type-ghost-color;
-      }
-
-      &:hover,
-      &.hover {
-        border-color: $btn-type-ghost-hover-border-color;
-        background-color: $btn-type-ghost-hover-background;
-        color: $btn-type-ghost-hover-color;
-
-        & .ebs-button {
-          color: $btn-type-ghost-hover-color;
-        }
-      }
-
-      &:active,
-      &.active {
-        border-color: $btn-type-ghost-active-border-color;
-        background-color: $btn-type-ghost-active-background;
-        color: $btn-type-ghost-active-color;
-
-        & .ebs-button {
-          color: $btn-type-ghost-active-color;
-        }
-      }
-    }
-
-    &--text {
-      background-color: transparent;
-      color: $primary-color;
-
-      .ebs-button {
-        color: $primary-color;
-      }
-
-      &:hover,
-      &.hover {
-        background-color: transparent;
-
-        & .ebs-button {
-          color: $primary-600;
-        }
-      }
-
-      &:active,
-      &.active {
-        background-color: transparent;
-
-        & .ebs-button {
-          color: $primary-700;
-        }
-      }
-    }
-
-    &--disabled {
-      background-color: $border-color;
-
-      .ebs-button {
-        cursor: not-allowed;
-        color: $grey-500;
-      }
-    }
+.ebs-button__wrapper.ebs-button__type--fill:active,
+.ebs-button__wrapper.ebs-button__type--fill.active {
+  border-color: $primary-600;
+  background-color: $primary-600;
+  color: $white;
+
+  .ebs-button {
+    color: $white;
   }
+}
+
+.ebs-button__wrapper.ebs-button__type--ghost {
+  background-color: $btn-type-ghost-background;
+  border-color: $btn-type-ghost-border-color;
+  color: $btn-type-ghost-color;
+}
+
+.ebs-button__wrapper.ebs-button__type--ghost .ebs-button {
+  color: $btn-type-ghost-color;
+}
 
-  &.has-prefix {
-    .ebs-button {
-      padding-left: rem(30px);
-    }
+.ebs-button__wrapper.ebs-button__type--ghost:hover,
+.ebs-button__wrapper.ebs-button__type--ghost.hover {
+  border-color: $btn-type-ghost-hover-border-color;
+  background-color: $btn-type-ghost-hover-background;
+  color: $btn-type-ghost-hover-color;
+
+  .ebs-button {
+    color: $btn-type-ghost-hover-color;
   }
+}
 
-  &.has-icon {
-    display: flex;
-    align-items: center;
+.ebs-button__wrapper.ebs-button__type--ghost:active,
+.ebs-button__wrapper.ebs-button__type--ghost.active {
+  border-color: $btn-type-ghost-active-border-color;
+  background-color: $btn-type-ghost-active-background;
+  color: $btn-type-ghost-active-color;
+
+  .ebs-button {
+    color: $btn-type-ghost-active-color;
   }
+}
+
+.ebs-button__wrapper.ebs-button__type--text {
+  background-color: transparent;
+  color: $primary-color;
+}
+
+.ebs-button__wrapper.ebs-button__type--text .ebs-button {
+  color: $primary-color;
+}
 
-  &.block {
-    width: 100%;
-    display: block;
+.ebs-button__wrapper.ebs-button__type--text:hover,
+.ebs-button__wrapper.ebs-button__type--text.hover {
+  background-color: transparent;
+
+  .ebs-button {
+    color: $primary-600;
   }
+}
 
-  .ebs-button__loading {
-    position: absolute;
-    left: 0;
-    top: 0;
-    height: 100%;
-    width: 100%;
-    border-radius: rem($border-radius);
-    pointer-events: none;
-
-    &.ebs-button__loading {
-      &-regular {
-        animation: regularFade 0.25s forwards;
-      }
-    }
-
-    .ebs-loader__spinner {
-      position: absolute;
-      left: calc(50% - 7.5px);
-      top: calc(50% - 7.5px);
-      transform: translate(-50%, -50%);
-    }
+.ebs-button__wrapper.ebs-button__type--text:active,
+.ebs-button__wrapper.ebs-button__type--text.active {
+  background-color: transparent;
+
+  .ebs-button {
+    color: $primary-700;
   }
+}
+
+.ebs-button__wrapper.ebs-button__type--disabled {
+  background-color: $border-color;
 
-  .ebs-button__prefix {
-    position: absolute;
-    left: rem(10px);
-    top: 50%;
-    transform: translateY(-50%);
-    pointer-events: none;
-    display: flex;
-    align-items: center;
+  .ebs-button {
+    cursor: not-allowed;
+    color: $grey-500;
   }
 }
 
+.ebs-button__wrapper.has-prefix .ebs-button {
+  padding-left: rem(30px);
+}
+
+.ebs-button__wrapper.has-icon {
+  display: flex;
+  align-items: center;
+}
+
+.ebs-button__wrapper.block {
+  width: 100%;
+  display: block;
+}
+
+.ebs-button__loading {
+  position: absolute;
+  left: 0;
+  top: 0;
+  height: 100%;
+  width: 100%;
+  border-radius: rem($border-radius);
+  pointer-events: none;
+}
+
+.ebs-button__loading-regular {
+  animation: regularFade 0.25s forwards;
+}
+
+.ebs-button__loading .ebs-loader__spinner {
+  position: absolute;
+  left: calc(50% - 7.5px);
+  top: calc(50% - 7.5px);
+  transform: translate(-50%, -50%);
+}
+
+.ebs-button__prefix {
+  position: absolute;
+  left: rem(10px);
+  top: 50%;
+  transform: translateY(-50%);
+  pointer-events: none;
+  display: flex;
+  align-items: center;
+}
+
 .ebs-button__group {
   display: flex;
   flex-wrap: wrap;
+}
 
-  > .ebs-button__wrapper {
-    &:first-child {
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
-    }
+.ebs-button__group > .ebs-button__wrapper:first-child {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
 
-    &:not(:first-child):not(:last-child) {
-      border-radius: 0;
-    }
+.ebs-button__group > .ebs-button__wrapper:not(:first-child):not(:last-child) {
+  border-radius: 0;
+}
 
-    &:not(:last-child) {
-      border-right: none;
-    }
+.ebs-button__group > .ebs-button__wrapper:not(:last-child) {
+  border-right: none;
+}
 
-    &:last-child {
-      border-top-left-radius: 0;
-      border-bottom-left-radius: 0;
-    }
-  }
+.ebs-button__group > .ebs-button__wrapper:last-child {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
 }
diff --git a/src/components/atoms/Card/Card.scss b/src/components/atoms/Card/Card.scss
index 63ec729f..804371fb 100644
--- a/src/components/atoms/Card/Card.scss
+++ b/src/components/atoms/Card/Card.scss
@@ -5,51 +5,48 @@
   justify-content: space-between;
   align-items: center;
   padding-top: rem($gutter-size);
+}
 
-  .ebs-card__header-title {
-    font-size: rem(14px);
-    @include fontBold;
-    margin-right: rem($gutter-size);
-    white-space: nowrap;
-  }
+.ebs-card__header-title {
+  font-size: rem(14px);
+  @include fontBold;
+  margin-right: rem($gutter-size);
+  white-space: nowrap;
+}
 
-  .ebs-card__header-side {
-    &--right {
-      display: flex;
-      flex-wrap: wrap;
-      align-items: center;
-      text-align: right;
+.ebs-card__header-side--right {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  text-align: right;
 
-      @include mq($until: tablet) {
-        text-align: left;
-      }
+  @include mq($until: tablet) {
+    text-align: left;
+  }
+}
 
-      > *:not(:first-child) {
-        margin-left: rem(15px);
-      }
+.ebs-card__header-side--right > *:not(:first-child) {
+  margin-left: rem(15px);
+}
 
-      .picker-label {
-        margin-right: 0;
-      }
-    }
+.ebs-card__header-side--right .picker-label {
+  margin-right: 0;
+}
 
-    &--left {
-      > *:not(:last-child) {
-        margin-right: rem(15px);
-      }
-    }
+.ebs-card__header-side--left > *:not(:last-child) {
+  margin-right: rem(15px);
+}
 
-    &--left,
-    &--right {
-      display: flex;
-      flex-wrap: wrap;
-      align-items: center;
+.ebs-card__header-side--left,
+.ebs-card__header-side--right {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+}
 
-      > * {
-        margin-bottom: rem($gutter-size);
-      }
-    }
-  }
+.ebs-card__header-side--left > *,
+.ebs-card__header-side--right > * {
+  margin-bottom: rem($gutter-size);
 }
 
 // FOOTER
@@ -59,27 +56,25 @@
   display: flex;
   border: 1px solid $border-color;
   border-top: unset;
+}
 
-  .ebs-card__footer-side {
-    &--left {
-      position: relative;
-    }
+.ebs-card__footer-side--left {
+  position: relative;
+}
 
-    &--right {
-      width: 100%;
-      text-align: right;
+.ebs-card__footer-side--right {
+  width: 100%;
+  text-align: right;
+}
 
-      .ebs-button__wrapper:not(:last__child) {
-        margin-right: rem(10px);
-      }
-    }
-  }
+.ebs-card__footer-side--right .ebs-button__wrapper:not(:last__child) {
+  margin-right: rem(10px);
+}
 
-  .ebs-button__wrapper {
-    @include elevation-1;
+.ebs-card__footer .ebs-button__wrapper {
+  @include elevation-1;
 
-    &:not(:last-child) {
-      margin-right: rem(10px);
-    }
+  &:not(:last-child) {
+    margin-right: rem(10px);
   }
 }
diff --git a/src/components/atoms/Chips/Chips.scss b/src/components/atoms/Chips/Chips.scss
index 1e73858b..58994ca5 100644
--- a/src/components/atoms/Chips/Chips.scss
+++ b/src/components/atoms/Chips/Chips.scss
@@ -7,80 +7,76 @@
   background-color: transparent;
   cursor: pointer;
   transition: all $transition-time;
+}
 
-  &.ebs-chips {
-    &-checked {
-      background-color: $primary-000;
-      border-color: $primary-color;
-      color: $primary-color;
+.ebs-chips.ebs-chips-checked {
+  background-color: $primary-000;
+  border-color: $primary-color;
+  color: $primary-color;
+}
 
-      &:hover {
-        background-color: $primary-color;
-        border-color: $primary-color;
-        color: $white;
-      }
-    }
+.ebs-chips.ebs-chips-checked:hover {
+  background-color: $primary-color;
+  border-color: $primary-color;
+  color: $white;
+}
 
-    &-unchecked {
-      background-color: transparent;
-      border-color: $text-color-light;
-      color: $text-color-secondary;
+.ebs-chips.ebs-chips-unchecked {
+  background-color: transparent;
+  border-color: $text-color-light;
+  color: $text-color-secondary;
+}
 
-      &:hover {
-        background-color: transparent;
-        border-color: $primary-400;
-        color: $primary-400;
-      }
-    }
-  }
+.ebs-chips.ebs-chips-unchecked:hover {
+  background-color: transparent;
+  border-color: $primary-400;
+  color: $primary-400;
+}
 
-  &.has-prefix {
-    padding-left: rem(28px);
-  }
+.ebs-chips.has-prefix {
+  padding-left: rem(28px);
+}
 
-  &.has-suffix {
-    padding-right: rem(28px);
-  }
+.ebs-chips.has-suffix {
+  padding-right: rem(28px);
+}
 
-  &.disabled {
-    cursor: not-allowed;
+.ebs-chips.disabled {
+  cursor: not-allowed;
+}
 
-    &.ebs-chips {
-      &-checked,
-      &-checked:hover {
-        background-color: $border-color;
-        border-color: $border-color;
-        color: $grey-500;
-      }
+.ebs-chips.disabled.ebs-chips-checked,
+.ebs-chips.disabled.ebs-chips-checked:hover {
+  background-color: $border-color;
+  border-color: $border-color;
+  color: $grey-500;
+}
 
-      &-unchecked,
-      &-unchecked:hover {
-        background-color: transparent;
-        border-color: $border-color;
-        color: $border-color;
-      }
-    }
-  }
+.ebs-chips.disabled.ebs-chips-unchecked,
+.ebs-chips.disabled.ebs-chips-unchecked:hover {
+  background-color: transparent;
+  border-color: $border-color;
+  color: $border-color;
+}
 
-  .ebs-chips__prefix {
-    position: absolute;
-    left: rem(9px);
-    top: calc(50% + 1px);
-    transform: translateY(-50%);
+.ebs-chips__prefix {
+  position: absolute;
+  left: rem(9px);
+  top: calc(50% + 1px);
+  transform: translateY(-50%);
+}
 
-    .ebs-icon {
-      font-size: rem(12px);
-    }
-  }
+.ebs-chips__prefix .ebs-icon {
+  font-size: rem(12px);
+}
 
-  .ebs-chips__suffix {
-    position: absolute;
-    right: rem(9px);
-    top: calc(50% + 1px);
-    transform: translateY(-50%);
+.ebs-chips__suffix {
+  position: absolute;
+  right: rem(9px);
+  top: calc(50% + 1px);
+  transform: translateY(-50%);
+}
 
-    .ebs-icon {
-      font-size: rem(12px);
-    }
-  }
+.ebs-chips__suffix .ebs-icon {
+  font-size: rem(12px);
 }
diff --git a/src/components/atoms/Collapse/Collapse.scss b/src/components/atoms/Collapse/Collapse.scss
index 6ffe531b..038c2bd0 100644
--- a/src/components/atoms/Collapse/Collapse.scss
+++ b/src/components/atoms/Collapse/Collapse.scss
@@ -4,12 +4,10 @@
   border-color: $collapse-border-color;
   border-radius: $collapse-border-radius;
   transition: height 600ms ease-out;
+}
 
-  &.collapsed {
-    .ebs-collapse__header {
-      border-bottom: none;
-    }
-  }
+.ebs-collapse.collapsed .ebs-collapse__header {
+  border-bottom: none;
 }
 
 .ebs-collapse__header {
@@ -34,10 +32,10 @@
 
 .ebs-collapse__header-action {
   margin-left: rem(10px);
+}
 
-  svg {
-    width: rem(12px);
-  }
+.ebs-collapse__header-action svg {
+  width: rem(12px);
 }
 
 .ebs-collapse__title {
diff --git a/src/components/atoms/Extra/Extra.scss b/src/components/atoms/Extra/Extra.scss
index f6351129..2dcff97f 100644
--- a/src/components/atoms/Extra/Extra.scss
+++ b/src/components/atoms/Extra/Extra.scss
@@ -3,39 +3,37 @@
   color: $text-color-secondary;
   @include fontRegular;
   font-size: rem(10px);
+}
 
-  &.has-error {
-    color: $danger-color;
-  }
+.ebs-extra.has-error {
+  color: $danger-color;
+}
 
-  &.disabled {
-    color: $grey-500;
-  }
+.ebs-extra.disabled {
+  color: $grey-500;
+}
 
-  &.ebs-extra__status {
-    &-success {
-      color: $success-color;
-      border-color: $success-color;
-    }
+.ebs-extra.ebs-extra__status--success {
+  color: $success-color;
+  border-color: $success-color;
+}
 
-    &-warning {
-      color: $warning-color;
-      border-color: $warning-color;
-    }
+.ebs-extra.ebs-extra__status--warning {
+  color: $warning-color;
+  border-color: $warning-color;
+}
 
-    &-danger {
-      color: $danger-color;
-      border-color: $danger-color;
-    }
+.ebs-extra.ebs-extra__status--danger {
+  color: $danger-color;
+  border-color: $danger-color;
+}
 
-    &-info {
-      color: $info-color;
-      border-color: $info-color;
-    }
+.ebs-extra.ebs-extra__status--info {
+  color: $info-color;
+  border-color: $info-color;
+}
 
-    &-text {
-      color: $text-color;
-      border-color: $text-color;
-    }
-  }
+.ebs-extra.ebs-extra__status--text {
+  color: $text-color;
+  border-color: $text-color;
 }
diff --git a/src/components/atoms/Extra/Extra.tsx b/src/components/atoms/Extra/Extra.tsx
index 6a931205..7ea6abde 100644
--- a/src/components/atoms/Extra/Extra.tsx
+++ b/src/components/atoms/Extra/Extra.tsx
@@ -16,6 +16,6 @@ export const Extra: React.FC<Props> = ({ className, status = 'text', disabled, t
   }
 
   return (
-    <div className={cn(`ebs-extra`, `ebs-extra__status-${status}`, className, { disabled: disabled })}>{text}</div>
+    <div className={cn(`ebs-extra`, `ebs-extra__status--${status}`, className, { disabled: disabled })}>{text}</div>
   );
 };
diff --git a/src/components/atoms/Icon/Icon.scss b/src/components/atoms/Icon/Icon.scss
index 60f519f1..c963c174 100644
--- a/src/components/atoms/Icon/Icon.scss
+++ b/src/components/atoms/Icon/Icon.scss
@@ -1,19 +1,15 @@
 .ebs-icon {
   font-size: rem(16px);
+}
 
-  &__type {
-    &-arrow {
-      &-right {
-        transform: rotate(90deg);
-      }
+.ebs-icon__type-arrow-right {
+  transform: rotate(90deg);
+}
 
-      &-bottom {
-        transform: rotate(180deg);
-      }
+.ebs-icon__type-arrow--bottom {
+  transform: rotate(180deg);
+}
 
-      &-left {
-        transform: rotate(270deg);
-      }
-    }
-  }
+.ebs-icon__type-arrow--left {
+  transform: rotate(270deg);
 }
diff --git a/src/components/atoms/Input/Input.scss b/src/components/atoms/Input/Input.scss
index f894f84f..b8a344f6 100644
--- a/src/components/atoms/Input/Input.scss
+++ b/src/components/atoms/Input/Input.scss
@@ -4,84 +4,83 @@
   border: 1px solid $border-color;
   background-color: $white;
   border-radius: rem($border-radius);
+}
 
-  &.has-prefix .ebs-input {
-    padding-left: rem(37.5px);
-  }
-
-  &.has-suffix .ebs-input {
-    padding-right: rem(37.5px);
-  }
+.ebs-input__wrapper.has-prefix .ebs-input {
+  padding-left: rem(37.5px);
+}
 
-  &.ebs-input__wrapper {
-    &--active,
-    &.focus {
-      border-color: $primary-color;
-      background-color: $white !important;
+.ebs-input__wrapper.has-suffix .ebs-input {
+  padding-right: rem(37.5px);
+}
 
-      .ebs-input {
-        color: $heading-color;
-      }
-    }
+.ebs-input__wrapper--active,
+.ebs-input__wrapper.focus {
+  border-color: $primary-color;
+  background-color: $white !important;
 
-    &--unactive {
-      border-color: $border-color;
-      background-color: $white;
-    }
+  .ebs-input {
+    color: $heading-color;
   }
+}
 
-  &.has-error {
-    border-color: $danger-color;
-    background-color: $white;
-  }
+.ebs-input__wrapper--unactive {
+  border-color: $border-color;
+  background-color: $white;
+}
 
-  &.disabled {
-    border-color: $grey-500;
-    background-color: $white;
+.ebs-input__wrapper.has-error {
+  border-color: $danger-color;
+  background-color: $white;
+}
 
-    .ebs-input {
-      color: $grey-500;
-      cursor: not-allowed;
+.ebs-input__wrapper.disabled {
+  border-color: $grey-500;
+  background-color: $white;
 
-      @include placeholder {
-        color: $grey-500;
-      }
-    }
-  }
+  .ebs-input {
+    color: $grey-500;
+    cursor: not-allowed;
 
-  &.ebs-input__style {
-    &-grey {
-      background-color: $grey-50;
+    @include placeholder {
+      color: $grey-500;
     }
   }
+}
 
-  .ebs-input__prefix,
-  .ebs-input__suffix {
-    position: absolute;
-    left: rem(10px);
-    top: 50%;
-    transform: translateY(-50%);
-    display: flex;
-    align-items: center;
-
-    &.not-clickable {
-      pointer-events: none;
-    }
-
-    &.clickable {
-      cursor: pointer;
-      z-index: 2;
-    }
+.ebs-input__wrapper.ebs-input__style-grey {
+  background-color: $grey-50;
+}
 
-    .ebs-icon {
-      font-size: rem(16px);
-    }
+.ebs-input__prefix,
+.ebs-input__suffix {
+  position: absolute;
+  left: rem(10px);
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+
+  .ebs-icon {
+    font-size: rem(16px);
   }
+}
 
-  .ebs-input__suffix {
-    left: inherit;
-    right: rem(10px);
-  }
+.ebs-input__prefix.clickable,
+.ebs-input__suffix.clickable {
+  cursor: pointer;
+  z-index: 2;
+}
+
+.ebs-input__prefix.not-clickable,
+.ebs-input__suffix.not-clickable {
+  cursor: pointer;
+  z-index: 2;
+}
+
+.ebs-input__suffix {
+  left: inherit;
+  right: rem(10px);
 }
 
 // input html element
@@ -96,16 +95,16 @@
   padding: rem(0 10px);
   color: $heading-color;
 
-  &-container {
-    position: relative;
-    width: 100%;
-  }
-
   @include placeholder {
     color: $text-color-secondary;
   }
+}
 
-  &:focus {
-    outline: none !important;
-  }
+.ebs-input:focus {
+  outline: none !important;
+}
+
+.ebs-input-container {
+  position: relative;
+  width: 100%;
 }
diff --git a/src/components/atoms/Label/Label.scss b/src/components/atoms/Label/Label.scss
index 7b8fee8e..d6c1a0e8 100644
--- a/src/components/atoms/Label/Label.scss
+++ b/src/components/atoms/Label/Label.scss
@@ -3,148 +3,142 @@
   position: relative;
   white-space: nowrap;
   @include fontRegular;
+}
 
-  &.ebs-label {
-    &-regular {
-      font-size: rem(12px);
-      margin-bottom: rem(5px);
-      color: $text-color;
-    }
+.ebs-label-regular {
+  font-size: rem(12px);
+  margin-bottom: rem(5px);
+  color: $text-color;
+}
 
-    &-circle,
-    &-fill {
-      display: inline;
-      font-size: rem(10px);
-      padding: rem(5px 12px);
-      border: 1px solid $text-color;
-      border-radius: rem(12px);
-    }
+.ebs-label-circle,
+.ebs-label-fill {
+  display: inline;
+  font-size: rem(10px);
+  padding: rem(5px 12px);
+  border: 1px solid $text-color;
+  border-radius: rem(12px);
+}
 
-    &-circle {
-      color: $text-color;
-    }
+.ebs-label--circle {
+  color: $text-color;
+}
 
-    &-fill {
-      color: $white !important;
-      background: $text-color;
-      border-radius: rem(12px);
-
-      &.ebs-label__status {
-        &--success {
-          background-color: $success-color;
-        }
-
-        &--warning {
-          background-color: $warning-color;
-        }
-
-        &--danger {
-          background-color: $danger-color;
-        }
-
-        &--info {
-          background-color: $info-color;
-        }
-
-        &--text {
-          background-color: $text-color;
-        }
-      }
-
-      &.disabled {
-        cursor: not-allowed;
-        color: $grey-500 !important;
-        background: $grey-100;
-      }
-    }
-  }
+.ebs-label--fill {
+  color: $white !important;
+  background: $text-color;
+  border-radius: rem(12px);
+}
 
-  &.ebs-label__status {
-    &--success {
-      color: $success-color;
-      border-color: $success-color;
-    }
+.ebs-label--fill.ebs-label__status--success {
+  background-color: $success-color;
+}
 
-    &--warning {
-      color: $warning-color;
-      border-color: $warning-color;
-    }
+.ebs-label--fill.ebs-label__status--warning {
+  background-color: $warning-color;
+}
 
-    &--danger {
-      color: $danger-color;
-      border-color: $danger-color;
-
-      &.is-icon-info {
-        background: $white;
-        border-color: $white;
-        .ebs-icon {
-          color: $danger-color;
-        }
-      }
-    }
+.ebs-label--fill.ebs-label__status--danger {
+  background-color: $danger-color;
+}
 
-    &--info {
-      color: $info-color;
-      border-color: $info-color;
-    }
+.ebs-label--fill.ebs-label__status--info {
+  background-color: $info-color;
+}
 
-    &--text {
-      color: $text-color;
-      border-color: $text-color;
-    }
+.ebs-label--fill.ebs-label__status--text {
+  background-color: $text-color;
+}
+
+.ebs-label--fill.disabled {
+  cursor: not-allowed;
+  color: $grey-500 !important;
+  background: $grey-100;
+}
+
+.ebs-label.ebs-label__status--success {
+  color: $success-color;
+  border-color: $success-color;
+}
 
-    &--primary {
-      background-color: $primary-000;
-      color: $primary-color;
-      border-color: $primary-color;
+.ebs-label.ebs-label__status--warning {
+  color: $warning-color;
+  border-color: $warning-color;
+}
+
+.ebs-label.ebs-label__status--danger {
+  color: $danger-color;
+  border-color: $danger-color;
+
+  &.is-icon-info {
+    background: $white;
+    border-color: $white;
+    .ebs-icon {
+      color: $danger-color;
     }
   }
+}
 
-  &.disabled {
-    cursor: not-allowed;
-    color: $grey-500;
-    border-color: $grey-500;
-  }
+.ebs-label.ebs-label__status--info {
+  color: $info-color;
+  border-color: $info-color;
+}
 
-  &.has-prefix,
-  &.has-prefix.ebs-label__circle {
-    padding-left: rem(22.5px);
-  }
+.ebs-label.ebs-label__status--text {
+  color: $text-color;
+  border-color: $text-color;
+}
 
-  &.has-suffix,
-  &.has-suffix.ebs-label__circle {
-    padding-right: rem(27.5px);
-  }
+.ebs-label.ebs-label__status--primary {
+  background-color: $primary-000;
+  color: $primary-color;
+  border-color: $primary-color;
+}
 
-  &.is-icon {
-    @include flex-center;
-    width: $gutter-size;
-    height: $gutter-size;
-    float: left;
-    padding: 0;
-    margin-right: $gutter-size / 2;
-  }
+.ebs-label.disabled {
+  cursor: not-allowed;
+  color: $grey-500;
+  border-color: $grey-500;
+}
 
-  .ebs-label__prefix,
-  .ebs-label__suffix {
-    position: absolute;
-    top: calc(50% + 1px);
-    transform: translateY(-50%);
+.ebs-label.has-prefix,
+.ebs-label.has-prefix.ebs-label__circle {
+  padding-left: rem(22.5px);
+}
 
-    .ebs-icon__close:hover svg {
-      opacity: 0.5;
-    }
+.ebs-label.has-suffix,
+.ebs-label.has-suffix.ebs-label__circle {
+  padding-right: rem(27.5px);
+}
 
-    svg {
-      font-size: rem(12px);
-    }
-  }
+.ebs-label.is-icon {
+  @include flex-center;
+  width: $gutter-size;
+  height: $gutter-size;
+  float: left;
+  padding: 0;
+  margin-right: $gutter-size / 2;
+}
+
+.ebs-label__prefix,
+.ebs-label__suffix {
+  position: absolute;
+  top: calc(50% + 1px);
+  transform: translateY(-50%);
 
-  .ebs-label__prefix {
-    left: rem(7.5px);
+  .ebs-icon__close:hover svg {
+    opacity: 0.5;
   }
 
-  .ebs-label__suffix {
-    right: rem(7.5px);
+  svg {
+    font-size: rem(12px);
   }
 }
+
+.ebs-label__prefix {
+  left: rem(7.5px);
+}
+
+.ebs-label__suffix {
+  right: rem(7.5px);
+}
diff --git a/src/components/atoms/Radio/Radio.scss b/src/components/atoms/Radio/Radio.scss
index bdb5c4e3..7f5712b9 100644
--- a/src/components/atoms/Radio/Radio.scss
+++ b/src/components/atoms/Radio/Radio.scss
@@ -1,139 +1,133 @@
-.ebs-radio__group {
-  &.vertical {
-    display: flex;
-    flex-wrap: wrap;
+.ebs-radio__group.vertical {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.ebs-radio__group.ebs-radio__align--left {
+  .ebs-radio {
+    right: inherit;
+    left: 0;
   }
 
-  &.ebs-radio__align {
-    &--left {
-      .ebs-radio {
-        right: inherit;
-        left: 0;
-      }
+  .ebs-radio__text {
+    padding-left: rem(26px);
+  }
+}
 
-      .ebs-radio__text {
-        padding-left: rem(26px);
-      }
-    }
+.ebs-radio__group.ebs-radio__align--right {
+  .ebs-radio {
+    left: inherit;
+    right: 0;
+  }
 
-    &--right {
-      .ebs-radio {
-        left: inherit;
-        right: 0;
-      }
+  .ebs-radio__text {
+    padding-right: rem(26px);
+    width: rem(160px);
+  }
+}
 
-      .ebs-radio__text {
-        padding-right: rem(26px);
-        width: rem(160px);
-      }
-    }
+.ebs-radio__group .ebs-radio__wrapper {
+  position: relative;
+}
+
+.ebs-radio__group .ebs-radio__wrapper:not(:last-child) {
+  margin-bottom: rem(5px);
+}
+
+.ebs-radio__group .ebs-radio__wrapper.disabled {
+  .ebs-radio__input {
+    cursor: not-allowed;
   }
 
-  .ebs-radio__wrapper {
-    position: relative;
+  .ebs-radio__text {
+    color: $grey-500;
+  }
 
-    &:not(:last-child) {
-      margin-bottom: rem(5px);
-    }
+  .ebs-radio,
+  .ebs-radio__input:hover ~ .ebs-radio {
+    background-color: transparent;
 
-    &.disabled {
-      .ebs-radio__input {
-        cursor: not-allowed;
-      }
-
-      .ebs-radio__text {
-        color: $grey-500;
-      }
-
-      .ebs-radio,
-      .ebs-radio__input:hover ~ .ebs-radio {
-        background-color: transparent;
-
-        .ebs-radio__dot {
-          border: 1px solid $border-color;
-          box-shadow: none;
-          background-color: transparent;
-        }
-      }
-
-      .ebs-radio__input:checked ~ .ebs-radio,
-      .ebs-radio__input:checked:hover ~ .ebs-radio {
-        background-color: transparent;
-
-        .ebs-radio__dot {
-          border: 1px solid $grey-500;
-          box-shadow: 0px 0px 0px 3px $white inset;
-          background-color: $grey-500;
-        }
-      }
+    .ebs-radio__dot {
+      border: 1px solid $border-color;
+      box-shadow: none;
+      background-color: transparent;
     }
+  }
 
-    &.has-text .ebs-radio {
-      position: absolute;
-      top: rem(-2px);
-    }
+  .ebs-radio__input:checked ~ .ebs-radio,
+  .ebs-radio__input:checked:hover ~ .ebs-radio {
+    background-color: transparent;
 
-    .ebs-radio__input {
-      position: absolute;
-      left: 0;
-      top: 0;
-      height: 100%;
-      width: 100%;
-      opacity: 0;
-      cursor: pointer;
-
-      &:hover ~ .ebs-radio {
-        background-color: $primary-100;
-
-        .ebs-radio__dot {
-          border-color: $primary-color;
-          background-color: $primary-100;
-        }
-      }
+    .ebs-radio__dot {
+      border: 1px solid $grey-500;
+      box-shadow: 0px 0px 0px 3px $white inset;
+      background-color: $grey-500;
     }
+  }
+}
 
-    .ebs-radio__input:checked {
-      &:hover ~ .ebs-radio {
-        background-color: $primary-100;
-
-        .ebs-radio__dot {
-          border-color: $primary-color;
-          background-color: $primary-color;
-          box-shadow: 0px 0px 0px 3px $primary-100 inset;
-        }
-      }
-
-      ~ .ebs-radio .ebs-radio__dot {
-        border-color: $primary-color;
-        background-color: $primary-color;
-        box-shadow: 0px 0px 0px 3px $white inset;
-      }
-    }
+.ebs-radio__group .ebs-radio__wrapper.has-text .ebs-radio {
+  position: absolute;
+  top: rem(-2px);
+}
 
-    .ebs-radio {
-      transition: all $transition-time;
-      width: rem(20px);
-      height: rem(20px);
-      background-color: transparent;
-      pointer-events: none;
-      border-radius: 50%;
-
-      .ebs-radio__dot {
-        position: absolute;
-        left: 50%;
-        top: 50%;
-        transform: translate(-50%, -50%);
-        width: rem(16px);
-        height: rem(16px);
-        border: 1px solid $border-color;
-        border-radius: 50%;
-        background-color: transparent;
-      }
-    }
+.ebs-radio__group .ebs-radio__input {
+  position: absolute;
+  left: 0;
+  top: 0;
+  height: 100%;
+  width: 100%;
+  opacity: 0;
+  cursor: pointer;
+}
 
-    .ebs-radio__text {
-      color: $text-color;
-      font-size: rem(14px);
-    }
+.ebs-radio__group .ebs-radio__input:hover ~ .ebs-radio {
+  background-color: $primary-100;
+
+  .ebs-radio__dot {
+    border-color: $primary-color;
+    background-color: $primary-100;
   }
 }
+
+.ebs-radio__group .ebs-radio__input:checked:hover ~ .ebs-radio {
+  background-color: $primary-100;
+
+  .ebs-radio__dot {
+    border-color: $primary-color;
+    background-color: $primary-color;
+    box-shadow: 0px 0px 0px 3px $primary-100 inset;
+  }
+}
+
+.ebs-radio__group .ebs-radio__input:checked ~ .ebs-radio .ebs-radio__dot {
+  border-color: $primary-color;
+  background-color: $primary-color;
+  box-shadow: 0px 0px 0px 3px $white inset;
+}
+
+.ebs-radio__group .ebs-radio {
+  transition: all $transition-time;
+  width: rem(20px);
+  height: rem(20px);
+  background-color: transparent;
+  pointer-events: none;
+  border-radius: 50%;
+
+  .ebs-radio__dot {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    width: rem(16px);
+    height: rem(16px);
+    border: 1px solid $border-color;
+    border-radius: 50%;
+    background-color: transparent;
+  }
+}
+
+.ebs-radio__group .ebs-radio__text {
+  color: $text-color;
+  font-size: rem(14px);
+}
diff --git a/src/components/atoms/Switch/Switch.scss b/src/components/atoms/Switch/Switch.scss
index 9ddd4e23..c76eea8c 100644
--- a/src/components/atoms/Switch/Switch.scss
+++ b/src/components/atoms/Switch/Switch.scss
@@ -4,82 +4,80 @@
   width: rem(32px);
   position: relative;
   cursor: pointer;
+}
 
-  &.ebs-switch {
-    &--unchecked {
-      background-color: $border-color;
+.ebs-switch.ebs-switch--unchecked {
+  background-color: $border-color;
 
-      &:hover .ebs-switch__dot {
-        border-color: $primary-200;
-        box-shadow: 0px 0px 0px 2px $primary-color inset;
-      }
+  .ebs-switch__dot {
+    border-color: $border-color;
+    background-color: $white;
+    box-shadow: 0px 0px 0px 2px $grey-500 inset;
+  }
+}
 
-      .ebs-switch__dot {
-        border-color: $border-color;
-        background-color: $white;
-        box-shadow: 0px 0px 0px 2px $grey-500 inset;
-      }
+.ebs-switch.ebs-switch--unchecked:hover .ebs-switch__dot {
+  border-color: $primary-200;
+  box-shadow: 0px 0px 0px 2px $primary-color inset;
+}
 
-      &.disabled {
-        cursor: not-allowed;
-        background-color: $border-color;
+.ebs-switch.ebs-switch--unchecked.disabled {
+  cursor: not-allowed;
+  background-color: $border-color;
 
-        .ebs-switch__dot,
-        .ebs-switch__dot:hover {
-          background-color: $white;
-          border-color: $border-color;
-        }
-      }
-    }
+  .ebs-switch__dot,
+  .ebs-switch__dot:hover {
+    background-color: $white;
+    border-color: $border-color;
+  }
+}
 
-    &--checked {
-      background-color: $primary-200;
+.ebs-switch.ebs-switch--checked {
+  background-color: $primary-200;
 
-      &:hover .ebs-switch__dot {
-        border-color: $primary-300;
-        box-shadow: 0px 0px 0px 2px $primary-color inset;
-      }
+  .ebs-switch__dot {
+    transform: translate(16px, -50%);
+    background-color: $primary-400;
+    border-color: $primary-200;
+  }
+}
 
-      .ebs-switch__dot {
-        transform: translate(16px, -50%);
-        background-color: $primary-400;
-        border-color: $primary-200;
-      }
+.ebs-switch.ebs-switch--checked:hover .ebs-switch__dot {
+  border-color: $primary-300;
+  box-shadow: 0px 0px 0px 2px $primary-color inset;
+}
 
-      &.disabled {
-        cursor: not-allowed;
-        background-color: $primary-100;
+.ebs-switch.ebs-switch--checked.disabled {
+  cursor: not-allowed;
+  background-color: $primary-100;
 
-        .ebs-switch__dot,
-        .ebs-switch__dot:hover {
-          box-shadow: 0px 0px 0px 2px $primary-400 inset;
-          background-color: $primary-300;
-          border-color: $primary-100;
-        }
-      }
-    }
+  .ebs-switch__dot,
+  .ebs-switch__dot:hover {
+    box-shadow: 0px 0px 0px 2px $primary-400 inset;
+    background-color: $primary-300;
+    border-color: $primary-100;
   }
+}
 
-  .ebs-switch__dot {
-    position: absolute;
-    left: 0;
-    top: 50%;
-    transform: translate(0, -50%);
-    width: rem(16px);
-    height: rem(16px);
-    border: 2px solid transparent;
-    box-shadow: 0px 0px 0px 2px $primary-color inset;
-    border-radius: 50%;
-    overflow: hidden;
-    transition: all $transition-time;
-  }
+.ebs-switch__dot {
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translate(0, -50%);
+  width: rem(16px);
+  height: rem(16px);
+  border: 2px solid transparent;
+  box-shadow: 0px 0px 0px 2px $primary-color inset;
+  border-radius: 50%;
+  overflow: hidden;
+  transition: all $transition-time;
+}
 
-  .ebs-switch__checked-sheet {
-    border-radius: rem(25px);
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-  }
+.ebs-switch__checked-sheet {
+  border-radius: rem(25px);
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
 }
diff --git a/src/components/atoms/Tooltip/Tooltip.scss b/src/components/atoms/Tooltip/Tooltip.scss
index 7436f0dd..eb77b37f 100644
--- a/src/components/atoms/Tooltip/Tooltip.scss
+++ b/src/components/atoms/Tooltip/Tooltip.scss
@@ -4,48 +4,46 @@
   @include elevation-2;
   margin: rem(0 $gutter-size / 2);
   z-index: 2;
+}
 
-  &.ebs-tooltip {
-    &--top {
-      margin: rem(0 0 $gutter-size / 2);
-    }
+.ebs-tooltip__wrapper.ebs-tooltip--top {
+  margin: rem(0 0 $gutter-size / 2);
+}
 
-    &--bottom {
-      margin: rem($gutter-size / 2 0 0);
-    }
+.ebs-tooltip__wrapper.ebs-tooltip--bottom {
+  margin: rem($gutter-size / 2 0 0);
+}
 
-    &--left {
-      margin: rem(0 $gutter-size / 2 0 0);
-    }
+.ebs-tooltip__wrapper.ebs-tooltip--left {
+  margin: rem(0 $gutter-size / 2 0 0);
+}
 
-    &--right {
-      margin: rem(0 0 0 $gutter-size / 2);
-    }
-  }
+.ebs-tooltip__wrapper.ebs-tooltip--right {
+  margin: rem(0 0 0 $gutter-size / 2);
+}
 
-  .ebs-tooltip__body {
-    padding: rem($gutter-size);
-    font-size: rem($gutter-size);
-    color: $text-color;
+.ebs-tooltip__body {
+  padding: rem($gutter-size);
+  font-size: rem($gutter-size);
+  color: $text-color;
+}
 
-    .ebs-tooltip__body-title {
-      color: $heading-color;
-      font-size: $font-size-base;
-      margin-bottom: $border-radius;
-      @include fontMedium;
-    }
-  }
+.ebs-tooltip__body-title {
+  color: $heading-color;
+  font-size: $font-size-base;
+  margin-bottom: $border-radius;
+  @include fontMedium;
 }
 
 .ebs-tooltip__arrow {
   position: absolute;
   font-size: $gutter-size;
   transform: translate3d(-50%, 0, 0) rotate(180deg);
+}
 
-  path {
-    stroke: transparent;
-    fill: $white;
-  }
+.ebs-tooltip__arrow path {
+  stroke: transparent;
+  fill: $white;
 }
 
 .ebs-tooltip__arrow[data-placement*='top'] {
diff --git a/src/components/molecules/Calendar/Calendar.scss b/src/components/molecules/Calendar/Calendar.scss
index d1d9c3c1..5420edd5 100644
--- a/src/components/molecules/Calendar/Calendar.scss
+++ b/src/components/molecules/Calendar/Calendar.scss
@@ -3,13 +3,13 @@
 .picker-wrapper {
   display: flex;
   align-items: center;
+}
 
-  & > div:last-child,
-  & > div:first-child:not(:last-child),
-  & .ebs-calendar__wrapper > div:last-child,
-  & .ebs-calendar__wrapper > div:first-child:not(:last-child) {
-    margin-right: rem(10px);
-  }
+.picker-wrapper > div:last-child,
+.picker-wrapper > div:first-child:not(:last-child),
+.picker-wrapper .ebs-calendar__wrapper > div:last-child,
+.picker-wrapper .ebs-calendar__wrapper > div:first-child:not(:last-child) {
+  margin-right: rem(10px);
 }
 
 .picker-container {
@@ -21,100 +21,96 @@
   max-width: rem(600px);
   width: max-content;
   z-index: 9999;
+}
 
-  &-date {
-    transform: translate3d(0, rem(55px, 0));
-  }
+.picker-container-date {
+  transform: translate3d(0, rem(55px, 0));
 }
 
-.ebs-calendar__wrapper {
-  &.disabled .ebs-calendar__input-wrapper .ebs-calendar {
-    border-color: $grey-500;
-    background-color: $white;
-    color: $grey-500;
-    cursor: not-allowed;
+.ebs-calendar__wrapper.disabled .ebs-calendar__input-wrapper .ebs-calendar {
+  border-color: $grey-500;
+  background-color: $white;
+  color: $grey-500;
+  cursor: not-allowed;
 
-    @include placeholder {
-      color: $grey-500 !important;
-    }
+  @include placeholder {
+    color: $grey-500 !important;
   }
+}
 
-  &.active .ebs-calendar__input-wrapper .ebs-calendar {
-    border-color: $primary-color;
-    background-color: $white;
+.ebs-calendar__wrapper.active .ebs-calendar__input-wrapper .ebs-calendar {
+  border-color: $primary-color;
+  background-color: $white;
+}
+
+.ebs-calendar__wrapper.has-error .ebs-calendar__input-wrapper .ebs-calendar {
+  border-color: $danger-color;
+  background-color: $white;
+}
+
+.ebs-calendar__wrapper.ebs-calendar__type-period
+  .ebs-calendar__input-wrapper
+  .react-datepicker-wrapper:not(:first-child) {
+  .ebs-calendar {
+    border-left: inherit;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
   }
+}
 
-  &.has-error .ebs-calendar__input-wrapper .ebs-calendar {
-    border-color: $danger-color;
-    background-color: $white;
+.ebs-calendar__wrapper.ebs-calendar__type-period
+  .ebs-calendar__input-wrapper
+  .react-datepicker-wrapper:not(:last-child) {
+  .ebs-calendar {
+    padding-right: rem(10px);
+    border-right: inherit;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
   }
 
-  &.ebs-calendar__type {
-    &-period {
-      .ebs-calendar__input-wrapper .react-datepicker-wrapper {
-        &:not(:first-child) {
-          .ebs-calendar {
-            border-left: inherit;
-            border-top-left-radius: 0;
-            border-bottom-left-radius: 0;
-          }
-        }
-
-        &:not(:last-child) {
-          .ebs-calendar {
-            padding-right: rem(10px);
-            border-right: inherit;
-            border-top-right-radius: 0;
-            border-bottom-right-radius: 0;
-          }
-
-          .react-datepicker__input-container:before {
-            display: none;
-          }
-        }
-      }
-    }
+  .react-datepicker__input-container:before {
+    display: none;
   }
+}
+
+.ebs-calendar__input-wrapper {
+  display: flex;
+  width: 100%;
+  margin: 0;
+}
+
+.ebs-calendar__input-wrapper .react-datepicker-wrapper {
+  width: 100%;
+}
+
+.ebs-calendar__input-wrapper .react-datepicker__input-container {
+  position: relative;
+}
 
-  .ebs-calendar__input-wrapper {
-    display: flex;
-    width: 100%;
-    margin: 0;
-
-    .react-datepicker-wrapper {
-      width: 100%;
-    }
-
-    .react-datepicker__input-container {
-      position: relative;
-
-      &:before {
-        content: '';
-        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M12 3.33325H3.99996C3.26358 3.33325 2.66663 3.93021 2.66663 4.66659V12.6666C2.66663 13.403 3.26358 13.9999 3.99996 13.9999H12C12.7363 13.9999 13.3333 13.403 13.3333 12.6666V4.66659C13.3333 3.93021 12.7363 3.33325 12 3.33325Z' stroke='%23494F7D' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M10.6666 2V4.66667' stroke='%23494F7D' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M5.33337 2V4.66667' stroke='%23494F7D' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M2.66663 7.33325H13.3333' stroke='%23494F7D' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M7.33337 10H8.00004' stroke='%23494F7D' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8 10V12' stroke='%23494F7D' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
-        width: rem(35px);
-        height: 100%;
-        position: absolute;
-        background-repeat: no-repeat;
-        background-position: center;
-        right: 0;
-      }
-    }
-
-    .ebs-calendar {
-      width: 100%;
-      height: rem(40px);
-      border: 1px solid $border-color;
-      border-radius: rem($border-radius);
-      outline: none;
-      font-size: rem(14px);
-      padding: rem(10px);
-      padding-right: rem(35px);
-      color: $heading-color;
-
-      @include placeholder {
-        color: $text-color-secondary;
-      }
-    }
+.ebs-calendar__input-wrapper .react-datepicker__input-container:before {
+  content: '';
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M12 3.33325H3.99996C3.26358 3.33325 2.66663 3.93021 2.66663 4.66659V12.6666C2.66663 13.403 3.26358 13.9999 3.99996 13.9999H12C12.7363 13.9999 13.3333 13.403 13.3333 12.6666V4.66659C13.3333 3.93021 12.7363 3.33325 12 3.33325Z' stroke='%23494F7D' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M10.6666 2V4.66667' stroke='%23494F7D' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M5.33337 2V4.66667' stroke='%23494F7D' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M2.66663 7.33325H13.3333' stroke='%23494F7D' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M7.33337 10H8.00004' stroke='%23494F7D' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8 10V12' stroke='%23494F7D' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
+  width: rem(35px);
+  height: 100%;
+  position: absolute;
+  background-repeat: no-repeat;
+  background-position: center;
+  right: 0;
+}
+
+.ebs-calendar__input-wrapper .ebs-calendar {
+  width: 100%;
+  height: rem(40px);
+  border: 1px solid $border-color;
+  border-radius: rem($border-radius);
+  outline: none;
+  font-size: rem(14px);
+  padding: rem(10px);
+  padding-right: rem(35px);
+  color: $heading-color;
+
+  @include placeholder {
+    color: $text-color-secondary;
   }
 }
 
@@ -124,163 +120,161 @@
   * {
     outline: 0;
   }
+}
 
-  .react-datepicker {
-    border: none;
-    display: flex;
-    @include elevation-2;
-
-    &__time-list,
-    &__year-dropdown {
-      @include hiddenScroll;
-    }
-
-    &__time-list-item {
-      &:hover {
-        background-color: $primary-100 !important;
-        color: $text-color;
-      }
-
-      &--disabled {
-        display: none !important;
-      }
-
-      &--selected,
-      &--selected:hover {
-        background-color: $primary-color !important;
-        color: $white;
-      }
-    }
-
-    &__navigation {
-      content: '';
-
-      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 8 12' fill='rgb(16 77 67)' class='ebs-icon ebs-icon-size-small ebs-icon__arrow-right '%3E%3Cpath fill-rule='evenodd' d='M1.052,-0.003 C1.317,-0.003 1.581,0.098 1.783,0.300 L6.721,5.263 C7.120,5.663 7.120,6.309 6.721,6.710 L1.783,11.672 C1.382,12.074 0.731,12.077 0.328,11.677 C-0.076,11.278 -0.078,10.628 0.322,10.225 L4.541,5.986 L0.322,1.748 C-0.078,1.345 -0.076,0.695 0.328,0.295 C0.528,0.097 0.790,-0.003 1.052,-0.003 Z'%3E%3C/path%3E%3C/svg%3E");
-
-      background-size: 80%;
-      background-repeat: no-repeat;
-      background-position: center;
-      width: rem(15px);
-      height: rem(15px);
-      border: none;
-
-      &--previous {
-        transform: rotate(180deg);
-      }
-    }
-
-    // arrow
-    &__triangle {
-      display: none;
-    }
-
-    &__time-container {
-      border-color: $border-color;
-    }
-
-    &__time ul li {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-
-    &__navigation {
-      background-size: 50%;
-      padding: rem(10px);
-      top: rem(5px);
-    }
-
-    &__navigation--years {
-      top: unset;
-
-      &-upcoming {
-        transform: rotate(-90deg);
-      }
-
-      &-previous {
-        transform: rotate(90deg);
-      }
-    }
-
-    &__year-option--selected {
-      width: rem(20px);
-      border-radius: rem(100px);
-      font-size: rem(20px);
-    }
-
-    &__year-read-view--down-arrow {
-      border: none;
-      top: rem(7px);
-
-      &:before {
-        border: none;
-        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 8 12' fill='rgb(16 77 67)' class='ebs-icon ebs-icon-size-small ebs-icon__arrow-right '%3E%3Cpath fill-rule='evenodd' d='M1.052,-0.003 C1.317,-0.003 1.581,0.098 1.783,0.300 L6.721,5.263 C7.120,5.663 7.120,6.309 6.721,6.710 L1.783,11.672 C1.382,12.074 0.731,12.077 0.328,11.677 C-0.076,11.278 -0.078,10.628 0.322,10.225 L4.541,5.986 L0.322,1.748 C-0.078,1.345 -0.076,0.695 0.328,0.295 C0.528,0.097 0.790,-0.003 1.052,-0.003 Z'%3E%3C/path%3E%3C/svg%3E");
-        background-size: 50%;
-        background-repeat: no-repeat;
-        background-position: center;
-        width: rem(15px);
-        height: rem(15px);
-        left: auto;
-        top: auto;
-        bottom: auto;
-        z-index: unset;
-        transform: rotate(90deg) translate3d(-50%, 50%, 0);
-      }
-    }
-
-    &__header {
-      background: transparent;
-      border: none;
-    }
-
-    &__year-read-view {
-      padding: rem(5px 10px);
-    }
-
-    &__day-name {
-      font-weight: 600;
-      margin: 0;
-      width: rem(30px);
-      height: rem(30px);
-      display: inline-flex;
-      justify-content: center;
-      align-items: center;
-    }
-
-    &__month {
-      margin: rem(0 15px 15px);
-    }
-
-    &__day {
-      margin: 0;
-      width: rem(30px);
-      height: rem(30px);
-      display: inline-flex;
-      justify-content: center;
-      align-items: center;
-      border-radius: 0;
-      color: $text-color;
-
-      &:hover {
-        background-color: $primary-100;
-      }
-    }
-
-    &__day--in-range {
-      background-color: $primary-100;
-    }
-
-    &__day--in-selecting-range {
-      background-color: $primary-000;
-    }
-
-    &__day--selected,
-    &__day--selected:hover,
-    &__day--keyboard-selected,
-    &__day--keyboard-selected:hover {
-      border-radius: rem($border-radius);
-      background-color: $primary-color;
-      color: $white;
-    }
-  }
+.react-datepicker-popper .react-datepicker {
+  border: none;
+  display: flex;
+  @include elevation-2;
+}
+
+.react-datepicker-popper .react-datepicker__time-list,
+.react-datepicker-popper .react-datepicker__year-dropdown {
+  @include hiddenScroll;
+}
+
+.react-datepicker-popper .react-datepicker__time-list-item:hover {
+  background-color: $primary-100 !important;
+  color: $text-color;
+}
+
+.react-datepicker-popper .react-datepicker__time-list-item--disabled {
+  display: none !important;
+}
+
+.react-datepicker-popper .react-datepicker__time-list-item--selected,
+.react-datepicker-popper .react-datepicker__time-list-item--selected:hover {
+  background-color: $primary-color !important;
+  color: $white;
+}
+
+.react-datepicker-popper .react-datepicker__navigation {
+  content: '';
+
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 8 12' fill='rgb(16 77 67)' class='ebs-icon ebs-icon-size-small ebs-icon__arrow-right '%3E%3Cpath fill-rule='evenodd' d='M1.052,-0.003 C1.317,-0.003 1.581,0.098 1.783,0.300 L6.721,5.263 C7.120,5.663 7.120,6.309 6.721,6.710 L1.783,11.672 C1.382,12.074 0.731,12.077 0.328,11.677 C-0.076,11.278 -0.078,10.628 0.322,10.225 L4.541,5.986 L0.322,1.748 C-0.078,1.345 -0.076,0.695 0.328,0.295 C0.528,0.097 0.790,-0.003 1.052,-0.003 Z'%3E%3C/path%3E%3C/svg%3E");
+
+  background-size: 80%;
+  background-repeat: no-repeat;
+  background-position: center;
+  width: rem(15px);
+  height: rem(15px);
+  border: none;
+}
+
+.react-datepicker-popper .react-datepicker__navigation--previous {
+  transform: rotate(180deg);
+}
+
+// arrow
+.react-datepicker-popper .react-datepicker__triangle {
+  display: none;
+}
+
+.react-datepicker-popper .react-datepicker__time-container {
+  border-color: $border-color;
+}
+
+.react-datepicker-popper .react-datepicker__time ul li {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.react-datepicker-popper .react-datepicker__navigation {
+  background-size: 50%;
+  padding: rem(10px);
+  top: rem(5px);
+}
+
+.react-datepicker-popper .react-datepicker__navigation--years {
+  top: unset;
+}
+
+.react-datepicker-popper .react-datepicker__navigation--years-upcoming {
+  transform: rotate(-90deg);
+}
+
+.react-datepicker-popper .react-datepicker__navigation--years-previous {
+  transform: rotate(90deg);
+}
+
+.react-datepicker-popper .react-datepicker__year-option--selected {
+  width: rem(20px);
+  border-radius: rem(100px);
+  font-size: rem(20px);
+}
+
+.react-datepicker-popper .react-datepicker__year-read-view--down-arrow {
+  border: none;
+  top: rem(7px);
+}
+
+.react-datepicker-popper .react-datepicker__year-read-view--down-arrow:before {
+  border: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 8 12' fill='rgb(16 77 67)' class='ebs-icon ebs-icon-size-small ebs-icon__arrow-right '%3E%3Cpath fill-rule='evenodd' d='M1.052,-0.003 C1.317,-0.003 1.581,0.098 1.783,0.300 L6.721,5.263 C7.120,5.663 7.120,6.309 6.721,6.710 L1.783,11.672 C1.382,12.074 0.731,12.077 0.328,11.677 C-0.076,11.278 -0.078,10.628 0.322,10.225 L4.541,5.986 L0.322,1.748 C-0.078,1.345 -0.076,0.695 0.328,0.295 C0.528,0.097 0.790,-0.003 1.052,-0.003 Z'%3E%3C/path%3E%3C/svg%3E");
+  background-size: 50%;
+  background-repeat: no-repeat;
+  background-position: center;
+  width: rem(15px);
+  height: rem(15px);
+  left: auto;
+  top: auto;
+  bottom: auto;
+  z-index: unset;
+  transform: rotate(90deg) translate3d(-50%, 50%, 0);
+}
+
+.react-datepicker-popper .react-datepicker__header {
+  background: transparent;
+  border: none;
+}
+
+.react-datepicker-popper .react-datepicker__year-read-view {
+  padding: rem(5px 10px);
+}
+
+.react-datepicker-popper .react-datepicker__day-name {
+  font-weight: 600;
+  margin: 0;
+  width: rem(30px);
+  height: rem(30px);
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.react-datepicker-popper .react-datepicker__month {
+  margin: rem(0 15px 15px);
+}
+
+.react-datepicker-popper .react-datepicker__day {
+  margin: 0;
+  width: rem(30px);
+  height: rem(30px);
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 0;
+  color: $text-color;
+}
+
+.react-datepicker-popper .react-datepicker__day:hover {
+  background-color: $primary-100;
+}
+
+.react-datepicker-popper .react-datepicker__day--in-range {
+  background-color: $primary-100;
+}
+
+.react-datepicker-popper .react-datepicker__day--in-selecting-range {
+  background-color: $primary-000;
+}
+
+.react-datepicker-popper .react-datepicker__day--selected,
+.react-datepicker-popper .react-datepicker__day--selected:hover,
+.react-datepicker-popper .react-datepicker__day--keyboard-selected,
+.react-datepicker-popper .react-datepicker__day--keyboard-selected:hover {
+  border-radius: rem($border-radius);
+  background-color: $primary-color;
+  color: $white;
 }
diff --git a/src/components/molecules/Checkbox/Checkbox.scss b/src/components/molecules/Checkbox/Checkbox.scss
index e31e3b14..632dd713 100644
--- a/src/components/molecules/Checkbox/Checkbox.scss
+++ b/src/components/molecules/Checkbox/Checkbox.scss
@@ -1,181 +1,169 @@
 .ebs-checkbox__wrapper {
   position: relative;
   cursor: pointer;
+}
 
-  &.indeterminate {
-    .ebs-checkbox__input:checked ~ .ebs-checkbox {
-      .ebs-checkbox__check {
-        font-size: rem(10px);
-      }
+.ebs-checkbox__wrapper.indeterminate {
+  .ebs-checkbox__input:checked ~ .ebs-checkbox {
+    .ebs-checkbox__check {
+      font-size: rem(10px);
+    }
 
-      .ebs-checkbox__indeterminate {
-        font-size: 0;
-      }
+    .ebs-checkbox__indeterminate {
+      font-size: 0;
     }
+  }
 
-    .ebs-checkbox {
-      border-color: $primary-color;
-      background-color: $primary-color;
+  .ebs-checkbox {
+    border-color: $primary-color;
+    background-color: $primary-color;
 
-      .ebs-checkbox__check {
-        font-size: 0;
-      }
+    .ebs-checkbox__check {
+      font-size: 0;
+    }
 
-      .ebs-checkbox__indeterminate {
-        font-size: rem(10px);
-      }
+    .ebs-checkbox__indeterminate {
+      font-size: rem(10px);
     }
   }
+}
 
-  &.disabled {
-    .ebs-checkbox__input {
-      cursor: not-allowed;
-
-      &:checked,
-      &:checked:hover {
-        ~ .ebs-checkbox {
-          border-color: $grey-500;
-          background-color: $grey-500;
-
-          &:before {
-            background-color: transparent;
-          }
-        }
-      }
-    }
+.ebs-checkbox__wrapper.disabled .ebs-checkbox__input {
+  cursor: not-allowed;
+}
 
-    .ebs-checkbox,
-    .ebs-checkbox__input:hover ~ .ebs-checkbox {
-      border-color: $grey-500;
-      background-color: transparent;
+.ebs-checkbox__wrapper.disabled .ebs-checkbox__input:checked ~ .ebs-checkbox,
+.ebs-checkbox__wrapper.disabled .ebs-checkbox__input:checked:hover ~ .ebs-checkbox {
+  border-color: $grey-500;
+  background-color: $grey-500;
+}
 
-      &:before {
-        background-color: transparent;
-      }
-    }
+.ebs-checkbox__wrapper.disabled .ebs-checkbox__input:checked ~ .ebs-checkbox:before,
+.ebs-checkbox__wrapper.disabled .ebs-checkbox__input:checked:hover ~ .ebs-checkbox:before {
+  background-color: transparent;
+}
 
-    .ebs-checkbox__text {
-      color: $grey-500;
-    }
+.ebs-checkbox__wrapper.disabled .ebs-checkbox,
+.ebs-checkbox__wrapper.disabled .ebs-checkbox__input:hover ~ .ebs-checkbox {
+  border-color: $grey-500;
+  background-color: transparent;
+}
+
+.ebs-checkbox__wrapper.disabled .ebs-checkbox:before,
+.ebs-checkbox__wrapper.disabled .ebs-checkbox__input:hover ~ .ebs-checkbox:before {
+  background-color: transparent;
+}
+
+.ebs-checkbox__wrapper.disabled .ebs-checkbox__text {
+  color: $grey-500;
+}
+
+.ebs-checkbox__wrapper.has-text .ebs-checkbox {
+  position: absolute;
+  top: rem(-2px);
+}
+
+.ebs-checkbox__wrapper.ebs-checkbox__align-left .ebs-checkbox {
+  right: inherit;
+  left: 0;
+}
+
+.ebs-checkbox__wrapper.ebs-checkbox__align-left .ebs-checkbox__text {
+  padding-left: rem(26px);
+}
+
+.ebs-checkbox__wrapper.ebs-checkbox__align-right {
+  .ebs-checkbox {
+    left: inherit;
+    right: 0;
   }
 
-  &.has-text .ebs-checkbox {
-    position: absolute;
-    top: rem(-2px);
+  .ebs-checkbox__text {
+    padding-right: rem(26px);
+    width: rem(160px);
   }
+}
 
-  &.ebs-checkbox__align {
-    &-left {
-      .ebs-checkbox {
-        right: inherit;
-        left: 0;
-      }
+.ebs-checkbox__input {
+  opacity: 0;
+  position: absolute;
+  left: 0;
+  top: 0;
+  height: 100%;
+  width: 100%;
+  cursor: pointer;
+}
 
-      .ebs-checkbox__text {
-        padding-left: rem(26px);
-      }
-    }
+.ebs-checkbox__input:checked ~ .ebs-checkbox {
+  border-color: $primary-color;
+  background-color: $primary-color;
+}
 
-    &-right {
-      .ebs-checkbox {
-        left: inherit;
-        right: 0;
-      }
+.ebs-checkbox__input:checked ~ .ebs-checkbox .ebs-checkbox__check {
+  font-size: rem(10px);
+  color: $white;
+}
 
-      .ebs-checkbox__text {
-        padding-right: rem(26px);
-        width: rem(160px);
-      }
-    }
-  }
+.ebs-checkbox__input:checked .ebs-checkbox__input:hover ~ .ebs-checkbox {
+  border-color: $primary-color;
+  background-color: $primary-color;
+}
 
-  .ebs-checkbox__input {
-    opacity: 0;
-    position: absolute;
-    left: 0;
-    top: 0;
-    height: 100%;
-    width: 100%;
-    cursor: pointer;
-
-    &:checked {
-      ~ .ebs-checkbox {
-        border-color: $primary-color;
-        background-color: $primary-color;
-
-        .ebs-checkbox__check {
-          font-size: rem(10px);
-          color: $white;
-        }
-      }
-
-      &:hover {
-        ~ .ebs-checkbox {
-          border-color: $primary-color;
-          background-color: $primary-color;
-
-          &:before {
-            background-color: $primary-100;
-          }
-        }
-      }
-    }
+.ebs-checkbox__input:checked .ebs-checkbox__input:hover ~ .ebs-checkbox:before {
+  background-color: $primary-100;
+}
 
-    &:hover {
-      ~ .ebs-checkbox {
-        border-color: $primary-color;
+.ebs-checkbox__input:hover ~ .ebs-checkbox {
+  border-color: $primary-color;
+}
 
-        &:before {
-          background-color: $primary-100;
-        }
-      }
-    }
-  }
+.ebs-checkbox__input:hover ~ .ebs-checkbox:before {
+  background-color: $primary-100;
+}
 
-  .ebs-checkbox {
-    position: relative;
-    width: rem(14px);
-    height: rem(14px);
-    margin: rem(3px);
-    background-color: transparent;
-    border: 1px solid $border-color;
-    border-radius: rem($border-radius);
-    transition: all $transition-time;
-    pointer-events: none;
-
-    &:before {
-      content: ' ';
-      display: block;
-      position: absolute;
-      width: rem(20px);
-      height: rem(20px);
-      left: 50%;
-      top: 50%;
-      background-color: transparent;
-      transform: translate(-50%, -50%);
-      border-radius: rem($border-radius);
-      z-index: -1;
-    }
+.ebs-checkbox {
+  position: relative;
+  width: rem(14px);
+  height: rem(14px);
+  margin: rem(3px);
+  background-color: transparent;
+  border: 1px solid $border-color;
+  border-radius: rem($border-radius);
+  transition: all $transition-time;
+  pointer-events: none;
+}
 
-    .ebs-checkbox__check,
-    .ebs-checkbox__indeterminate {
-      position: absolute;
-      left: 50%;
-      top: 50%;
-      transform: translate(-50%, -50%);
-      font-size: 0;
-      color: $white;
-    }
+.ebs-checkbox:before {
+  content: ' ';
+  display: block;
+  position: absolute;
+  width: rem(20px);
+  height: rem(20px);
+  left: 50%;
+  top: 50%;
+  background-color: transparent;
+  transform: translate(-50%, -50%);
+  border-radius: rem($border-radius);
+  z-index: -1;
+}
 
-    .ebs-checkbox__indeterminate rect {
-      fill: $white;
-    }
-  }
+.ebs-checkbox__check,
+.ebs-checkbox__indeterminate {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  font-size: 0;
+  color: $white;
+}
 
-  .ebs-checkbox__text {
-    color: $text-color;
-    font-size: rem(14px);
-  }
+.ebs-checkbox__indeterminate rect {
+  fill: $white;
+}
+
+.ebs-checkbox__text {
+  color: $text-color;
+  font-size: rem(14px);
 }
 
 .ebs-checkbox__group {
diff --git a/src/components/molecules/InputPhone/InputPhone.scss b/src/components/molecules/InputPhone/InputPhone.scss
index 09223b8f..90611e85 100644
--- a/src/components/molecules/InputPhone/InputPhone.scss
+++ b/src/components/molecules/InputPhone/InputPhone.scss
@@ -1,78 +1,74 @@
 @import '~react-phone-input-2/lib/style.css';
 
-.ebs-input__phone-wrapper {
-  .ebs-input__phone {
-    &.active .form-control,
-    &.active .flag-dropdown {
-      border-color: $primary-color;
-      background-color: $white !important;
-      color: $heading-color;
-    }
-
-    &.disabled .form-control,
-    &.disabled .flag-dropdown {
-      border-color: $grey-500;
-      background-color: $white;
-      color: $grey-500;
-      cursor: not-allowed;
+.ebs-input__phone.active .form-control,
+.ebs-input__phone.active .flag-dropdown {
+  border-color: $primary-color;
+  background-color: $white !important;
+  color: $heading-color;
+}
 
-      @include placeholder {
-        color: $grey-500 !important;
-      }
-    }
+.ebs-input__phone.disabled .form-control,
+.ebs-input__phone.disabled .flag-dropdown {
+  border-color: $grey-500;
+  background-color: $white;
+  color: $grey-500;
+  cursor: not-allowed;
 
-    &.has-error .form-control,
-    &.has-error .flag-dropdown {
-      border-color: $danger-color;
-      background-color: $white;
-    }
+  @include placeholder {
+    color: $grey-500 !important;
+  }
+}
 
-    .form-control {
-      border-radius: rem($border-radius);
-      height: rem(40px);
+.ebs-input__phone.has-error .form-control,
+.ebs-input__phone.has-error .flag-dropdown {
+  border-color: $danger-color;
+  background-color: $white;
+}
 
-      @include placeholder {
-        color: $text-color-secondary !important;
-      }
-    }
+.ebs-input__phone .form-control {
+  border-radius: rem($border-radius);
+  height: rem(40px);
 
-    .form-control,
-    .flag-dropdown {
-      border: 1px solid $border-color;
-      background-color: $white;
-    }
+  @include placeholder {
+    color: $text-color-secondary !important;
   }
 }
 
+.ebs-input__phone .form-control,
+.ebs-input__phone .flag-dropdown {
+  border: 1px solid $border-color;
+  background-color: $white;
+}
+
 .ebs-input__phone-dropdown.country-list {
   padding: rem(4px);
   @include hiddenScroll;
   @include elevation-2;
   border-radius: rem($border-radius);
+}
 
-  .country {
-    font-size: rem(14px);
-    color: $text-color;
-    padding: rem(6px);
-    @include fontRegular;
-
-    &.highlight,
-    &:hover,
-    &[aria-selected='true'] {
-      background-color: $primary-000;
-      border-radius: rem($border-radius);
-    }
+.ebs-input__phone-dropdown.country-list .country {
+  font-size: rem(14px);
+  color: $text-color;
+  padding: rem(6px);
+  @include fontRegular;
+}
 
-    &[aria-selected='true'] {
-      color: $primary-color;
+.ebs-input__phone-dropdown.country-list .country.highlight,
+.ebs-input__phone-dropdown.country-list .country:hover,
+.ebs-input__phone-dropdown.country-list .country[aria-selected='true'] {
+  background-color: $primary-000;
+  border-radius: rem($border-radius);
+}
 
-      .dial-code {
-        color: $primary-400;
-      }
-    }
+.ebs-input__phone-dropdown.country-list .country[aria-selected='true'] {
+  color: $primary-color;
 
-    .dial-code {
-      color: $text-color-secondary;
-    }
+  .dial-code {
+    color: $primary-400;
   }
 }
+
+.ebs-input__phone-dropdown.country-list .country .dial-code {
+  color: $text-color-secondary;
+}
diff --git a/src/components/molecules/InputSearch/InputSearch.scss b/src/components/molecules/InputSearch/InputSearch.scss
index ad290047..e0ab4992 100644
--- a/src/components/molecules/InputSearch/InputSearch.scss
+++ b/src/components/molecules/InputSearch/InputSearch.scss
@@ -1,31 +1,27 @@
-.ebs-input__search-wrapper {
-  &.ebs-input__search-type {
-    &-fill {
-      .ebs-input__search,
-      .ebs-input__wrapper-active {
-        background-color: $grey-100 !important;
-      }
-    }
+.ebs-input__search-wrapper.ebs-input__search-type-fill {
+  .ebs-input__search,
+  .ebs-input__wrapper-active {
+    background-color: $grey-100 !important;
+  }
+}
 
-    &-transparent {
-      .ebs-input__search,
-      .ebs-input__wrapper-active {
-        background-color: transparent !important;
-        border-color: transparent;
-        color: $white;
+.ebs-input__search-wrapper.ebs-input__search-type-transparent {
+  .ebs-input__search,
+  .ebs-input__wrapper-active {
+    background-color: transparent !important;
+    border-color: transparent;
+    color: $white;
 
-        .ebs-input {
-          color: $white;
+    .ebs-input {
+      color: $white;
 
-          @include placeholder {
-            color: $white;
-          }
-        }
+      @include placeholder {
+        color: $white;
       }
     }
   }
+}
 
-  &.disabled .cursor {
-    cursor: not-allowed;
-  }
+.ebs-input__search-wrapper.disabled .cursor {
+  cursor: not-allowed;
 }
diff --git a/src/components/molecules/InputSelect/InputSelect.scss b/src/components/molecules/InputSelect/InputSelect.scss
index a6b3a549..1a1f60a6 100644
--- a/src/components/molecules/InputSelect/InputSelect.scss
+++ b/src/components/molecules/InputSelect/InputSelect.scss
@@ -1,96 +1,97 @@
-.ebs-select__input-wrapper {
-  &.disabled .ebs-select__input-dropdown-wrapper .ebs-select__input {
-    cursor: not-allowed;
-    border-color: $grey-500;
+.ebs-select__input-wrapper.disabled .ebs-select__input-dropdown-wrapper .ebs-select__input {
+  cursor: not-allowed;
+  border-color: $grey-500;
 
-    .ebs-select__input-value {
-      color: $grey-500;
-    }
+  .ebs-select__input-value {
+    color: $grey-500;
   }
+}
 
-  &.has-error .ebs-select__input-dropdown-wrapper .ebs-select__input {
-    border-color: $danger-color;
-    background-color: $white;
-  }
+.ebs-select__input-wrapper.has-error .ebs-select__input-dropdown-wrapper .ebs-select__input {
+  border-color: $danger-color;
+  background-color: $white;
+}
 
-  &.active .ebs-select__input-dropdown-wrapper .ebs-select__input {
-    border-color: $primary-color;
-    background-color: $white !important;
+.ebs-select__input-wrapper.active .ebs-select__input-dropdown-wrapper .ebs-select__input {
+  border-color: $primary-color;
+  background-color: $white !important;
+}
 
-    .ebs-select__input-value {
-      color: $heading-color;
-    }
-  }
+.ebs-select__input-wrapper.active .ebs-select__input-dropdown-wrapper .ebs-select__input .ebs-select__input-value {
+  color: $heading-color;
+}
 
-  &.active.ebs-select__input-mode-multiple .ebs-select__input-value {
-    padding-right: rem(75px);
-  }
+.ebs-select__input-wrapper.active.ebs-select__input-mode-multiple .ebs-select__input-value {
+  padding-right: rem(75px);
+}
 
-  .ebs-select__input-dropdown-wrapper {
-    position: relative;
+.ebs-select__input-dropdown-wrapper {
+  position: relative;
+}
 
-    .ebs-select__input {
-      cursor: pointer;
-      padding: rem(11px 10px);
-      border: 1px solid $border-color;
-      border-radius: rem($border-radius);
-      font-size: rem(14px);
+.ebs-select__input-dropdown-wrapper .ebs-select__input {
+  cursor: pointer;
+  padding: rem(11px 10px);
+  border: 1px solid $border-color;
+  border-radius: rem($border-radius);
+  font-size: rem(14px);
+}
 
-      .ebs-select__input-value {
-        color: $text-color-secondary;
-        overflow: auto hidden;
-        white-space: nowrap;
-        @include hiddenScroll;
+.ebs-select__input-dropdown-wrapper .ebs-select__input .ebs-select__input-value {
+  color: $text-color-secondary;
+  overflow: auto hidden;
+  white-space: nowrap;
+  @include hiddenScroll;
+}
 
-        .ebs-select__input-label {
-          position: relative;
-          top: rem(-1px);
-          padding-top: rem(4px);
-          padding-bottom: rem(4px);
-          font-size: rem(12px);
-          margin-bottom: 0;
+.ebs-select__input-dropdown-wrapper .ebs-select__input .ebs-select__input-value .ebs-select__input-label {
+  position: relative;
+  top: rem(-1px);
+  padding-top: rem(4px);
+  padding-bottom: rem(4px);
+  font-size: rem(12px);
+  margin-bottom: 0;
+}
 
-          &:not(:last-child) {
-            margin-right: rem(4px);
-          }
-        }
-      }
+.ebs-select__input-dropdown-wrapper
+  .ebs-select__input
+  .ebs-select__input-value
+  .ebs-select__input-label:not(:last-child) {
+  margin-right: rem(4px);
+}
 
-      .ebs-select__input-transition {
-        width: rem(90px);
-        height: calc(100% - 2px);
-        margin: 1px;
-        position: absolute;
-        right: 0;
-        top: 0;
-        border-top-right-radius: rem(4px);
-        border-bottom-right-radius: rem(4px);
-        box-shadow: inset -90px 0px 15px -12px rgba($white, 1);
-      }
+.ebs-select__input-dropdown-wrapper .ebs-select__input-transition {
+  width: rem(90px);
+  height: calc(100% - 2px);
+  margin: 1px;
+  position: absolute;
+  right: 0;
+  top: 0;
+  border-top-right-radius: rem(4px);
+  border-bottom-right-radius: rem(4px);
+  box-shadow: inset -90px 0px 15px -12px rgba($white, 1);
+}
 
-      .ebs-select__input-count {
-        position: absolute;
-        right: (35px);
-        top: 50%;
-        transform: translateY(-50%);
-        background-color: $primary-color;
-        color: $white;
-        font-size: rem(12px);
-        border-radius: rem($border-radius);
-        padding: rem(5px 8px);
-      }
+.ebs-select__input-dropdown-wrapper .ebs-select__input-count {
+  position: absolute;
+  right: (35px);
+  top: 50%;
+  transform: translateY(-50%);
+  background-color: $primary-color;
+  color: $white;
+  font-size: rem(12px);
+  border-radius: rem($border-radius);
+  padding: rem(5px 8px);
+}
 
-      .ebs-select__input-suffix {
-        position: absolute;
-        right: rem(14px);
-        top: 50%;
-        transform: translateY(-50%);
-        color: $text-color;
+.ebs-select__input-dropdown-wrapper .ebs-select__input-suffix {
+  position: absolute;
+  right: rem(14px);
+  top: 50%;
+  transform: translateY(-50%);
+  color: $text-color;
 
-        .ebs-icon {
-          font-size: rem(10px);
-        }
-      }
-    }
+  .ebs-icon {
+    font-size: rem(10px);
   }
 }
diff --git a/src/components/molecules/Loader/Loader.scss b/src/components/molecules/Loader/Loader.scss
index 940fc2d5..1dd43283 100644
--- a/src/components/molecules/Loader/Loader.scss
+++ b/src/components/molecules/Loader/Loader.scss
@@ -21,27 +21,27 @@
   color: $text-color-secondary;
   @include fontRegular;
   font-size: rem(14px);
+}
 
-  .ebs-loader__spinner {
-    position: relative;
-    top: rem(2px);
-    display: inline-block;
-    margin-right: rem(7.5px);
-  }
+.ebs-loader__inline .ebs-loader__spinner {
+  position: relative;
+  top: rem(2px);
+  display: inline-block;
+  margin-right: rem(7.5px);
 }
 
 .ebs-loader {
   position: relative;
   animation: loaderFade 0.5s forwards;
   z-index: 2;
+}
 
-  .ebs-loader__spinner {
-    position: absolute;
-    left: 50%;
-    transform: translate(-50%, -50%);
+.ebs-loader .ebs-loader__spinner {
+  position: absolute;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
 
-    &.fixed {
-      position: fixed;
-    }
-  }
+.ebs-loader .ebs-loader__spinner.fixed {
+  position: fixed;
 }
diff --git a/src/components/molecules/SelectDropdown/SelectDropdown.scss b/src/components/molecules/SelectDropdown/SelectDropdown.scss
index ad89b8b2..fe6a02a8 100644
--- a/src/components/molecules/SelectDropdown/SelectDropdown.scss
+++ b/src/components/molecules/SelectDropdown/SelectDropdown.scss
@@ -1,4 +1,6 @@
 .ebs-select__dropdown {
+  @include elevation-2;
+
   position: absolute;
   left: 0;
   top: rem(44px);
@@ -7,41 +9,34 @@
   background-color: $white;
   border: 1px solid $white;
   border-radius: rem($border-radius);
-  @include elevation-2;
-
   z-index: 999;
+}
 
-  &.ebs-select__input-mode {
-    &-multiple {
-    }
-  }
-
-  .ebs-select__dropdown-search,
-  .ebs-select__dropdown-search.ebs-input__wrapper-active {
-    margin-bottom: rem(4px);
-    border-color: $grey-100;
-    background-color: $grey-100 !important;
+.ebs-select__dropdown .ebs-select__dropdown-search,
+.ebs-select__dropdown.ebs-select__dropdown-search.ebs-input__wrapper-active {
+  margin-bottom: rem(4px);
+  border-color: $grey-100;
+  background-color: $grey-100 !important;
 
-    .ebs-input {
-      height: rem(32px);
-    }
+  .ebs-input {
+    height: rem(32px);
   }
+}
 
-  .ebs-select__dropdown-items {
-    @include greyScroll;
-    max-height: rem(174px);
-    overflow-y: auto;
+.ebs-select__dropdown .ebs-select__dropdown-items {
+  @include greyScroll;
+  max-height: rem(174px);
+  overflow-y: auto;
 
-    .ebs-select__dropdown-item:not(:last-child) {
-      margin-bottom: rem(4px);
-    }
+  .ebs-select__dropdown-item:not(:last-child) {
+    margin-bottom: rem(4px);
   }
+}
 
-  .ebs-select__dropdown--empty {
-    display: block;
-    color: $grey-500;
-    text-align: center;
-    margin: rem(5px);
-    font-size: rem(12px);
-  }
+.ebs-select__dropdown .ebs-select__dropdown--empty {
+  display: block;
+  color: $grey-500;
+  text-align: center;
+  margin: rem(5px);
+  font-size: rem(12px);
 }
diff --git a/src/components/molecules/SelectDropdown/SelectDropdownItem/SelectDropdownItem.scss b/src/components/molecules/SelectDropdown/SelectDropdownItem/SelectDropdownItem.scss
index e595a412..25f40efe 100644
--- a/src/components/molecules/SelectDropdown/SelectDropdownItem/SelectDropdownItem.scss
+++ b/src/components/molecules/SelectDropdown/SelectDropdownItem/SelectDropdownItem.scss
@@ -4,68 +4,68 @@
   border-radius: rem($border-radius);
   cursor: pointer;
   transition: all 0.3s;
+}
 
-  &.has-prefix {
-    padding-left: rem(32.5px);
-  }
+.ebs-select__dropdown-item.has-prefix {
+  padding-left: rem(32.5px);
+}
 
-  &.active {
-    color: $primary-color;
+.ebs-select__dropdown-item.active {
+  color: $primary-color;
 
-    .ebs-select__dropdown-item-text {
-      color: $primary-color;
-    }
+  .ebs-select__dropdown-item-text {
+    color: $primary-color;
   }
+}
 
-  &.selected {
-    background-color: $primary-000;
+.ebs-select__dropdown-item.selected {
+  background-color: $primary-000;
 
-    .ebs-select__dropdown-item-suffix .ebs-checkbox__wrapper .ebs-checkbox,
-    .ebs-select__dropdown-item-prefix .ebs-checkbox__wrapper .ebs-checkbox {
-      @include checkbox-hover;
-    }
+  .ebs-select__dropdown-item-suffix .ebs-checkbox__wrapper .ebs-checkbox,
+  .ebs-select__dropdown-item-prefix .ebs-checkbox__wrapper .ebs-checkbox {
+    @include checkbox-hover;
   }
+}
 
-  &:hover {
-    background-color: $primary-000;
-
-    .ebs-select__dropdown-item-text {
-      color: $primary-color;
-    }
+.ebs-select__dropdown-item:hover {
+  background-color: $primary-000;
+}
 
-    .ebs-select__dropdown-item-suffix,
-    .ebs-select__dropdown-item-prefix {
-      .ebs-checkbox__wrapper .ebs-checkbox,
-      .ebs-checkbox__wrapper .ebs-checkbox {
-        @include checkbox-hover;
-      }
+.ebs-select__dropdown-item:hover .ebs-select__dropdown-item-text {
+  color: $primary-color;
+}
 
-      .ebs-checkbox__wrapper .ebs-checkbox__input:checked ~ .ebs-checkbox,
-      .ebs-checkbox__wrapper .ebs-checkbox__input:checked ~ .ebs-checkbox {
-        @include checkbox-checked-hover;
-      }
-    }
+.ebs-select__dropdown-item:hover .ebs-select__dropdown-item-suffix,
+.ebs-select__dropdown-item:hover .ebs-select__dropdown-item-prefix {
+  .ebs-checkbox__wrapper .ebs-checkbox,
+  .ebs-checkbox__wrapper .ebs-checkbox {
+    @include checkbox-hover;
   }
 
-  .ebs-select__dropdown-item-text {
-    color: $text-color;
-    font-size: rem(14px);
-    line-height: 140%;
+  .ebs-checkbox__wrapper .ebs-checkbox__input:checked ~ .ebs-checkbox,
+  .ebs-checkbox__wrapper .ebs-checkbox__input:checked ~ .ebs-checkbox {
+    @include checkbox-checked-hover;
   }
+}
 
-  .ebs-select__dropdown-item-prefix,
-  .ebs-select__dropdown-item-suffix {
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    color: $text-color;
-  }
+.ebs-select__dropdown-item-text {
+  color: $text-color;
+  font-size: rem(14px);
+  line-height: 140%;
+}
 
-  .ebs-select__dropdown-item-prefix {
-    left: rem(10px);
-  }
+.ebs-select__dropdown-item-prefix,
+.ebs-select__dropdown-item-suffix {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  color: $text-color;
+}
 
-  .ebs-select__dropdown-item-suffix {
-    right: rem(10px);
-  }
+.ebs-select__dropdown-item-prefix {
+  left: rem(10px);
+}
+
+.ebs-select__dropdown-item-suffix {
+  right: rem(10px);
 }
diff --git a/src/components/molecules/Stepper/Stepper.scss b/src/components/molecules/Stepper/Stepper.scss
index 5283d100..9c83c2fa 100644
--- a/src/components/molecules/Stepper/Stepper.scss
+++ b/src/components/molecules/Stepper/Stepper.scss
@@ -1,176 +1,167 @@
 @import '~rc-input-number/assets/index.css';
 
-.ebs-stepper__wrapper {
-  &.left .ebs-stepper .rc__input-number-handler-wrap {
-    float: left;
-    border-left-width: 0px;
-    border-right-width: 1px;
-    border-right-style: solid;
+.ebs-stepper__wrapper.left .ebs-stepper .rc__input-number-handler-wrap {
+  float: left;
+  border-left-width: 0px;
+  border-right-width: 1px;
+  border-right-style: solid;
+}
+
+.ebs-stepper__wrapper.right .ebs-stepper .rc__input-number-handler-wrap {
+  float: right;
+  border-right-width: 0px;
+  border-left-width: 1px;
+  border-left-style: solid;
+}
+
+.ebs-stepper__wrapper.active .ebs-stepper,
+.ebs-stepper__wrapper.active .ebs-stepper:hover {
+  border-color: $primary-color;
+  background-color: $white;
+
+  .rc-input-number-handler-wrap {
+    border-color: $primary-color;
   }
 
-  &.right .ebs-stepper .rc__input-number-handler-wrap {
-    float: right;
-    border-right-width: 0px;
-    border-left-width: 1px;
-    border-left-style: solid;
+  .rc-input-number-input {
+    color: $heading-color;
   }
+}
 
-  &.active {
-    .ebs-stepper,
-    .ebs-stepper:hover {
-      border-color: $primary-color;
-      background-color: $white;
+.ebs-stepper__wrapper.has-error .ebs-stepper,
+.ebs-stepper__wrapper.has-error .rc-input-number-handler-wrap {
+  border-color: $danger-color !important;
+}
 
-      .rc-input-number-handler-wrap {
-        border-color: $primary-color;
-      }
+.ebs-stepper__wrapper.has-error .ebs-stepper__extra {
+  color: $danger-color;
+}
 
-      .rc-input-number-input {
-        color: $heading-color;
-      }
-    }
-  }
+.ebs-stepper__wrapper.disabled .ebs-stepper__label {
+  color: $grey-500;
+}
 
-  &.has-error {
-    .ebs-stepper,
-    .rc-input-number-handler-wrap {
-      border-color: $danger-color !important;
-    }
+.ebs-stepper__wrapper.disabled .ebs-stepper,
+.ebs-stepper__wrapper.disabled .ebs-stepper:hover {
+  border-color: $grey-500;
 
-    .ebs-stepper__extra {
-      color: $danger-color;
-    }
-  }
+  &.rc-input-number-disabled .rc-input-number-input {
+    background-color: $white;
 
-  &.disabled {
-    .ebs-stepper__label,
-    .ebs-stepper__label {
+    @include placeholder {
       color: $grey-500;
     }
+  }
+
+  .rc-input-number-handler-wrap,
+  .rc-input-number-handler-wrap:hover {
+    border-color: $grey-500;
+    color: $grey-500;
+  }
+}
 
-    .ebs-stepper,
-    .ebs-stepper:hover {
-      border-color: $grey-500;
+.ebs-stepper__wrapper .ebs-stepper {
+  width: 100%;
+  height: rem(40px);
+  border: 1px solid $border-color;
+  background-color: $white;
+  border-radius: rem($border-radius);
+}
 
-      &.rc-input-number-disabled .rc-input-number-input {
-        background-color: $white;
+.ebs-stepper__wrapper .ebs-stepper:focus,
+.ebs-stepper__wrapper .ebs-stepper:hover,
+.ebs-stepper__wrapper .ebs-stepper.rc-input-number-focused {
+  box-shadow: inherit;
+  outline: none !important;
+}
 
-        @include placeholder {
-          color: $grey-500;
-        }
-      }
+.ebs-stepper__wrapper .ebs-stepper:hover {
+  border-color: $border-color;
 
-      .rc-input-number-handler-wrap,
-      .rc-input-number-handler-wrap:hover {
-        border-color: $grey-500;
-        color: $grey-500;
-      }
-    }
+  .rc-input-number-handler-wrap {
+    border-color: $border-color;
   }
+}
 
-  .ebs-stepper {
-    width: 100%;
-    height: rem(40px);
-    border: 1px solid $border-color;
-    background-color: $white;
-    border-radius: rem($border-radius);
+.ebs-stepper__wrapper .ebs-stepper.rc-input-number-focused {
+  border-color: $primary-color;
+  background-color: $white;
 
-    &:focus,
-    &:hover,
-    &.rc-input-number-focused {
-      box-shadow: inherit;
-      outline: none !important;
-    }
-
-    &:hover {
-      border-color: $border-color;
+  .rc-input-number-handler-wrap {
+    border-color: $primary-color;
+  }
 
-      .rc-input-number-handler-wrap {
-        border-color: $border-color;
-      }
-    }
+  .rc-input-number-input {
+    color: $heading-color;
+  }
+}
 
-    &.rc-input-number-focused {
-      border-color: $primary-color;
-      background-color: $white;
+.ebs-stepper__wrapper .ebs-stepper .rc-input-number-handler-wrap {
+  border-color: $border-color;
+  width: rem(30px);
+}
 
-      .rc-input-number-handler-wrap {
-        border-color: $primary-color;
-      }
+.ebs-stepper__wrapper .ebs-stepper .rc-input-number-handler {
+  height: 50%;
+  width: 100%;
+}
 
-      .rc-input-number-input {
-        color: $heading-color;
-      }
-    }
+.ebs-stepper__wrapper .ebs-stepper .rc-input-number-handler > * {
+  font-size: rem(8px);
+}
 
-    .rc-input-number-handler-wrap {
-      border-color: $border-color;
-      width: rem(30px);
-    }
+.ebs-stepper__wrapper .ebs-stepper .rc-input-number-handler.rc-input-number-handler-up,
+.ebs-stepper__wrapper .ebs-stepper .rc-input-number-handler.rc-input-number-handler-down {
+  position: relative;
 
-    .rc-input-number-handler {
-      height: 50%;
-      width: 100%;
-
-      > * {
-        font-size: rem(8px);
-      }
-
-      &.rc-input-number-handler-up,
-      &.rc-input-number-handler-down {
-        position: relative;
-
-        .ebs-icon {
-          position: absolute;
-          left: 50%;
-          transform: translateX(-50%);
-          color: $text-color;
-        }
-      }
-
-      &.rc-input-number-handler-up {
-        border-bottom-color: transparent;
-
-        .ebs-icon {
-          bottom: rem(2px);
-        }
-      }
-
-      &.rc-input-number-handler-down {
-        border-bottom-color: transparent;
-
-        .ebs-icon {
-          top: rem(2px);
-          transform: translateX(-50%) rotate(180deg);
-        }
-      }
-    }
+  .ebs-icon {
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    color: $text-color;
+  }
+}
 
-    .rc-input-number-input-wrap .rc-input-number-input {
-      padding: rem(10px);
-      text-align: left;
-      color: $heading-color;
-      font-size: rem(14px);
+.ebs-stepper__wrapper .ebs-stepper .rc-input-number-handler.rc-input-number-handler-up {
+  border-bottom-color: transparent;
 
-      @include placeholder {
-        color: $text-color-secondary !important;
-      }
-    }
+  .ebs-icon {
+    bottom: rem(2px);
   }
+}
 
-  // Label
-  .ebs-stepper__label {
-    margin-bottom: rem(5px);
-    color: $text-color;
-    @include fontRegular;
-    font-size: rem(12px);
+.ebs-stepper__wrapper .ebs-stepper .rc-input-number-handler.rc-input-number-handler-down {
+  border-bottom-color: transparent;
+
+  .ebs-icon {
+    top: rem(2px);
+    transform: translateX(-50%) rotate(180deg);
   }
+}
+
+.ebs-stepper__wrapper .ebs-stepper .rc-input-number-input-wrap .rc-input-number-input {
+  padding: rem(10px);
+  text-align: left;
+  color: $heading-color;
+  font-size: rem(14px);
 
-  // Extra
-  .ebs-stepper__extra {
-    margin-top: rem(2.5px);
-    color: $text-color-secondary;
-    @include fontRegular;
-    font-size: rem(10px);
+  @include placeholder {
+    color: $text-color-secondary !important;
   }
 }
+
+// Label
+.ebs-stepper__wrapper .ebs-stepper__label {
+  margin-bottom: rem(5px);
+  color: $text-color;
+  @include fontRegular;
+  font-size: rem(12px);
+}
+
+// Extra
+.ebs-stepper__wrapper .ebs-stepper__extra {
+  margin-top: rem(2.5px);
+  color: $text-color-secondary;
+  @include fontRegular;
+  font-size: rem(10px);
+}
diff --git a/src/components/molecules/Textarea/Textarea.scss b/src/components/molecules/Textarea/Textarea.scss
index e1ef09b9..105e2140 100644
--- a/src/components/molecules/Textarea/Textarea.scss
+++ b/src/components/molecules/Textarea/Textarea.scss
@@ -1,59 +1,59 @@
-.ebs-textarea__wrapper {
-  .ebs-textarea {
-    width: 100%;
-    border: 1px solid $border-color;
-    min-height: rem(80px);
-    outline: none;
-    border-radius: rem($border-radius);
-    background-color: $white;
-    color: $heading-color;
-
-    @include fontRegular;
-    font-size: rem(14px);
-    padding: rem(10px);
-
-    @include placeholder {
-      color: $text-color-secondary;
-    }
-
-    &.has-value {
-      border-color: $primary-color;
-    }
-
-    &.has-error {
-      border-color: $danger-color;
-    }
-
-    &.disabled {
-      border-color: $grey-500;
-    }
+.ebs-textarea {
+  width: 100%;
+  border: 1px solid $border-color;
+  min-height: rem(80px);
+  outline: none;
+  border-radius: rem($border-radius);
+  background-color: $white;
+  color: $heading-color;
+
+  @include fontRegular;
+  font-size: rem(14px);
+  padding: rem(10px);
+
+  @include placeholder {
+    color: $text-color-secondary;
   }
+}
 
-  // Label
-  .ebs-textarea__label {
-    margin-bottom: rem(5px);
-    color: $text-color;
-    @include fontRegular;
-    font-size: rem(12px);
+.ebs-textarea.has-value {
+  border-color: $primary-color;
+}
 
-    &.disabled {
-      color: $grey-500;
-    }
-  }
+.ebs-textarea.has-error {
+  border-color: $danger-color;
+}
 
-  // Extra
-  .ebs-textarea__extra {
-    margin-top: rem(2.5px);
-    color: $text-color-secondary;
-    @include fontRegular;
-    font-size: rem(10px);
+.ebs-textarea.disabled {
+  border-color: $grey-500;
+}
 
-    &.has-error {
-      color: $danger-color;
-    }
+// Label
+.ebs-textarea__label {
+  @include fontRegular;
 
-    &.disabled {
-      color: $grey-500;
-    }
-  }
+  color: $text-color;
+  margin-bottom: rem(5px);
+  font-size: rem(12px);
+}
+
+.ebs-textarea__label.disabled {
+  color: $grey-500;
+}
+
+// Extra
+.ebs-textarea__extra {
+  @include fontRegular;
+
+  color: $text-color-secondary;
+  margin-top: rem(2.5px);
+  font-size: rem(10px);
+}
+
+.ebs-textarea__extra.has-error {
+  color: $danger-color;
+}
+
+.ebs-textarea__extra.disabled {
+  color: $grey-500;
 }
diff --git a/src/components/organisms/Actions/Actions.scss b/src/components/organisms/Actions/Actions.scss
index c6004ca9..e43d2309 100644
--- a/src/components/organisms/Actions/Actions.scss
+++ b/src/components/organisms/Actions/Actions.scss
@@ -5,45 +5,43 @@
 .ebs-action__tooltip {
   min-width: rem($actions-tooltip-min-width);
   padding: rem($actions-tooltip-padding) !important;
+}
 
-  .ebs-action__tooltip-title {
-    @include fontMedium;
-    font-size: rem($actions-tooltip-title-font-size);
-    padding: rem($actions-tooltip-title-padding);
-    border-bottom: $actions-border;
-    color: $actions-tooltip-title-color;
-  }
+.ebs-action__tooltip-title {
+  @include fontMedium;
+  font-size: rem($actions-tooltip-title-font-size);
+  padding: rem($actions-tooltip-title-padding);
+  border-bottom: $actions-border;
+  color: $actions-tooltip-title-color;
+}
 
-  .ebs-action__tooltip-items {
-    .ebs-action__tooltip-item {
-      position: relative;
-      // display: inline-block;
-      padding: rem($actions-tooltip-item-padding);
-      font-size: rem($actions-tooltip-item-font-size);
-      @include fontMedium;
-      cursor: pointer;
-      transition: $transition-time;
+.ebs-action__tooltip-item {
+  position: relative;
+  // display: inline-block;
+  padding: rem($actions-tooltip-item-padding);
+  font-size: rem($actions-tooltip-item-font-size);
+  @include fontMedium;
+  cursor: pointer;
+  transition: $transition-time;
+}
 
-      .loader-display {
-        display: inline-block;
-        margin-right: rem($gutter-size / 2);
-        vertical-align: middle;
-      }
+.ebs-action__tooltip-item .loader-display {
+  display: inline-block;
+  margin-right: rem($gutter-size / 2);
+  vertical-align: middle;
+}
 
-      &:hover {
-        background-color: $background-content;
-        color: $link-hover-color;
-      }
-    }
-  }
+.ebs-action__tooltip-item:hover {
+  background-color: $background-content;
+  color: $link-hover-color;
 }
 
 .ebs-action__tooltip-icon {
   cursor: pointer;
   display: block;
   color: $text-color;
+}
 
-  &:hover {
-    color: $primary-color;
-  }
+.ebs-action__tooltip-icon:hover {
+  color: $primary-color;
 }
diff --git a/src/components/organisms/Form/Form.scss b/src/components/organisms/Form/Form.scss
index 67183205..c2106199 100644
--- a/src/components/organisms/Form/Form.scss
+++ b/src/components/organisms/Form/Form.scss
@@ -1,72 +1,66 @@
-.ebs-form {
-  &.ebs-form__inline {
-    .ebs-form__item {
-      display: flex;
-      align-items: center;
-
-      &:not(:last-child) {
-        margin-bottom: rem(25px);
-      }
+.ebs-form__inline .ebs-form__item {
+  display: flex;
+  align-items: center;
+}
 
-      .ebs-label {
-        text-align: right;
-        max-width: rem(125px);
-        width: 100%;
-        margin: rem(0 10px 0 0);
-      }
+.ebs-form__inline .ebs-form__item:not(:last-child) {
+  margin-bottom: rem(25px);
+}
 
-      .ebs-form__children {
-        width: 100%;
-      }
+.ebs-form__inline .ebs-form__item .ebs-label {
+  text-align: right;
+  max-width: rem(125px);
+  width: 100%;
+  margin: rem(0 10px 0 0);
+}
 
-      .ebs-extra {
-        text-align: right;
-        position: absolute;
-        bottom: rem(-12.5px);
-        width: 100%;
-      }
-    }
-  }
+.ebs-form__inline .ebs-form__item .ebs-form__children {
+  width: 100%;
+}
 
-  .ebs-form__items {
-    display: flex;
-    justify-content: space-between;
+.ebs-form__inline .ebs-form__item .ebs-extra {
+  text-align: right;
+  position: absolute;
+  bottom: rem(-12.5px);
+  width: 100%;
+}
 
-    @include mq($until: small-desktop) {
-      display: block;
-    }
+.ebs-form__items {
+  display: flex;
+  justify-content: space-between;
 
-    &:not(:last-child) {
-      margin-bottom: rem(20px);
-    }
+  @include mq($until: small-desktop) {
+    display: block;
+  }
+}
 
-    &.ebs-form__items-three {
-      .ebs-form__item {
-        width: calc(33% - 7.5px);
-      }
-    }
+.ebs-form__items:not(:last-child) {
+  margin-bottom: rem(20px);
+}
 
-    .ebs-form__item {
-      @include mq($from: small-desktop) {
-        margin-bottom: 0 !important;
+.ebs-form__items.ebs-form__items-three .ebs-form__item {
+  width: calc(33% - 7.5px);
+}
 
-        &:not(:first-child) {
-          margin-left: rem(12.5px);
-        }
-      }
+.ebs-form__items .ebs-form__item {
+  @include mq($from: small-desktop) {
+    margin-bottom: 0 !important;
 
-      @include mq($until: small-desktop) {
-        width: 100% !important;
-      }
+    &:not(:first-child) {
+      margin-left: rem(12.5px);
     }
   }
 
-  .ebs-form__item {
-    position: relative;
-    width: 100%;
-
-    &:not(:last-child) {
-      margin-bottom: rem(20px);
-    }
+  @include mq($until: small-desktop) {
+    width: 100% !important;
   }
 }
+
+.ebs-form__item {
+  position: relative;
+  width: 100%;
+}
+
+.ebs-form__item:not(:last-child) {
+  margin-bottom: rem(20px);
+}
diff --git a/src/components/organisms/Layout/Layout.scss b/src/components/organisms/Layout/Layout.scss
index 7be44d81..e6f25952 100644
--- a/src/components/organisms/Layout/Layout.scss
+++ b/src/components/organisms/Layout/Layout.scss
@@ -1,52 +1,4 @@
 .ebs-layout {
-  &.ebs-layout__sidebar {
-    &--untoggled {
-      &.has-options {
-        @media (min-width: 54.84714em) {
-          .ebs-layout__content-wrapper,
-          .ebs-layout__footer {
-            width: calc(100% - 27.3936rem) !important;
-          }
-        }
-
-        @media (max-width: 54.84714em) {
-          .ebs-sidebar.ebs-sidebar__mobile--closed {
-            transform: translateX(-200%);
-          }
-        }
-      }
-    }
-
-    &--toggled {
-      &.has-options {
-        @media (min-width: 54.84714em) {
-          .ebs-layout__content-wrapper,
-          .ebs-layout__footer {
-            width: calc(100% - 17.75772rem) !important;
-          }
-        }
-
-        .ebs-sidebar__options > .ebs-sidebar__item {
-          border-right: none;
-        }
-
-        @media (max-width: 54.84714em) {
-          .ebs-sidebar.ebs-sidebar__mobile--closed {
-            transform: translateX(-500%);
-          }
-        }
-      }
-
-      @media (min-width: 54.84714em) {
-        .ebs-layout__content-wrapper,
-        .ebs-layout__footer {
-          // 57px
-          width: calc(100% - 3.95224rem) !important;
-        }
-      }
-    }
-  }
-
   @include mq($until: small-desktop) {
     .ebs-layout__content-wrapper,
     .ebs-layout__footer {
@@ -86,153 +38,198 @@
       display: none;
     }
   }
+}
 
-  .ebs-layout__top-bar,
-  .ebs-layout__footer {
-    background-color: $layout-footer-background;
-
-    &-top,
-    &-bottom {
-      user-select: none;
+.ebs-layout.ebs-layout__sidebar--untoggled.has-options {
+  @media (min-width: 54.84714em) {
+    .ebs-layout__content-wrapper,
+    .ebs-layout__footer {
+      width: calc(100% - 27.3936rem) !important;
     }
   }
 
-  .ebs-layout__top-bar {
-    height: $layout-top-bar-height;
-    display: flex;
-    align-items: center;
-    transition: width $transition-time;
-    width: 100%;
-    padding: rem($gutter-size 24px);
-    border-bottom: $layout-top-bar-border-color;
-    background-color: $layout-top-bar-background;
-
-    &.fixed {
-      position: fixed;
-      right: 0;
-      top: 0;
-      z-index: 3;
-
-      &.fixed + .ebs-sidebar + .ebs-layout__content-wrapper {
-        padding-top: $layout-top-bar-height;
-      }
+  @media (max-width: 54.84714em) {
+    .ebs-sidebar.ebs-sidebar__mobile--closed {
+      transform: translateX(-200%);
     }
+  }
+}
 
-    .ebs-layout__top-bar-mobile {
-      display: none;
+.ebs-layout.ebs-layout__sidebar--toggled {
+  @media (min-width: 54.84714em) {
+    .ebs-layout__content-wrapper,
+    .ebs-layout__footer {
+      // 57px
+      width: calc(100% - 3.95224rem) !important;
     }
+  }
+}
 
-    .ebs-layout__top-bar-title {
-      cursor: pointer;
-      font-size: rem(14px);
-      @include fontBold;
-      min-width: $sidebar-width - $gutter-size;
+.ebs-layout.ebs-layout__sidebar--toggled.has-options .ebs-sidebar__options > .ebs-sidebar__item {
+  border-right: none;
+}
 
-      > svg:first-child {
-        font-size: $sidebar-logo-width;
-      }
+.ebs-layout.ebs-layout__sidebar--toggled.has-options {
+  @media (min-width: 54.84714em) {
+    .ebs-layout__content-wrapper,
+    .ebs-layout__footer {
+      width: calc(100% - 17.75772rem) !important;
+    }
+  }
 
-      img {
-        max-width: $sidebar-logo-width;
-      }
+  @media (max-width: 54.84714em) {
+    .ebs-sidebar.ebs-sidebar__mobile--closed {
+      transform: translateX(-500%);
     }
+  }
+}
 
-    .ebs-layout__top-bar-left {
-      width: 100%;
+.ebs-layout__top-bar,
+.ebs-layout__footer {
+  background-color: $layout-footer-background;
+}
 
-      ~ .ebs-layout__top-bar-title {
-        width: auto;
-      }
-    }
+.ebs-layout__top-bar-top,
+.ebs-layout__top-bar-bottom,
+.ebs-layout__footer-bar-top,
+.ebs-layout__footer-bar-bottom {
+  user-select: none;
+}
 
-    .ebs-layout__top-bar-left,
-    .ebs-layout__top-bar-right {
-      display: flex;
-      align-items: center;
-      white-space: nowrap;
-    }
+.ebs-layout__top-bar {
+  height: $layout-top-bar-height;
+  display: flex;
+  align-items: center;
+  transition: width $transition-time;
+  width: 100%;
+  padding: rem($gutter-size 24px);
+  border-bottom: $layout-top-bar-border-color;
+  background-color: $layout-top-bar-background;
+}
 
-    .ebs-layout__top-bar-left {
-      margin-left: $layout-top-bar-side-left-magin-left;
-    }
+.ebs-layout__top-bar.fixed {
+  position: fixed;
+  right: 0;
+  top: 0;
+  z-index: 3;
+}
 
-    .ebs-layout__top-bar-right {
-      margin-left: $layout-top-bar-side-right-magin-left;
-      width: 100%;
-      justify-content: flex-end;
-    }
+.ebs-layout__top-bar.fixed + .ebs-sidebar + .ebs-layout__content-wrapper {
+  padding-top: $layout-top-bar-height;
+}
 
-    .ebs-layout__top-bar-right > *:not(:first-child) {
-      margin-left: $gutter-size * 2;
-    }
+.ebs-layout__top-bar-mobile {
+  display: none;
+}
 
-    .ebs-layout__top-bar-right-item {
-      display: flex;
-      align-items: center;
-      margin-left: $gutter-size;
+.ebs-layout__top-bar-title {
+  cursor: pointer;
+  font-size: rem(14px);
+  @include fontBold;
+  min-width: $sidebar-width - $gutter-size;
+}
 
-      > *:not(:first-child) {
-        margin-left: $gutter-size;
-      }
-    }
-  }
+.ebs-layout__top-bar-title > svg:first-child {
+  font-size: $sidebar-logo-width;
+}
 
-  .ebs-sidebar {
-    margin-top: $layout-top-bar-height;
-    height: calc(100vh - #{$layout-top-bar-height});
+.ebs-layout__top-bar-title img {
+  max-width: $sidebar-logo-width;
+}
 
-    @include mq($until: small-desktop) {
-      margin-top: 0;
-      height: 100vh;
-    }
-  }
+.ebs-layout__top-bar-left {
+  width: 100%;
+}
 
-  .ebs-layout__content-wrapper,
-  .ebs-layout__footer {
-    transition: width $transition-time;
-    margin-left: auto;
+.ebs-layout__top-bar-left ~ .ebs-layout__top-bar-title {
+  width: auto;
+}
 
-    // 191px
-    width: calc(100% - #{$sidebar-width});
-  }
+.ebs-layout__top-bar-left,
+.ebs-layout__top-bar-right {
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+}
 
-  .ebs-layout__content-wrapper {
-    position: relative;
+.ebs-layout__top-bar-left {
+  margin-left: $layout-top-bar-side-left-magin-left;
+}
 
-    .ebs-layout__content {
-      width: 100%;
-      height: calc(100vh - #{$layout-top-bar-height} - #{$layout-footer-height});
-      overflow: hidden auto;
-      margin: 0 auto;
-      padding: rem(15px 25px);
+.ebs-layout__top-bar-right {
+  margin-left: $layout-top-bar-side-right-magin-left;
+  width: 100%;
+  justify-content: flex-end;
+}
 
-      .ebs-breadcrumbs__wrapper {
-        margin-bottom: rem(20px);
-      }
+.ebs-layout__top-bar-right > *:not(:first-child) {
+  margin-left: $gutter-size * 2;
+}
 
-      & .ebs-breadcrumbs__wrapper + .ebs-card {
-        .ebs-card__header {
-          padding-top: 0;
-        }
-      }
-    }
-  }
+.ebs-layout__top-bar-right-item {
+  display: flex;
+  align-items: center;
+  margin-left: $gutter-size;
+}
 
-  .ebs-layout__footer {
-    height: $layout-footer-height;
-    display: flex;
-    align-items: center;
-    color: $grey-300;
+.ebs-layout__top-bar-right-item > *:not(:first-child) {
+  margin-left: $gutter-size;
+}
+//
 
-    span {
-      @include fontRegular;
-      display: block;
-      margin: 0 auto;
-    }
-  }
+.ebs-layout .ebs-sidebar {
+  margin-top: $layout-top-bar-height;
+  height: calc(100vh - #{$layout-top-bar-height});
 
-  .ebs-sidebar.ebs-sidebar--toggled .ebs-label {
-    @include text-ellipsis;
-    padding: 0 $gutter-size / 3;
+  @include mq($until: small-desktop) {
+    margin-top: 0;
+    height: 100vh;
   }
 }
+
+.ebs-layout .ebs-sidebar.ebs-sidebar--toggled .ebs-label {
+  @include text-ellipsis;
+  padding: 0 $gutter-size / 3;
+}
+
+.ebs-layout__content-wrapper,
+.ebs-layout__footer {
+  transition: width $transition-time;
+  margin-left: auto;
+
+  // 191px
+  width: calc(100% - #{$sidebar-width});
+}
+
+.ebs-layout__content-wrapper {
+  position: relative;
+}
+
+.ebs-layout__content {
+  width: 100%;
+  height: calc(100vh - #{$layout-top-bar-height} - #{$layout-footer-height});
+  overflow: hidden auto;
+  margin: 0 auto;
+  padding: rem(15px 25px);
+}
+
+.ebs-layout__content .ebs-breadcrumbs__wrapper {
+  margin-bottom: rem(20px);
+}
+
+.ebs-layout__content .ebs-breadcrumbs__wrapper + .ebs-card .ebs-card__header {
+  padding-top: 0;
+}
+
+.ebs-layout__footer {
+  height: $layout-footer-height;
+  display: flex;
+  align-items: center;
+  color: $grey-300;
+}
+
+.ebs-layout__footer span {
+  @include fontRegular;
+  display: block;
+  margin: 0 auto;
+}
diff --git a/src/components/organisms/Modal/Modal.scss b/src/components/organisms/Modal/Modal.scss
index 3d064bce..098006ab 100644
--- a/src/components/organisms/Modal/Modal.scss
+++ b/src/components/organisms/Modal/Modal.scss
@@ -27,123 +27,109 @@
   overflow: auto;
   outline: 0;
   z-index: 9998;
+}
 
-  .ebs-modal {
-    @include elevation-4;
-    position: relative;
-    margin: rem(150px auto $gutter-size);
-    border: 1px solid $border-color;
-    border-radius: rem($border-radius);
-    background-color: $background-content;
-    animation: 250ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s 1 normal forwards running fadeModal;
-
-    &.ebs-modal__size {
-      &--small {
-        width: 100%;
-        max-width: rem(550px);
-      }
-
-      &--regular {
-        width: 100%;
-        max-width: rem(760px);
-      }
-
-      &--large {
-        width: 100%;
-        max-width: rem(960px);
-      }
-    }
-
-    .ebs-modal__content {
-      padding: rem($gutter-size);
-    }
-
-    &.hide-header .ebs-modal__content {
-      padding: rem($gutter-size * 2);
-    }
-
-    .ebs-modal__header {
-      position: relative;
-      padding: rem($gutter-size);
-      border-bottom: 1px solid $border-color;
-      background-color: $white;
-
-      &--close {
-        position: absolute;
-        top: 50%;
-        right: rem($gutter-size);
-        transform: translate3d(0, -50%, 0);
-        border-radius: rem($border-radius);
-        color: $black;
-
-        &--center {
-          @include flex-center;
-        }
-
-        &--space-between {
-          @include flex-center-between;
-        }
-      }
-
-      .ebs-modal__title {
-        font-size: rem(14px);
-        @include fontMedium;
-        margin: 0;
-        padding: 0;
-      }
-    }
-
-    .ebs-modal__footer {
-      padding: rem($gutter-size);
-      border-top: 1px solid $border-color;
-      background-color: $white;
-
-      &__button {
-        display: flex;
-        justify-content: space-between;
-      }
-
-      .ebs-modal__footer__button {
-        > div:not(:first-child) {
-          margin-left: rem($gutter-size);
-
-          > div:not(:first-child) {
-            margin-left: rem($gutter-size);
-          }
-        }
-
-        &.ebs-modal__footer__button {
-          &--flex {
-            display: flex;
-            align-items: center;
-
-            > * {
-              display: block;
-              white-space: nowrap;
-
-              > *:not(:first-child) {
-                margin-left: rem($gutter-size);
-              }
-
-              &:first-child {
-                width: 100%;
-              }
-
-              &:last-child {
-                width: auto;
-              }
-            }
-          }
-
-          &--center {
-            text-align: center;
-
-            .ebs-button__wrapper:last__child {
-              margin-left: rem($gutter-size);
-            }
-          }
-        }
-      }
-    }
-  }
+.ebs-modal {
+  @include elevation-4;
+  position: relative;
+  margin: rem(150px auto $gutter-size);
+  border: 1px solid $border-color;
+  border-radius: rem($border-radius);
+  background-color: $background-content;
+  animation: 250ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s 1 normal forwards running fadeModal;
+}
+
+.ebs-modal.ebs-modal__size--small {
+  width: 100%;
+  max-width: rem(550px);
+}
+
+.ebs-modal.ebs-modal__size--regular {
+  width: 100%;
+  max-width: rem(760px);
+}
+
+.ebs-modal.ebs-modal__size--large {
+  width: 100%;
+  max-width: rem(960px);
+}
+
+.ebs-modal__content {
+  padding: rem($gutter-size);
+}
+
+.ebs-modal.hide-header .ebs-modal__content {
+  padding: rem($gutter-size * 2);
+}
+
+.ebs-modal__header {
+  position: relative;
+  padding: rem($gutter-size);
+  border-bottom: 1px solid $border-color;
+  background-color: $white;
+}
+
+.ebs-modal__header--close {
+  position: absolute;
+  top: 50%;
+  right: rem($gutter-size);
+  transform: translate3d(0, -50%, 0);
+  border-radius: rem($border-radius);
+  color: $black;
+}
+
+.ebs-modal__title {
+  font-size: rem(14px);
+  @include fontMedium;
+  margin: 0;
+  padding: 0;
+}
+
+.ebs-modal__footer {
+  padding: rem($gutter-size);
+  border-top: 1px solid $border-color;
+  background-color: $white;
+}
+
+.ebs-modal__footer__button {
+  display: flex;
+  justify-content: space-between;
+}
+
+.ebs-modal__footer__button > div:not(:first-child) {
+  margin-left: rem($gutter-size);
+}
+
+.ebs-modal__footer__button > div:not(:first-child) > div:not(:first-child) {
+  margin-left: rem($gutter-size);
+}
+
+.ebs-modal__footer__button.ebs-modal__footer__button--flex {
+  display: flex;
+  align-items: center;
+}
+
+.ebs-modal__footer__button.ebs-modal__footer__button--flex > * {
+  display: block;
+  white-space: nowrap;
+}
+
+.ebs-modal__footer__button.ebs-modal__footer__button--flex > * > *:not(:first-child) {
+  margin-left: rem($gutter-size);
+}
+
+.ebs-modal__footer__button.ebs-modal__footer__button--flex > *:first-child {
+  width: 100%;
+}
+
+.ebs-modal__footer__button.ebs-modal__footer__button--flex > *:last-child {
+  width: auto;
+}
+
+.ebs-modal__footer__button.ebs-modal__footer__button--center {
+  text-align: center;
+}
+
+.ebs-modal__footer__button.ebs-modal__footer__button--center .ebs-button__wrapper:last__child {
+  margin-left: rem($gutter-size);
 }
diff --git a/src/components/organisms/Sidebar/Item/Item.scss b/src/components/organisms/Sidebar/Item/Item.scss
index 3474eb6d..3ca8290b 100644
--- a/src/components/organisms/Sidebar/Item/Item.scss
+++ b/src/components/organisms/Sidebar/Item/Item.scss
@@ -9,90 +9,90 @@
   overflow: hidden;
   text-overflow: ellipsis;
   max-height: rem(44px);
+}
 
-  &.ebs-sidebar__toggler {
-    margin-bottom: rem(10px);
+.ebs-sidebar__item.ebs-sidebar__toggler {
+  margin-bottom: rem(10px);
 
-    @include mq($until: small-desktop) {
-      display: none !important;
-    }
+  @include mq($until: small-desktop) {
+    display: none !important;
   }
+}
 
-  // item has no options
-  &.invert:not(.has-options):hover,
-  &.invert.active:not(.has-options) {
-    background-color: $sidebar-item-hover-background;
-    color: $sidebar-item-hover-color;
-
-    .ebs-sidebar__text {
-      color: $sidebar-item-hover-color;
-    }
-  }
+// item has no options
+.ebs-sidebar__item.invert:not(.has-options):hover,
+.ebs-sidebar__item.invert.active:not(.has-options) {
+  background-color: $sidebar-item-hover-background;
+  color: $sidebar-item-hover-color;
 
-  &:hover:not(.has-options),
-  &.active:not(.has-options) {
-    background-color: $sidebar-item-hover-background;
+  .ebs-sidebar__text {
     color: $sidebar-item-hover-color;
-
-    .ebs-sidebar__text {
-      color: $sidebar-item-hover-color;
-    }
   }
+}
 
-  // item has options
-  &.invert.has-options:hover,
-  &.invert.has-options.active {
-    background-color: $sidebar-item-hover-background;
-    color: $sidebar-item-hover-color;
+.ebs-sidebar__item:hover:not(.has-options),
+.ebs-sidebar__item.active:not(.has-options) {
+  background-color: $sidebar-item-hover-background;
+  color: $sidebar-item-hover-color;
 
-    .ebs-sidebar__text {
-      color: $sidebar-item-hover-color;
-    }
+  .ebs-sidebar__text {
+    color: $sidebar-item-hover-color;
   }
+}
 
-  &.has-options:hover,
-  &.has-options.active {
-    background-color: $sidebar-item-hover-background;
-    color: $sidebar-item-hover-color;
+// item has options
+.ebs-sidebar__item.invert.has-options:hover,
+.ebs-sidebar__item.invert.has-options.active {
+  background-color: $sidebar-item-hover-background;
+  color: $sidebar-item-hover-color;
 
-    .ebs-sidebar__text {
-      color: $sidebar-item-hover-color;
-    }
+  .ebs-sidebar__text {
+    color: $sidebar-item-hover-color;
   }
+}
 
-  .ebs-sidebar__prefix svg {
-    position: absolute;
-    left: rem(20px);
-    top: 50%;
-    transform: translateY(-50%);
-    font-size: rem(18px);
-  }
+.ebs-sidebar__item.has-options:hover,
+.ebs-sidebar__item.has-options.active {
+  background-color: $sidebar-item-hover-background;
+  color: $sidebar-item-hover-color;
 
   .ebs-sidebar__text {
-    color: $sidebar-item-text-color;
-    font-size: rem(14px);
-    transition: $transition-time;
+    color: $sidebar-item-hover-color;
   }
+}
 
-  .ebs-sidebar__suffix .ebs-icon {
-    position: absolute;
-    right: rem(12px);
-    top: calc(50% - 4px);
-    font-size: rem(10px);
-    transition: $transition-time;
+.ebs-sidebar__prefix svg {
+  position: absolute;
+  left: rem(20px);
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: rem(18px);
+}
 
-    &.ebs-icon__left {
-      transform: rotate(270deg) translateY(-50%);
-    }
+.ebs-sidebar__text {
+  color: $sidebar-item-text-color;
+  font-size: rem(14px);
+  transition: $transition-time;
+}
+
+.ebs-sidebar__suffix .ebs-icon {
+  position: absolute;
+  right: rem(12px);
+  top: calc(50% - 4px);
+  font-size: rem(10px);
+  transition: $transition-time;
+}
 
-    &.ebs-icon__bottom {
-      transform: rotate(180deg) translateY(-50%);
-    }
+.ebs-sidebar__suffix .ebs-icon.ebs-icon__left {
+  transform: rotate(270deg) translateY(-50%);
+}
 
-    path {
-      transition: $transition-time;
-    }
-  }
+.ebs-sidebar__suffix .ebs-icon.ebs-icon__bottom {
+  transform: rotate(180deg) translateY(-50%);
+}
+
+.ebs-sidebar__suffix .ebs-icon path {
+  transition: $transition-time;
 }
 
 .ebs-sidebar__label.ebs-label__status-text {
@@ -101,28 +101,26 @@
   color: $sidebar-item-text-color;
 }
 
-.ebs-sidebar__options {
-  .ebs-sidebar__item {
-    padding: rem(5px 13.75px 5px 60px);
+.ebs-sidebar__options .ebs-sidebar__item {
+  padding: rem(5px 13.75px 5px 60px);
+}
 
-    &:hover,
-    &.active,
-    &.invert:hover,
-    &.invert.active:hover {
-      background-color: rgba($sidebar-item-hover-background, 0.7);
+.ebs-sidebar__options .ebs-sidebar__item:hover,
+.ebs-sidebar__options .ebs-sidebar__item.active,
+.ebs-sidebar__options .ebs-sidebar__item.invert:hover,
+.ebs-sidebar__options .ebs-sidebar__item.invert.active:hover {
+  background-color: rgba($sidebar-item-hover-background, 0.7);
 
-      .ebs-sidebar__text {
-        color: $sidebar-item-hover-color;
-      }
-    }
+  .ebs-sidebar__text {
+    color: $sidebar-item-hover-color;
+  }
+}
 
-    .ebs-sidebar__prefix {
-      display: none;
-    }
+.ebs-sidebar__options .ebs-sidebar__item .ebs-sidebar__prefix {
+  display: none;
+}
 
-    .ebs-sidebar__text {
-      font-size: rem(12px);
-      color: $sidebar-item-text-color;
-    }
-  }
+.ebs-sidebar__options .ebs-sidebar__item .ebs-sidebar__text {
+  font-size: rem(12px);
+  color: $sidebar-item-text-color;
 }
diff --git a/src/components/organisms/Sidebar/Options/Item/Item.scss b/src/components/organisms/Sidebar/Options/Item/Item.scss
index 428ae52d..f946a53b 100644
--- a/src/components/organisms/Sidebar/Options/Item/Item.scss
+++ b/src/components/organisms/Sidebar/Options/Item/Item.scss
@@ -4,17 +4,17 @@
   font-size: rem(14px);
   cursor: pointer;
   transition: all $transition-time;
+}
 
-  &.disabled,
-  &.disabled:hover {
-    cursor: not-allowed;
-    color: $grey-300;
-    background-color: transparent;
-  }
+.ebs-optionsbar__item.disabled,
+.ebs-optionsbar__item.disabled:hover {
+  cursor: not-allowed;
+  color: $grey-300;
+  background-color: transparent;
+}
 
-  &:hover,
-  &.active {
-    background-color: $primary-000;
-    color: $primary-color;
-  }
+.ebs-optionsbar__item:hover,
+.ebs-optionsbar__item.active {
+  background-color: $primary-000;
+  color: $primary-color;
 }
diff --git a/src/components/organisms/Sidebar/Options/Options.scss b/src/components/organisms/Sidebar/Options/Options.scss
index 1b76dd61..ecad9f9c 100644
--- a/src/components/organisms/Sidebar/Options/Options.scss
+++ b/src/components/organisms/Sidebar/Options/Options.scss
@@ -1,8 +1,8 @@
 .ebs-optionsbar {
-  background-color: $grey-50;
-  border-right: 1px solid $border-color;
   position: absolute;
   top: 0;
+  background-color: $grey-50;
+  border-right: 1px solid $border-color;
   width: rem(192px);
   height: 100vh;
   transition: $transition-time;
diff --git a/src/components/organisms/Sidebar/Sidebar.scss b/src/components/organisms/Sidebar/Sidebar.scss
index 8893120f..9c17c2e1 100644
--- a/src/components/organisms/Sidebar/Sidebar.scss
+++ b/src/components/organisms/Sidebar/Sidebar.scss
@@ -13,145 +13,142 @@
   background-color: $sidebar-background;
   z-index: 5;
 
-  &__top {
-    margin-top: rem(5px);
-  }
-
   @include mq($until: small-desktop) {
     padding-top: rem(80px);
-
-    &.ebs-sidebar__mobile {
-      &--closed,
-      &--opened {
-        transition: $transition-time;
-        padding-top: 0;
-      }
-
-      &--closed {
-        transform: translateX(-100%);
-      }
-
-      &--opened {
-        width: $sidebar-width !important;
-        transform: translateX(0);
-      }
-    }
   }
+}
 
-  &.ebs-sidebar {
-    &--untoggled .ebs-sidebar__options {
-      left: $sidebar-width;
-    }
-
-    &--toggled {
-      width: rem(57px);
-
-      .ebs-sidebar__label {
-        animation: fadeOut 0.1s;
-        white-space: nowrap;
-      }
-
-      .ebs-sidebar__item {
-        padding-right: 0;
-        .ebs-sidebar__text {
-          animation: fadeOut 0.1s;
-          white-space: nowrap;
-        }
-
-        .ebs-sidebar__suffix .ebs-icon {
-          right: $gutter-size / 2;
-        }
-      }
-
-      .ebs-sidebar__options {
-        left: rem(57px);
-      }
-
-      .ebs-sidebar__options .ebs-sidebar__item:hover,
-      .ebs-sidebar__options .ebs-sidebar__item.active,
-      .ebs-sidebar__options .ebs-sidebar__item.invert:hover,
-      .ebs-sidebar__options .ebs-sidebar__item.invert.active:hover {
-        background-color: $primary-color;
-      }
-    }
+@include mq($until: small-desktop) {
+  .ebs-sidebar.ebs-sidebar__mobile--closed,
+  .ebs-sidebar.ebs-sidebar__mobile--opened {
+    transition: $transition-time;
+    padding-top: 0;
   }
 
-  .ebs-sidebar__bottom {
-    background-color: $sidebar-bottom-background;
-    width: 100%;
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    margin-top: rem(20px);
-    padding-bottom: rem(20px);
-    overflow: hidden;
-
-    @include mq($until: small-desktop) {
-      padding-bottom: rem(120px);
-    }
+  .ebs-sidebar.ebs-sidebar__mobile--closed {
+    transform: translateX(-100%);
   }
 
-  &::after {
-    content: '';
-    width: 1px;
-    height: $layout-top-bar-height + 2;
-    border-right: 1px solid $layout-top-bar-toggler-border-color;
-    position: absolute;
-    top: -$layout-top-bar-height - 2;
-    left: $sidebar-width - 2px;
+  .ebs-sidebar.ebs-sidebar__mobile--opened {
+    width: $sidebar-width !important;
+    transform: translateX(0);
   }
 }
 
+.ebs-sidebar__top {
+  margin-top: rem(5px);
+}
+
+.ebs-sidebar.ebs-sidebar--untoggled .ebs-sidebar__options {
+  left: $sidebar-width;
+}
+
 .ebs-sidebar.ebs-sidebar--toggled {
-  .ebs-sidebar__item {
-    z-index: 3;
+  width: rem(57px);
 
-    &.has-options {
-      padding-right: 0;
-    }
+  .ebs-sidebar__options .ebs-sidebar__item:hover,
+  .ebs-sidebar__options .ebs-sidebar__item.active,
+  .ebs-sidebar__options .ebs-sidebar__item.invert:hover,
+  .ebs-sidebar__options .ebs-sidebar__item.invert.active:hover {
+    background-color: $primary-color;
+  }
 
-    &.active + .rah-static {
-      .ebs-sidebar__options {
-        .ebs-sidebar__item {
-          opacity: 1;
-          left: $layout-top-bar-height - 1;
-          transition: all $transition-time;
-        }
-      }
+  @media (min-width: 54.84714em) {
+    + .ebs-layout__content-wrapper {
+      width: calc(100% - 4.38462rem) !important;
     }
   }
+}
 
-  .ebs-sidebar__options {
-    .ebs-sidebar__item {
-      background-color: $sidebar-background;
-      padding: $gutter-size / 3 $gutter-size;
-      z-index: 2;
-      left: -$sidebar-width;
-      opacity: 0;
-      height: $layout-top-bar-height;
-      width: $sidebar-width - 1;
-      border-top: 1px solid $border-color;
-      border-right: 1px solid $border-color;
-
-      &.disabled {
-        background-color: $border-color;
-
-        span {
-          color: $grey-500;
-        }
-      }
-
-      &:nth-last-child(2) {
-        border-bottom: 1px solid $border-color;
-      }
-
-      span {
-        @include text-ellipsis;
-      }
-    }
+.ebs-sidebar.ebs-sidebar--toggled .ebs-sidebar__label {
+  animation: fadeOut 0.1s;
+  white-space: nowrap;
+}
+
+.ebs-sidebar.ebs-sidebar--toggled .ebs-sidebar__item {
+  padding-right: 0;
+}
+
+.ebs-sidebar.ebs-sidebar--toggled .ebs-sidebar__item .ebs-sidebar__text {
+  animation: fadeOut 0.1s;
+  white-space: nowrap;
+}
+
+.ebs-sidebar.ebs-sidebar--toggled .ebs-sidebar__item .ebs-sidebar__suffix .ebs-icon {
+  right: $gutter-size / 2;
+}
+
+.ebs-sidebar.ebs-sidebar--toggled .ebs-sidebar__options {
+  left: rem(57px);
+}
+
+.ebs-sidebar__bottom {
+  background-color: $sidebar-bottom-background;
+  width: 100%;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  margin-top: rem(20px);
+  padding-bottom: rem(20px);
+  overflow: hidden;
+
+  @include mq($until: small-desktop) {
+    padding-bottom: rem(120px);
   }
 }
 
+.ebs-sidebar::after {
+  content: '';
+  width: 1px;
+  height: $layout-top-bar-height + 2;
+  border-right: 1px solid $layout-top-bar-toggler-border-color;
+  position: absolute;
+  top: -$layout-top-bar-height - 2;
+  left: $sidebar-width - 2px;
+}
+
+.ebs-sidebar.ebs-sidebar--toggled .ebs-sidebar__item {
+  z-index: 3;
+}
+
+.ebs-sidebar.ebs-sidebar--toggled .ebs-sidebar__item.has-options {
+  padding-right: 0;
+}
+
+.ebs-sidebar.ebs-sidebar--toggled .ebs-sidebar__item.active + .rah-static .ebs-sidebar__options .ebs-sidebar__item {
+  opacity: 1;
+  left: $layout-top-bar-height - 1;
+  transition: all $transition-time;
+}
+
+.ebs-sidebar.ebs-sidebar--toggled .ebs-sidebar__options .ebs-sidebar__item {
+  background-color: $sidebar-background;
+  padding: $gutter-size / 3 $gutter-size;
+  z-index: 2;
+  left: -$sidebar-width;
+  opacity: 0;
+  height: $layout-top-bar-height;
+  width: $sidebar-width - 1;
+  border-top: 1px solid $border-color;
+  border-right: 1px solid $border-color;
+}
+
+.ebs-sidebar.ebs-sidebar--toggled .ebs-sidebar__options .ebs-sidebar__item.disabled {
+  background-color: $border-color;
+}
+
+.ebs-sidebar.ebs-sidebar--toggled .ebs-sidebar__options .ebs-sidebar__item.disabled span {
+  color: $grey-500;
+}
+
+.ebs-sidebar.ebs-sidebar--toggled .ebs-sidebar__options .ebs-sidebar__item:nth-last-child(2) {
+  border-bottom: 1px solid $border-color;
+}
+
+.ebs-sidebar.ebs-sidebar--toggled .ebs-sidebar__options .ebs-sidebar__item span {
+  @include text-ellipsis;
+}
+
 .ebs-sidebar__mask {
   position: absolute;
   left: 0;
@@ -162,9 +159,3 @@
   z-index: 4;
   animation: fadeIn 0.3s forwards;
 }
-
-@media (min-width: 54.84714em) {
-  .ebs-sidebar--toggled + .ebs-layout__content-wrapper {
-    width: calc(100% - 4.38462rem) !important;
-  }
-}
diff --git a/src/components/organisms/SortBy/SortBy.scss b/src/components/organisms/SortBy/SortBy.scss
index 807b4442..49282ae0 100644
--- a/src/components/organisms/SortBy/SortBy.scss
+++ b/src/components/organisms/SortBy/SortBy.scss
@@ -2,43 +2,37 @@
   position: relative;
   height: rem($sort-by-height);
   display: flex;
+}
 
-  &.ebs-sort-asc > .ebs-button__wrapper {
-    .ebs-icon {
-      transform: rotate(180deg);
-    }
-  }
+.ebs-sort-by__wrapper.ebs-sort-asc > .ebs-button__wrapper .ebs-icon {
+  transform: rotate(180deg);
+}
 
-  > .ebs-button__wrapper {
-    border-right: none;
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-  }
+.ebs-sort-by__wrapper > .ebs-button__wrapper {
+  border-right: none;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
 
-  .ebs-tooltip__trigger > .ebs-button__wrapper {
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-  }
+.ebs-sort-by__wrapper .ebs-tooltip__trigger > .ebs-button__wrapper {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
 
-  .ebs-button__wrapper {
-    height: rem($sort-by-height);
+.ebs-sort-by__wrapper .ebs-button__wrapper {
+  height: rem($sort-by-height);
 
-    &.ebs-button__type--ghost {
-      .ebs-button {
-        .ebs-icon {
-          color: $sort-by-icon-color;
-        }
+  .ebs-icon {
+    transition: 300ms transform;
+  }
+}
 
-        &:hover .ebs-icon {
-          color: $sort-by-icon-hover-color;
-        }
-      }
-    }
+.ebs-sort-by__wrapper .ebs-button__wrapper.ebs-button__type--ghost .ebs-button .ebs-icon {
+  color: $sort-by-icon-color;
+}
 
-    .ebs-icon {
-      transition: 300ms transform;
-    }
-  }
+.ebs-sort-by__wrapper .ebs-button__wrapper.ebs-button__type--ghost .ebs-button:hover .ebs-icon {
+  color: $sort-by-icon-hover-color;
 }
 
 .ebs-sort-by__tooltip {
@@ -46,47 +40,45 @@
   border: 1px solid $border-color;
   border-radius: $border-radius;
   width: rem(162.5px);
+}
 
-  .ebs-sort-by__tooltip-title {
-    @include fontMedium;
-    font-size: rem(11px);
-    padding: rem(12.5px);
-    border-bottom: 1px solid $border-color;
-    color: #3c3939;
-  }
+.ebs-sort-by__tooltip-title {
+  @include fontMedium;
+  font-size: rem(11px);
+  padding: rem(12.5px);
+  border-bottom: 1px solid $border-color;
+  color: #3c3939;
+}
 
-  .ebs-sort-by__tooltip-items {
-    .ebs-sort-by__tooltip-item {
-      position: relative;
-      padding: rem(12.5px);
-      font-size: rem(12px);
-      text-overflow: ellipsis;
-      overflow: hidden;
-      white-space: nowrap;
-      @include fontMedium;
-      cursor: pointer;
-      transition: 0.2s;
+.ebs-sort-by__tooltip-items .ebs-sort-by__tooltip-item {
+  position: relative;
+  padding: rem(12.5px);
+  font-size: rem(12px);
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  @include fontMedium;
+  cursor: pointer;
+  transition: 0.2s;
 
-      &:not(:last-child) {
-        border-bottom: 1px solid $border-color;
-      }
+  .ebs-icon {
+    position: absolute;
+    right: rem(10px);
+    top: 50%;
+    transform: translateY(-50%);
+  }
+}
 
-      &--active {
-        @include fontBold;
-        color: $primary-color;
-      }
+.ebs-sort-by__tooltip-items .ebs-sort-by__tooltip-item:not(:last-child) {
+  border-bottom: 1px solid $border-color;
+}
 
-      &:hover {
-        background-color: #f4f3f2;
-        color: $primary-300;
-      }
+.ebs-sort-by__tooltip-items .ebs-sort-by__tooltip-item--active {
+  @include fontBold;
+  color: $primary-color;
+}
 
-      .ebs-icon {
-        position: absolute;
-        right: rem(10px);
-        top: 50%;
-        transform: translateY(-50%);
-      }
-    }
-  }
+.ebs-sort-by__tooltip-items .ebs-sort-by__tooltip-item:hover {
+  background-color: #f4f3f2;
+  color: $primary-300;
 }
diff --git a/src/components/organisms/Table/Table.scss b/src/components/organisms/Table/Table.scss
index a9438fc0..661f05ec 100644
--- a/src/components/organisms/Table/Table.scss
+++ b/src/components/organisms/Table/Table.scss
@@ -6,297 +6,273 @@
   @include mq($until: desktop) {
     display: none;
   }
+}
 
-  &.ebs-table__size {
-    &-small {
-      td {
-        padding: rem($gutter-size / 2 $gutter-size);
-      }
-    }
-  }
+.ebs-table.ebs-table__size-small td {
+  padding: rem($gutter-size / 2 $gutter-size);
+}
 
-  .rc-table-content {
-    border: none;
-  }
+.ebs-table .rc-table-content {
+  border: none;
+}
 
-  .rc-table-expanded-row {
-    .rc-table-cell {
-      box-shadow: none;
-      padding: 0;
+.ebs-table .rc-table-expanded-row .rc-table-cell {
+  box-shadow: none;
+  padding: 0;
+}
 
-      .flex-item {
-        border-bottom: none;
-      }
-    }
-  }
+.ebs-table .rc-table-expanded-row .rc-table-cell .flex-item {
+  border-bottom: none;
+}
+
+.ebs-table th,
+.ebs-table td {
+  border-color: $border-color;
+  border-right: none;
+  padding: rem(22px 16px);
+}
+
+.ebs-table th:first-child,
+.ebs-table td:first-child {
+  border-left: $table-border !important;
+}
+
+.ebs-table th:last-child,
+.ebs-table td:last-child {
+  border-right: $table-border !important;
+}
 
-  th,
-  td {
-    border-color: $border-color;
-    border-right: none;
-    padding: rem(22px 16px);
+.ebs-table td {
+  @include fontMedium;
+  color: $text-color;
+}
 
-    &:first-child {
-      border-left: $table-border !important;
-    }
+.ebs-table td a {
+  color: $primary-color;
+}
 
-    &:last-child {
-      border-right: $table-border !important;
-    }
+.ebs-table td b,
+.ebs-table td strong {
+  @include fontBold;
+}
+
+.ebs-table td .ebs-time__period-cell > div > .ebs-info {
+  display: inline-block;
+}
+
+.ebs-table td .ebs-time__period-cell > div > .ebs-info:not(:first-child) {
+  padding-left: $table-body-font-size;
+
+  .ebs-info__icon {
+    display: none;
   }
+}
 
-  td {
-    @include fontMedium;
-    color: $text-color;
+.ebs-table td .ebs-time__period-cell > div > .ebs-info:not(:last-child) {
+  margin-right: $table-body-font-size;
+}
 
-    a {
-      color: $primary-color;
-    }
+.ebs-table .rc-table-thead tr th.rc-table-cell {
+  text-transform: uppercase;
+  border: $table-head-cell-border;
+  border-top: $table-border;
+  border-bottom: $table-head-cell-bottom-border;
+  position: relative;
+  font-weight: $table-head-font-weight;
+  text-align: left;
+  background-color: $table-head-background;
+  font-size: $table-head-font-size;
+  color: $heading-color;
+  word-break: normal;
+}
 
-    &.ebs-time__period-cell > div {
-      > .ebs-info {
-        display: inline-block;
+.ebs-table .rc-table-thead tr th.rc-table-cell.has-children {
+  border: $table-border;
+  border-right: none;
+}
 
-        &:not(:first-child) {
-          padding-left: $table-body-font-size;
+.ebs-table .rc-table-thead tr th.rc-table-cell.has-children + *:not(.has-children) {
+  border-left: $table-border;
+}
 
-          .ebs-info__icon {
-            display: none;
-          }
-        }
+.ebs-table .rc-table-thead tr th.rc-table-cell:not(:last-child) {
+  border-right: none;
+}
+
+.ebs-table .rc-table-thead tr th.rc-table-cell:not(:last-child) {
+  border-right: none;
+}
+
+.ebs-table .rc-table-thead tr th.rc-table-cell.rc-table-row-expand-icon-cell + th.rc-table-cell {
+  padding-left: 0;
+}
 
-        &:not(:last-child) {
-          margin-right: $table-body-font-size;
-        }
-      }
-    }
+.ebs-table__th-filtered {
+  cursor: pointer;
+  transition: $transition-time;
 
-    b,
-    strong {
-      @include fontBold;
-    }
+  .ebs-icon {
+    font-size: $table-body-font-size;
+    margin-left: rem(6px);
+    position: relative;
+    top: 0;
+    transition: $transition-time;
+    color: $text-color;
   }
+}
 
-  .rc-table-thead {
-    tr {
-      th.rc-table-cell {
-        text-transform: uppercase;
-        border: $table-head-cell-border;
-        border-top: $table-border;
-        border-bottom: $table-head-cell-bottom-border;
-        position: relative;
-        font-weight: $table-head-font-weight;
-        text-align: left;
-        background-color: $table-head-background;
-        font-size: $table-head-font-size;
-        color: $heading-color;
-        word-break: normal;
-
-        &.has-children {
-          border: $table-border;
-          border-right: none;
-
-          & + *:not(.has-children) {
-            border-left: $table-border;
-          }
-        }
-
-        &:not(:last-child) {
-          border-right: none;
-        }
-
-        &:not(:last-child) {
-          border-right: none;
-        }
-
-        &.rc-table-row-expand-icon-cell + th.rc-table-cell {
-          padding-left: 0;
-        }
-
-        .ebs-table__th-filtered {
-          cursor: pointer;
-          transition: $transition-time;
-
-          .ebs-icon {
-            font-size: $table-body-font-size;
-            margin-left: rem(6px);
-            position: relative;
-            top: 0;
-            transition: $transition-time;
-            color: $text-color;
-          }
-
-          &.ebs-table__th-filtered {
-            &-asc,
-            &-desc {
-              @include fontMedium;
-              color: $text-color-secondary;
-
-              .ebs-icon {
-                color: $text-color-secondary;
-              }
-            }
-
-            &-desc .ebs-icon {
-              transform: rotate(180deg);
-            }
-          }
-
-          &:hover {
-            color: $text-color-secondary;
-
-            .ebs-icon {
-              color: $text-color-secondary;
-            }
-          }
-        }
-      }
-
-      &:not(:first-child) {
-        th {
-          border: $table-border;
-          border-top: none;
-          border-right: none !important;
-          border-bottom: $table-head-cell-bottom-border;
-        }
-      }
-    }
+.ebs-table__th-filtered.ebs-table__th-filtered-asc,
+.ebs-table__th-filtered.ebs-table__th-filtered-desc {
+  @include fontMedium;
+  color: $text-color-secondary;
+
+  .ebs-icon {
+    color: $text-color-secondary;
   }
+}
 
-  .rc-table-tbody {
-    tr {
-      &.rc-table-row {
-        &:hover {
-          &:nth-child(odd) td.rc-table-cell,
-          &:nth-child(even) td.rc-table-cell {
-            background-color: $table-body-cell-hover-background;
-          }
-        }
-
-        td.rc-table-cell {
-          word-break: normal;
-          border: $table-body-cell-border;
-          transition: $transition-time;
-
-          &:not(:last-child) {
-            border-right: none;
-          }
-        }
-
-        &:nth-child(odd) td.rc-table-cell {
-          background-color: $table-body-cell-odd-background;
-          font-size: $table-body-font-size;
-        }
-
-        &:last-child td {
-          border-bottom: $table-border;
-        }
-      }
-    }
+.ebs-table__th-filtered.ebs-table__th-filtered-desc .ebs-icon {
+  transform: rotate(180deg);
+}
+
+.ebs-table__th-filtered:hover {
+  color: $text-color-secondary;
+
+  .ebs-icon {
+    color: $text-color-secondary;
   }
 }
 
+.ebs-table .rc-table-thead tr:not(:first-child) th {
+  border: $table-border;
+  border-top: none;
+  border-right: none !important;
+  border-bottom: $table-head-cell-bottom-border;
+}
+
+.ebs-table .rc-table-tbody tr.rc-table-row:hover:nth-child(odd) td.rc-table-cell,
+.ebs-table .rc-table-tbody tr.rc-table-row:hover:nth-child(even) td.rc-table-cell {
+  background-color: $table-body-cell-hover-background;
+}
+
+.ebs-table .rc-table-tbody tr.rc-table-row td.rc-table-cell {
+  word-break: normal;
+  border: $table-body-cell-border;
+  transition: $transition-time;
+}
+
+.ebs-table .rc-table-tbody tr.rc-table-row td.rc-table-cell:not(:last-child) {
+  border-right: none;
+}
+
+.ebs-table .rc-table-tbody tr.rc-table-row:nth-child(odd) td.rc-table-cell {
+  background-color: $table-body-cell-odd-background;
+  font-size: $table-body-font-size;
+}
+
+.ebs-table .rc-table-tbody tr.rc-table-row:last-child td {
+  border-bottom: $table-border;
+}
+
 .ebs-table__mobile {
   display: none;
 
   @include mq($until: desktop) {
     display: block;
   }
+}
 
-  .ebs-button__wrapper {
-    width: 100%;
-    border-top-left-radius: 0;
-    border-top-right-radius: 0;
-  }
+.ebs-table__mobile .ebs-button__wrapper {
+  width: 100%;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
 
-  .ebs-action__wrapper {
-    position: relative;
-  }
+.ebs-table__mobile .ebs-action__wrapper {
+  position: relative;
+}
 
-  .ebs-table__mobile-item {
-    position: relative;
-    border: $table-body-mobile-cell-border;
-    border-radius: $border-radius;
-    background-color: $table-head-background;
-    display: flex;
-    flex-wrap: wrap;
-    @include elevation-2;
-
-    &:not(:last-child) {
-      margin-bottom: rem($gutter-size);
-    }
-
-    .ebs-table__mobile-item-key {
-      font-size: rem($gutter-size);
-      position: absolute;
-      top: rem($gutter-size);
-      right: rem($gutter-size);
-      color: $grey-400;
-    }
-
-    .ebs-table__mobile-item-title {
-      padding: rem($gutter-size $gutter-size $gutter-size / 2);
-      font-size: rem($table-body-font-size);
-      width: 100%;
-    }
-
-    .ebs-table__mobile-item-desc {
-      padding: rem(0 $gutter-size $gutter-size);
-      width: 100%;
-
-      &:not(:last-child) {
-        border-bottom: $table-body-mobile-cell-border;
-      }
-    }
-
-    .ebs-table__mobile-item-child {
-      padding: rem($gutter-size);
-      width: 50%;
-
-      &:nth-child(even) {
-        border-right: $table-body-mobile-cell-border;
-      }
-
-      &:last-child {
-        border-right: unset;
-      }
-
-      .ebs-table__mobile-item-child-title {
-        display: block;
-        font-size: rem($table-body-font-size);
-        margin-bottom: rem(5px);
-        color: $grey-400;
-      }
-    }
-
-    .ebs-table__mobile-item-action {
-      width: 100%;
-      border-top: $table-body-mobile-cell-border;
-      border-bottom-left-radius: $border-radius;
-      border-bottom-right-radius: $border-radius;
-      color: $white;
-      display: flex;
-      align-items: center;
-      text-align: center;
-      padding: rem($gutter-size 5px);
-
-      > .flex {
-        display: flex;
-        width: 100%;
-        align-items: center;
-        justify-content: center;
-      }
-
-      > * {
-        width: 100%;
-        display: block;
-      }
-    }
-
-    &-child {
-      &:last-child {
-        width: 100%;
-      }
-    }
-  }
+.ebs-table__mobile-item {
+  position: relative;
+  border: $table-body-mobile-cell-border;
+  border-radius: $border-radius;
+  background-color: $table-head-background;
+  display: flex;
+  flex-wrap: wrap;
+  @include elevation-2;
+}
+
+.ebs-table__mobile-item:not(:last-child) {
+  margin-bottom: rem($gutter-size);
+}
+
+.ebs-table__mobile-item-key {
+  font-size: rem($gutter-size);
+  position: absolute;
+  top: rem($gutter-size);
+  right: rem($gutter-size);
+  color: $grey-400;
+}
+
+.ebs-table__mobile-item-title {
+  padding: rem($gutter-size $gutter-size $gutter-size / 2);
+  font-size: rem($table-body-font-size);
+  width: 100%;
+}
+
+.ebs-table__mobile-item-desc {
+  padding: rem(0 $gutter-size $gutter-size);
+  width: 100%;
+}
+
+.ebs-table__mobile-item-desc:not(:last-child) {
+  border-bottom: $table-body-mobile-cell-border;
+}
+
+.ebs-table__mobile-item-child {
+  padding: rem($gutter-size);
+  width: 50%;
+}
+
+.ebs-table__mobile-item-child:nth-child(even) {
+  border-right: $table-body-mobile-cell-border;
+}
+
+.ebs-table__mobile-item-child:last-child {
+  border-right: unset;
+}
+
+.ebs-table__mobile-item-child-title {
+  display: block;
+  font-size: rem($table-body-font-size);
+  margin-bottom: rem(5px);
+  color: $grey-400;
+}
+
+.ebs-table__mobile-item-action {
+  width: 100%;
+  border-top: $table-body-mobile-cell-border;
+  border-bottom-left-radius: $border-radius;
+  border-bottom-right-radius: $border-radius;
+  color: $white;
+  display: flex;
+  align-items: center;
+  text-align: center;
+  padding: rem($gutter-size 5px);
+}
+
+.ebs-table__mobile-item-action > .flex {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+}
+
+.ebs-table__mobile-item-action > * {
+  width: 100%;
+  display: block;
+}
+
+.ebs-table__mobile-child:last-child {
+  width: 100%;
 }

From 6ad9f284cc49a4a3927b862ac3d3e6ca4f0ec9c0 Mon Sep 17 00:00:00 2001
From: Nicolae Tataru <devdfan@gmail.com>
Date: Mon, 18 Jan 2021 12:00:31 +0200
Subject: [PATCH 2/6] Small fix on label style

---
 src/components/atoms/Label/Label.scss | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/components/atoms/Label/Label.scss b/src/components/atoms/Label/Label.scss
index d6c1a0e8..5f92b343 100644
--- a/src/components/atoms/Label/Label.scss
+++ b/src/components/atoms/Label/Label.scss
@@ -11,8 +11,8 @@
   color: $text-color;
 }
 
-.ebs-label-circle,
-.ebs-label-fill {
+.ebs-label.ebs-label-circle,
+.ebs-label.ebs-label-fill {
   display: inline;
   font-size: rem(10px);
   padding: rem(5px 12px);
@@ -20,37 +20,37 @@
   border-radius: rem(12px);
 }
 
-.ebs-label--circle {
+.ebs-label.ebs-label--circle {
   color: $text-color;
 }
 
-.ebs-label--fill {
+.ebs-label.ebs-label-fill {
   color: $white !important;
   background: $text-color;
   border-radius: rem(12px);
 }
 
-.ebs-label--fill.ebs-label__status--success {
+.ebs-label.ebs-label-fill.ebs-label__status--success {
   background-color: $success-color;
 }
 
-.ebs-label--fill.ebs-label__status--warning {
+.ebs-label.ebs-label-fill.ebs-label__status--warning {
   background-color: $warning-color;
 }
 
-.ebs-label--fill.ebs-label__status--danger {
+.ebs-label.ebs-label-fill.ebs-label__status--danger {
   background-color: $danger-color;
 }
 
-.ebs-label--fill.ebs-label__status--info {
+.ebs-label.ebs-label-fill.ebs-label__status--info {
   background-color: $info-color;
 }
 
-.ebs-label--fill.ebs-label__status--text {
+.ebs-label.ebs-label-fill.ebs-label__status--text {
   background-color: $text-color;
 }
 
-.ebs-label--fill.disabled {
+.ebs-label.ebs-label-fill.disabled {
   cursor: not-allowed;
   color: $grey-500 !important;
   background: $grey-100;

From 2d40de35678933d2727f6871dd18d0c571719f11 Mon Sep 17 00:00:00 2001
From: Nicolae Tataru <devdfan@gmail.com>
Date: Tue, 19 Jan 2021 14:00:22 +0200
Subject: [PATCH 3/6] Minor fixes on styles

---
 src/components/atoms/Alert/Alert.scss         |  54 +-
 src/components/atoms/Avatar/Avatar.scss       | 281 +++++-----
 src/components/atoms/Avatar/Avatar.tsx        |   2 +-
 src/components/atoms/Avatar/AvatarInline.tsx  |  11 +-
 src/components/atoms/Badge/Badge.scss         | 122 ++---
 src/components/atoms/Badge/Badge.tsx          |   4 +-
 src/components/atoms/Button/Button.scss       | 403 +++++++-------
 src/components/atoms/Button/Button.tsx        |  12 +-
 src/components/atoms/Card/Card.scss           |  95 ++--
 src/components/atoms/Chips/Chips.scss         | 120 ++---
 src/components/atoms/Collapse/Collapse.scss   |  60 +--
 src/components/atoms/Extra/Extra.scss         |  52 +-
 src/components/atoms/Icon/Icon.scss           |  18 +-
 src/components/atoms/Input/Input.scss         | 140 ++---
 src/components/atoms/Label/Label.scss         | 211 ++++----
 src/components/atoms/Label/Label.tsx          |   6 +-
 .../atoms/LoaderSpinner/LoaderSpinner.scss    |  42 +-
 .../atoms/LoaderSpinner/LoaderSpinner.tsx     |   2 +-
 src/components/atoms/Mask/Mask.scss           |   1 +
 src/components/atoms/Radio/Radio.scss         | 220 ++++----
 src/components/atoms/Switch/Switch.scss       | 124 ++---
 src/components/atoms/Tooltip/Tooltip.scss     | 116 ++--
 .../molecules/Calendar/Calendar.scss          | 464 ++++++++--------
 .../molecules/Checkbox/Checkbox.scss          | 220 ++++----
 .../molecules/InputPhone/InputPhone.scss      | 116 ++--
 .../molecules/InputSearch/InputSearch.scss    |  36 +-
 .../molecules/InputSelect/InputSelect.scss    | 155 +++---
 src/components/molecules/Loader/Loader.scss   |  42 +-
 .../SelectDropdown/SelectDropdown.scss        |  44 +-
 src/components/molecules/Stepper/Stepper.scss | 258 ++++-----
 .../molecules/Textarea/Textarea.scss          |  75 ++-
 src/components/organisms/Actions/Actions.scss |  65 ++-
 src/components/organisms/Form/Form.scss       |  80 +--
 src/components/organisms/Layout/Layout.scss   | 290 +++++-----
 src/components/organisms/Modal/Modal.scss     | 178 +++----
 .../organisms/Sidebar/Item/Item.scss          | 224 ++++----
 .../organisms/Sidebar/Options/Item/Item.scss  |  26 +-
 .../organisms/Sidebar/Options/Options.scss    |   4 +-
 src/components/organisms/Sidebar/Sidebar.scss | 236 ++++-----
 src/components/organisms/SortBy/SortBy.scss   | 143 ++---
 src/components/organisms/Table/Table.scss     | 494 +++++++++---------
 src/components/organisms/Table/Table.tsx      |   2 +-
 src/styles/global-styles.scss                 |   2 +-
 src/styles/variables.scss                     |   4 +
 44 files changed, 2639 insertions(+), 2615 deletions(-)

diff --git a/src/components/atoms/Alert/Alert.scss b/src/components/atoms/Alert/Alert.scss
index 11313ffe..6c6bd947 100644
--- a/src/components/atoms/Alert/Alert.scss
+++ b/src/components/atoms/Alert/Alert.scss
@@ -5,36 +5,40 @@
   border: 1px solid $success-color;
   padding: $alert-padding;
   border-radius: $border-radius;
-}
 
-.ebs-alert .ebs-icon {
-  width: $alert-icon-size;
-  height: $alert-icon-size;
-  border-radius: 100px;
-  margin-right: $alert-icon-margin;
-  color: $success-color;
-}
+  .ebs-icon {
+    width: $alert-icon-size;
+    height: $alert-icon-size;
+    border-radius: 100px;
+    margin-right: $alert-icon-margin;
+    color: $success-color;
+  }
 
-.ebs-alert.ebs-alert__type--info {
-  border: 1px dashed $info-color;
-}
+  &__type--info {
+    border: 1px dashed $info-color;
 
-.ebs-alert.ebs-alert__type--info .ebs-icon {
-  color: $info-color;
-}
+    .ebs-icon {
+      color: $info-color;
+    }
+  }
 
-.ebs-alert.ebs-alert__type--warning {
-  border: 1px dashed $warning-color;
-}
+  &__type--warning {
+    border: 1px dashed $warning-color;
 
-.ebs-alert.ebs-alert__type--warning .ebs-icon {
-  color: $warning-color;
-}
+    .ebs-icon {
+      color: $warning-color;
+    }
+  }
 
-.ebs-alert.ebs-alert__type--error {
-  border: 1px dashed $danger-color;
-}
+  &__type--error {
+    border: 1px dashed $danger-color;
+
+    .ebs-icon {
+      color: $danger-color;
 
-.ebs-alert.ebs-alert__type--error .ebs-icon {
-  color: $danger-color;
+      path:last-child {
+        fill: $white;
+      }
+    }
+  }
 }
diff --git a/src/components/atoms/Avatar/Avatar.scss b/src/components/atoms/Avatar/Avatar.scss
index a8418c4b..6ef99538 100644
--- a/src/components/atoms/Avatar/Avatar.scss
+++ b/src/components/atoms/Avatar/Avatar.scss
@@ -1,152 +1,141 @@
 .ebs-avatar {
-  position: relative;
-  border-radius: $border-radius;
   @include flex-center;
-}
-
-.ebs-avatar.circle {
-  border-radius: 50%;
-}
-
-.ebs-avatar.circle .ebs-avatar__img {
-  border-radius: 50%;
-}
-
-.ebs-avatar__type--regular {
-  color: $primary-color;
-  background-color: $grey-100;
-}
-
-.ebs-avatar__type--primary {
-  color: $white;
-  background-color: $primary-color;
-}
-
-.ebs-avatar__type--white {
-  color: $text-color;
-  background-color: $white;
-}
-
-.ebs-avatar.ebs-avatar__size--small {
-  min-width: $avatar-size-small;
-  width: $avatar-size-small;
-  height: $avatar-size-small;
-}
-
-.ebs-avatar.ebs-avatar__size--small .ebs-avatar-short-alt {
-  font-size: $avatar-font-small;
-}
-
-.ebs-avatar.ebs-avatar__size--big {
-  min-width: $avatar-size-big;
-  width: $avatar-size-big;
-  height: $avatar-size-big;
-}
-
-.ebs-avatar.ebs-avatar__size--big .ebs-avatar-short-alt {
-  font-size: $avatar-font-big;
-}
-
-.ebs-avatar .ebs-avatar__short-alt {
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  @include fontBold;
-  white-space: nowrap;
-}
-
-.ebs-avatar .ebs-avatar__short-alt {
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  @include fontBold;
-  white-space: nowrap;
-}
-
-.ebs-avatar .ebs-avatar__img {
   position: relative;
-  width: 100%;
-  height: 100%;
-  z-index: 1;
   border-radius: $border-radius;
-  object-fit: cover;
-}
-
-.ebs-avatar .ebs-avatar__status {
-  position: absolute;
-  bottom: rem(-2.5px);
-  right: rem(-2.5px);
-  width: rem(10px);
-  height: rem(10px);
-  border: 2px solid #fff;
-  border-radius: 50%;
-}
-
-.ebs-avatar .ebs-avatar__status--active {
-  background-color: $avatar-status-active;
-}
-
-.ebs-avatar .ebs-avatar__status--regular {
-  background-color: $primary-color;
-}
-
-.ebs-avatar .ebs-avatar__status--reuanctivegular {
-  background-color: $avatar-status-uanctive;
-}
-
-.ebs-avatar__card {
-  display: inline-flex;
-  align-items: center;
-  background-color: #f9f9f9;
-  border: 1px solid #dfddd6;
-  border-radius: $border-radius;
-}
-
-.ebs-avatar__card .ebs-avatar {
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-  height: rem(23px);
-  width: rem(23px);
-}
-
-.ebs-avatar__card .ebs-avatar img {
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-}
-
-.ebs-avatar__card .ebs-avatar__card-alt {
-  color: #333;
-  padding: rem(0 $gutter-size / 2);
-  border-top-right-radius: $border-radius;
-  border-bottom-right-radius: $border-radius;
-  @include fontMedium;
-  font-size: rem(9px);
-}
-
-.ebs-avatar__inline {
-  display: flex;
-  align-items: center;
-}
-
-.ebs-avatar__inline .ebs-avatar__inline-alt {
-  margin-left: $gutter-size;
-  @include fontSemiBold;
-  font-size: rem(12px);
-  color: $black;
-}
-
-.ebs-avatar__inline.is-white .ebs-avatar__inline-alt {
-  color: $white;
-}
-
-.ebs-avatar__inline .ebs-avatar__inline-description {
-  font-size: rem(10px);
-  color: $avatar-description-color;
-}
 
-.ebs-avatar__inline.is-reversed .ebs-avatar__inline-alt {
-  margin-left: 0;
-  margin-right: $gutter-size;
+  &--circle,
+  &--circle &__img {
+    border-radius: 50%;
+  }
+
+  &--color-white &__inline-alt {
+    color: $white;
+  }
+
+  &__type--regular {
+    color: $primary-color;
+    background-color: $grey-100;
+  }
+
+  &__type--primary {
+    color: $white;
+    background-color: $primary-color;
+  }
+
+  &__type--white {
+    color: $text-color;
+    background-color: $white;
+  }
+
+  &__size--small {
+    min-width: $avatar-size-small;
+    width: $avatar-size-small;
+    height: $avatar-size-small;
+  }
+
+  &__size--small &-short-alt {
+    font-size: $avatar-font-small;
+  }
+
+  &__size--big {
+    min-width: $avatar-size-big;
+    width: $avatar-size-big;
+    height: $avatar-size-big;
+  }
+
+  &__size--big &-short-alt {
+    font-size: $avatar-font-big;
+  }
+
+  &__short-alt {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    @include fontBold;
+    white-space: nowrap;
+  }
+
+  &__img {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    z-index: 1;
+    border-radius: $border-radius;
+    object-fit: cover;
+  }
+
+  &__status {
+    position: absolute;
+    bottom: rem(-2.5px);
+    right: rem(-2.5px);
+    width: rem(10px);
+    height: rem(10px);
+    border: 2px solid #fff;
+    border-radius: 50%;
+
+    &--active {
+      background-color: $avatar-status-active;
+    }
+
+    &--regular {
+      background-color: $primary-color;
+    }
+
+    &--reuanctivegular {
+      background-color: $avatar-status-uanctive;
+    }
+  }
+
+  &__card {
+    display: inline-flex;
+    align-items: center;
+    background-color: #f9f9f9;
+    border: 1px solid #dfddd6;
+    border-radius: $border-radius;
+
+    &-alt {
+      color: #333;
+      padding: rem(0 $gutter-size / 2);
+      border-top-right-radius: $border-radius;
+      border-bottom-right-radius: $border-radius;
+      @include fontMedium;
+      font-size: rem(9px);
+    }
+
+    img {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+
+    .ebs-avatar {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+      height: rem(23px);
+      width: rem(23px);
+    }
+  }
+
+  &__inline {
+    display: flex;
+    align-items: center;
+    text-align: left;
+
+    &--type-reversed &-alt {
+      margin-left: 0;
+      margin-right: $gutter-size;
+    }
+
+    &-alt {
+      margin-left: $gutter-size;
+      @include fontSemiBold;
+      font-size: rem(12px);
+      color: $black;
+    }
+
+    &-description {
+      font-size: rem(10px);
+      color: $avatar-description-color;
+    }
+  }
 }
diff --git a/src/components/atoms/Avatar/Avatar.tsx b/src/components/atoms/Avatar/Avatar.tsx
index 61899ed3..cc47ff65 100644
--- a/src/components/atoms/Avatar/Avatar.tsx
+++ b/src/components/atoms/Avatar/Avatar.tsx
@@ -34,7 +34,7 @@ export const Avatar: React.FC<AvatarProps> = ({
   return (
     <div
       className={cn(`ebs-avatar`, `ebs-avatar__size--${size}`, `ebs-avatar__type--${type}`, className, {
-        circle: circle,
+        'ebs-avatar--circle': circle,
       })}
     >
       {img ? (
diff --git a/src/components/atoms/Avatar/AvatarInline.tsx b/src/components/atoms/Avatar/AvatarInline.tsx
index 4adecb8b..96d3296c 100644
--- a/src/components/atoms/Avatar/AvatarInline.tsx
+++ b/src/components/atoms/Avatar/AvatarInline.tsx
@@ -15,7 +15,16 @@ export const AvatarInline: React.FC<CardProps> = ({
   description,
   reversed = false,
 }) => (
-  <div className={cn(`ebs-avatar__inline`, className, { 'is-reversed': reversed, 'is-white': type === 'white' })}>
+  <div
+    className={cn(
+      `ebs-avatar__inline`,
+      {
+        'ebs-avatar__inline--type-reversed': reversed,
+        [`ebs-avatar--color-${type}`]: type === 'white',
+      },
+      className,
+    )}
+  >
     {!reversed && (
       <Avatar
         size="small"
diff --git a/src/components/atoms/Badge/Badge.scss b/src/components/atoms/Badge/Badge.scss
index a4bd4d96..a446096d 100644
--- a/src/components/atoms/Badge/Badge.scss
+++ b/src/components/atoms/Badge/Badge.scss
@@ -3,77 +3,77 @@
 
   min-width: $badge-min-size;
   min-height: $badge-min-size;
-}
 
-.ebs-badge__container {
-  @include flex-center;
+  &__container {
+    @include flex-center;
 
-  position: absolute;
-  right: 0;
-  top: 0;
-  z-index: 2;
-  background-color: $badge-regular-bg-color;
-  width: $badge-size;
-  height: $badge-size;
-  color: $black;
-  border-radius: $badge-border-radius;
-  padding: $badge-padding;
-  transform: $badge-transform;
-  font-size: $badge-font-size;
-  font-weight: $badge-font-weight;
-}
+    position: absolute;
+    right: 0;
+    top: 0;
+    z-index: 2;
+    background-color: $badge-regular-bg-color;
+    width: $badge-size;
+    height: $badge-size;
+    color: $black;
+    border-radius: $badge-border-radius;
+    padding: $badge-padding;
+    transform: $badge-transform;
+    font-size: $badge-font-size;
+    font-weight: $badge-font-weight;
 
-.ebs-badge__container.is-text {
-  width: auto;
-  padding: $badge-text-padding;
-  border-radius: $badge-text-border-radius;
-}
+    &--text {
+      width: auto;
+      padding: $badge-text-padding;
+      border-radius: $badge-text-border-radius;
+    }
+  }
 
-.ebs-badge__container + * {
-  margin: 0 5px;
-}
+  &__container + * {
+    margin: 0 5px;
+  }
 
-.ebs-badge span {
-  @include flex-center;
-  position: relative;
-}
+  & span {
+    @include flex-center;
+    position: relative;
 
-.ebs-badge span > .ebs-icon {
-  font-size: $badge-size;
-}
+    > .ebs-icon {
+      font-size: $badge-size;
+    }
+  }
 
-.ebs-badge__type--success .ebs-badge__container {
-  background-color: $badge-success-bg-color;
-  color: $white;
-}
+  &__type--success &__container {
+    background-color: $badge-success-bg-color;
+    color: $white;
+  }
 
-.ebs-badge__type--info .ebs-badge__container {
-  background-color: $badge-info-bg-color;
-  color: $white;
-}
+  &__type--info &__container {
+    background-color: $badge-info-bg-color;
+    color: $white;
+  }
 
-.ebs-badge__type--warning .ebs-badge__container {
-  background-color: $badge-warning-bg-color;
-  color: $white;
-}
+  &__type--warning &__container {
+    background-color: $badge-warning-bg-color;
+    color: $white;
+  }
 
-.ebs-badge__type--danger .ebs-badge__container {
-  background-color: $badge-danger-bg-color;
-  color: $white;
-}
+  &__type--danger &__container {
+    background-color: $badge-danger-bg-color;
+    color: $white;
+  }
 
-.ebs-sidebar__prefix > .ebs-badge {
-  position: absolute;
-  left: rem(20px);
-  top: 50%;
-  transform: translateY(-50%);
-  font-size: rem(18px);
-}
+  .ebs-sidebar__prefix > & {
+    position: absolute;
+    left: rem(20px);
+    top: 50%;
+    transform: translateY(-50%);
+    font-size: rem(18px);
 
-.ebs-sidebar__prefix > .ebs-badge .ebs-icon {
-  position: unset;
-  left: unset;
-  top: unset;
-  transform: unset;
-  margin-left: 0;
+    .ebs-icon {
+      position: unset;
+      left: unset;
+      top: unset;
+      transform: unset;
+      margin-left: 0;
+    }
+  }
 }
diff --git a/src/components/atoms/Badge/Badge.tsx b/src/components/atoms/Badge/Badge.tsx
index d6f27ea9..370d8c8f 100644
--- a/src/components/atoms/Badge/Badge.tsx
+++ b/src/components/atoms/Badge/Badge.tsx
@@ -14,7 +14,9 @@ export const Badge: React.FC<Props> = ({ count, text, type = 'regular', classNam
   return (
     <div className="ebs-badge">
       <span className={cn(`ebs-badge__type--${type}`, className)}>
-        {(count || text) && <div className={cn('ebs-badge__container', { 'is-text': text })}>{count || text}</div>}
+        {(count || text) && (
+          <div className={cn('ebs-badge__container', { 'ebs-badge__container--text': text })}>{count || text}</div>
+        )}
         {children}
       </span>
     </div>
diff --git a/src/components/atoms/Button/Button.scss b/src/components/atoms/Button/Button.scss
index 6ebf51f8..8d74751a 100644
--- a/src/components/atoms/Button/Button.scss
+++ b/src/components/atoms/Button/Button.scss
@@ -1,255 +1,256 @@
 // fade
 @include fadeBackground('regularFade', #000);
 
-.ebs-button__wrapper {
-  position: relative;
-  display: inline-block;
-  text-align: center;
-  border-radius: rem($border-radius);
-  transition: $transition-base;
-  border: 1px solid transparent;
-}
-
 // button
 .ebs-button {
-  width: 100%;
+  @include fontMedium;
   cursor: pointer;
+  width: 100%;
   font-size: rem(13px);
   line-height: $btn-line-height;
   border-color: transparent;
   background: transparent;
   padding: 0;
   outline: none !important;
-  @include fontMedium;
-}
-
-.ebs-button-icon {
-  line-height: 0;
-}
-
-// button size
-.ebs-button__wrapper.ebs-button__size--large {
-  border-radius: $btn-border-radius-lg;
-}
-
-.ebs-button__wrapper.ebs-button__size--large .ebs-button {
-  padding: rem($btn-padding-y-lg $btn-padding-x-lg);
-  font-weight: $btn-font-weight-lg;
-  font-size: rem($btn-font-size-lg);
-}
-
-.ebs-button__wrapper.ebs-button__size--medium {
-  border-radius: $btn-border-radius;
-}
-
-.ebs-button__wrapper.ebs-button__size--medium .ebs-button {
-  padding: rem($btn-padding-y $btn-padding-x);
-  font-weight: $btn-font-weight;
-  font-size: rem($btn-font-size);
-}
-
-.ebs-button__wrapper.ebs-button__size--small {
-  border-radius: $btn-border-radius-sm;
-}
 
-.ebs-button__wrapper.ebs-button__size--small .ebs-button {
-  padding: rem($btn-padding-y-sm $btn-padding-x-sm);
-  font-weight: $btn-font-weight-sm;
-  font-size: rem($btn-font-size-sm);
-  line-height: $btn-line-height-sm;
-}
-
-// button type (Color)
-.ebs-button__wrapper.ebs-button__type--primary {
-  border-color: $primary-color;
-  background-color: $primary-color;
-  color: $white;
-}
-
-.ebs-button__wrapper.ebs-button__type--primary:hover,
-.ebs-button__wrapper.ebs-button__type--primary.hover {
-  border-color: $primary-600;
-  background-color: $primary-600;
-}
-
-.ebs-button__wrapper.ebs-button__type--primary:active,
-.ebs-button__wrapper.ebs-button__type--primary.active {
-  border-color: $primary-700;
-  background-color: $primary-700;
-}
-
-.ebs-button__wrapper.ebs-button__type--primary .ebs-button {
-  color: $white;
-
-  &:hover {
-    color: $white;
+  &--is-icon {
+    @include flex-center;
+    height: 100%;
   }
-}
 
-.ebs-button__wrapper.ebs-button__type--fill {
-  border-color: $primary-100;
-  background-color: $primary-100;
-  color: $primary-color;
-}
+  &--type-prefix button.ebs-button {
+    padding-left: rem(30px);
+  }
 
-.ebs-button__wrapper.ebs-button__type--fill .ebs-button {
-  color: $primary-color;
-}
+  &--type-icon {
+    display: flex;
+    align-items: center;
+  }
 
-.ebs-button__wrapper.ebs-button__type--fill:hover,
-.ebs-button__wrapper.ebs-button__type--fill.hover {
-  border-color: $primary-color;
-  background-color: $primary-color;
-  color: $white;
+  &--type-block {
+    width: 100%;
+    display: block;
+  }
 
-  .ebs-button {
+  // button type (Color)
+  &--type-primary {
+    border-color: $primary-color;
+    background-color: $primary-color;
     color: $white;
-  }
-}
 
-.ebs-button__wrapper.ebs-button__type--fill:active,
-.ebs-button__wrapper.ebs-button__type--fill.active {
-  border-color: $primary-600;
-  background-color: $primary-600;
-  color: $white;
+    &:hover,
+    &.hover {
+      border-color: $primary-600;
+      background-color: $primary-600;
+    }
+
+    &:active,
+    &.active {
+      border-color: $primary-700;
+      background-color: $primary-700;
+    }
+  }
 
-  .ebs-button {
+  &--type-primary & {
     color: $white;
+
+    :hover {
+      color: $white;
+    }
   }
-}
 
-.ebs-button__wrapper.ebs-button__type--ghost {
-  background-color: $btn-type-ghost-background;
-  border-color: $btn-type-ghost-border-color;
-  color: $btn-type-ghost-color;
-}
+  &--type-fill {
+    border-color: $primary-100;
+    background-color: $primary-100;
+    color: $primary-color;
+
+    &:hover,
+    &.hover {
+      border-color: $primary-color;
+      background-color: $primary-color;
+      color: $white;
+
+      .ebs-button {
+        color: $white;
+      }
+    }
+
+    &:active,
+    &.active {
+      border-color: $primary-600;
+      background-color: $primary-600;
+      color: $white;
+
+      .ebs-button {
+        color: $white;
+      }
+    }
+  }
 
-.ebs-button__wrapper.ebs-button__type--ghost .ebs-button {
-  color: $btn-type-ghost-color;
-}
+  &--type-fill & {
+    color: $primary-color;
+  }
 
-.ebs-button__wrapper.ebs-button__type--ghost:hover,
-.ebs-button__wrapper.ebs-button__type--ghost.hover {
-  border-color: $btn-type-ghost-hover-border-color;
-  background-color: $btn-type-ghost-hover-background;
-  color: $btn-type-ghost-hover-color;
+  &--type-ghost {
+    background-color: $btn-type-ghost-background;
+    border-color: $btn-type-ghost-border-color;
+    color: $btn-type-ghost-color;
+
+    &:hover,
+    &.hover {
+      border-color: $btn-type-ghost-hover-border-color;
+      background-color: $btn-type-ghost-hover-background;
+      color: $btn-type-ghost-hover-color;
+
+      .ebs-button {
+        color: $btn-type-ghost-hover-color;
+      }
+    }
+
+    &:active,
+    &.active {
+      border-color: $btn-type-ghost-active-border-color;
+      background-color: $btn-type-ghost-active-background;
+      color: $btn-type-ghost-active-color;
+
+      .ebs-button {
+        color: $btn-type-ghost-active-color;
+      }
+    }
+  }
 
-  .ebs-button {
-    color: $btn-type-ghost-hover-color;
+  &--type-ghost & {
+    color: $btn-type-ghost-color;
   }
-}
 
-.ebs-button__wrapper.ebs-button__type--ghost:active,
-.ebs-button__wrapper.ebs-button__type--ghost.active {
-  border-color: $btn-type-ghost-active-border-color;
-  background-color: $btn-type-ghost-active-background;
-  color: $btn-type-ghost-active-color;
+  &--type-text {
+    background-color: transparent;
+    color: $primary-color;
 
-  .ebs-button {
-    color: $btn-type-ghost-active-color;
-  }
-}
+    &:hover,
+    &.hover {
+      background-color: transparent;
 
-.ebs-button__wrapper.ebs-button__type--text {
-  background-color: transparent;
-  color: $primary-color;
-}
+      .ebs-button {
+        color: $primary-600;
+      }
+    }
 
-.ebs-button__wrapper.ebs-button__type--text .ebs-button {
-  color: $primary-color;
-}
+    &:active,
+    &.active {
+      background-color: transparent;
 
-.ebs-button__wrapper.ebs-button__type--text:hover,
-.ebs-button__wrapper.ebs-button__type--text.hover {
-  background-color: transparent;
+      .ebs-button {
+        color: $primary-700;
+      }
+    }
+  }
 
-  .ebs-button {
-    color: $primary-600;
+  &--type-text & {
+    color: $primary-color;
   }
-}
 
-.ebs-button__wrapper.ebs-button__type--text:active,
-.ebs-button__wrapper.ebs-button__type--text.active {
-  background-color: transparent;
+  &--type-disabled {
+    background-color: $border-color;
 
-  .ebs-button {
-    color: $primary-700;
+    .ebs-button {
+      cursor: not-allowed;
+      color: $grey-500;
+    }
   }
-}
 
-.ebs-button__wrapper.ebs-button__type--disabled {
-  background-color: $border-color;
+  // button size
+  &--size-large {
+    border-radius: $btn-border-radius-lg;
+  }
 
-  .ebs-button {
-    cursor: not-allowed;
-    color: $grey-500;
+  &--size-large & {
+    padding: rem($btn-padding-y-lg $btn-padding-x-lg);
+    font-weight: $btn-font-weight-lg;
+    font-size: rem($btn-font-size-lg);
   }
-}
 
-.ebs-button__wrapper.has-prefix .ebs-button {
-  padding-left: rem(30px);
-}
+  &--size-medium {
+    border-radius: $btn-border-radius;
+  }
 
-.ebs-button__wrapper.has-icon {
-  display: flex;
-  align-items: center;
-}
+  &--size-medium & {
+    padding: rem($btn-padding-y $btn-padding-x);
+    font-weight: $btn-font-weight;
+    font-size: rem($btn-font-size);
+  }
 
-.ebs-button__wrapper.block {
-  width: 100%;
-  display: block;
-}
+  &--size-small {
+    border-radius: $btn-border-radius-sm;
+  }
 
-.ebs-button__loading {
-  position: absolute;
-  left: 0;
-  top: 0;
-  height: 100%;
-  width: 100%;
-  border-radius: rem($border-radius);
-  pointer-events: none;
-}
+  &--size-small & {
+    padding: rem($btn-padding-y-sm $btn-padding-x-sm);
+    font-weight: $btn-font-weight-sm;
+    font-size: rem($btn-font-size-sm);
+    line-height: $btn-line-height-sm;
+  }
 
-.ebs-button__loading-regular {
-  animation: regularFade 0.25s forwards;
-}
+  &__wrapper {
+    position: relative;
+    display: inline-block;
+    text-align: center;
+    border-radius: rem($border-radius);
+    transition: $transition-base;
+    border: 1px solid transparent;
+  }
 
-.ebs-button__loading .ebs-loader__spinner {
-  position: absolute;
-  left: calc(50% - 7.5px);
-  top: calc(50% - 7.5px);
-  transform: translate(-50%, -50%);
-}
+  &__loading {
+    position: absolute;
+    left: 0;
+    top: 0;
+    height: 100%;
+    width: 100%;
+    border-radius: rem($border-radius);
+    pointer-events: none;
+
+    &-regular {
+      animation: regularFade 0.25s forwards;
+    }
+
+    .ebs-loader__spinner {
+      position: absolute;
+      left: calc(50% - 7.5px);
+      top: calc(50% - 7.5px);
+      transform: translate(-50%, -50%);
+    }
+  }
 
-.ebs-button__prefix {
-  position: absolute;
-  left: rem(10px);
-  top: 50%;
-  transform: translateY(-50%);
-  pointer-events: none;
-  display: flex;
-  align-items: center;
-}
+  &__prefix {
+    position: absolute;
+    left: rem(10px);
+    top: 50%;
+    transform: translateY(-50%);
+    pointer-events: none;
+    display: flex;
+    align-items: center;
+  }
 
-.ebs-button__group {
-  display: flex;
-  flex-wrap: wrap;
-}
+  &__group {
+    display: flex;
+    flex-wrap: wrap;
 
-.ebs-button__group > .ebs-button__wrapper:first-child {
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-}
+    .ebs-button__wrapper:first-child {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
 
-.ebs-button__group > .ebs-button__wrapper:not(:first-child):not(:last-child) {
-  border-radius: 0;
-}
+    .ebs-button__wrapper:not(:first-child):not(:last-child) {
+      border-radius: 0;
+    }
 
-.ebs-button__group > .ebs-button__wrapper:not(:last-child) {
-  border-right: none;
-}
+    .ebs-button__wrapper:not(:last-child) {
+      border-right: none;
+    }
 
-.ebs-button__group > .ebs-button__wrapper:last-child {
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
+    .ebs-button__wrapper:last-child {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+  }
 }
diff --git a/src/components/atoms/Button/Button.tsx b/src/components/atoms/Button/Button.tsx
index c6934808..0c9dac39 100644
--- a/src/components/atoms/Button/Button.tsx
+++ b/src/components/atoms/Button/Button.tsx
@@ -38,13 +38,13 @@ export const Button: React.FC<ButtonProps> = ({
     <div
       className={cn(
         `ebs-button__wrapper`,
-        `ebs-button__size--${size}`,
-        `ebs-button__type--${props.disabled ? 'disabled' : type}`,
+        `ebs-button--size-${size}`,
+        `ebs-button--type-${props.disabled ? 'disabled' : type}`,
         className,
         {
-          block: block,
-          'has-prefix': prefix,
-          'has-icon': icon,
+          'ebs-button--type-block': block,
+          'ebs-button--type-prefix': prefix,
+          'ebs-button--type-icon': icon,
         },
       )}
       onClick={onClick}
@@ -60,7 +60,7 @@ export const Button: React.FC<ButtonProps> = ({
 
       <button
         type={submit ? 'submit' : 'button'}
-        className={cn(`ebs-button`, buttonClass, { 'ebs-button-icon': icon })}
+        className={cn(`ebs-button`, buttonClass, { 'ebs-button--is-icon': icon })}
         disabled={props.disabled || loading}
         {...props}
       >
diff --git a/src/components/atoms/Card/Card.scss b/src/components/atoms/Card/Card.scss
index 804371fb..f8ffdc4c 100644
--- a/src/components/atoms/Card/Card.scss
+++ b/src/components/atoms/Card/Card.scss
@@ -5,48 +5,47 @@
   justify-content: space-between;
   align-items: center;
   padding-top: rem($gutter-size);
-}
 
-.ebs-card__header-title {
-  font-size: rem(14px);
-  @include fontBold;
-  margin-right: rem($gutter-size);
-  white-space: nowrap;
-}
+  &-title {
+    font-size: rem(14px);
+    @include fontBold;
+    margin-right: rem($gutter-size);
+    white-space: nowrap;
+  }
 
-.ebs-card__header-side--right {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  text-align: right;
+  &-side--right {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    text-align: right;
 
-  @include mq($until: tablet) {
-    text-align: left;
+    @include mq($until: tablet) {
+      text-align: left;
+    }
   }
-}
 
-.ebs-card__header-side--right > *:not(:first-child) {
-  margin-left: rem(15px);
-}
+  &-side--left,
+  &-side--right {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
 
-.ebs-card__header-side--right .picker-label {
-  margin-right: 0;
-}
+    > * {
+      margin-bottom: rem($gutter-size);
+    }
+  }
 
-.ebs-card__header-side--left > *:not(:last-child) {
-  margin-right: rem(15px);
-}
+  &-side--right > *:not(:first-child) {
+    margin-left: rem(15px);
+  }
 
-.ebs-card__header-side--left,
-.ebs-card__header-side--right {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-}
+  &-side--right .picker-label {
+    margin-right: 0;
+  }
 
-.ebs-card__header-side--left > *,
-.ebs-card__header-side--right > * {
-  margin-bottom: rem($gutter-size);
+  &-side--left > *:not(:last-child) {
+    margin-right: rem(15px);
+  }
 }
 
 // FOOTER
@@ -56,25 +55,25 @@
   display: flex;
   border: 1px solid $border-color;
   border-top: unset;
-}
 
-.ebs-card__footer-side--left {
-  position: relative;
-}
+  &-side--left {
+    position: relative;
+  }
 
-.ebs-card__footer-side--right {
-  width: 100%;
-  text-align: right;
-}
+  &-side--right {
+    width: 100%;
+    text-align: right;
 
-.ebs-card__footer-side--right .ebs-button__wrapper:not(:last__child) {
-  margin-right: rem(10px);
-}
+    .ebs-button__wrapper:not(:last__child) {
+      margin-right: rem(10px);
+    }
+  }
 
-.ebs-card__footer .ebs-button__wrapper {
-  @include elevation-1;
+  .ebs-button__wrapper {
+    @include elevation-1;
 
-  &:not(:last-child) {
-    margin-right: rem(10px);
+    &:not(:last-child) {
+      margin-right: rem(10px);
+    }
   }
 }
diff --git a/src/components/atoms/Chips/Chips.scss b/src/components/atoms/Chips/Chips.scss
index 58994ca5..780b7974 100644
--- a/src/components/atoms/Chips/Chips.scss
+++ b/src/components/atoms/Chips/Chips.scss
@@ -1,82 +1,82 @@
 .ebs-chips {
+  cursor: pointer;
   position: relative;
   padding: rem(4px 8px);
   font-size: rem(12px);
   border: 1px solid transparent;
   border-radius: rem(16px);
   background-color: transparent;
-  cursor: pointer;
   transition: all $transition-time;
-}
 
-.ebs-chips.ebs-chips-checked {
-  background-color: $primary-000;
-  border-color: $primary-color;
-  color: $primary-color;
-}
+  &-checked {
+    background-color: $primary-000;
+    border-color: $primary-color;
+    color: $primary-color;
 
-.ebs-chips.ebs-chips-checked:hover {
-  background-color: $primary-color;
-  border-color: $primary-color;
-  color: $white;
-}
+    &:hover {
+      background-color: $primary-color;
+      border-color: $primary-color;
+      color: $white;
+    }
+  }
 
-.ebs-chips.ebs-chips-unchecked {
-  background-color: transparent;
-  border-color: $text-color-light;
-  color: $text-color-secondary;
-}
+  &-unchecked {
+    background-color: transparent;
+    border-color: $text-color-light;
+    color: $text-color-secondary;
 
-.ebs-chips.ebs-chips-unchecked:hover {
-  background-color: transparent;
-  border-color: $primary-400;
-  color: $primary-400;
-}
+    &:hover {
+      background-color: transparent;
+      border-color: $primary-400;
+      color: $primary-400;
+    }
+  }
 
-.ebs-chips.has-prefix {
-  padding-left: rem(28px);
-}
+  &__prefix {
+    position: absolute;
+    left: rem(9px);
+    top: calc(50% + 1px);
+    transform: translateY(-50%);
+  }
 
-.ebs-chips.has-suffix {
-  padding-right: rem(28px);
-}
+  &__prefix .ebs-icon {
+    font-size: rem(12px);
+  }
 
-.ebs-chips.disabled {
-  cursor: not-allowed;
-}
+  &__suffix {
+    position: absolute;
+    right: rem(9px);
+    top: calc(50% + 1px);
+    transform: translateY(-50%);
+  }
 
-.ebs-chips.disabled.ebs-chips-checked,
-.ebs-chips.disabled.ebs-chips-checked:hover {
-  background-color: $border-color;
-  border-color: $border-color;
-  color: $grey-500;
-}
+  &__suffix .ebs-icon {
+    font-size: rem(12px);
+  }
 
-.ebs-chips.disabled.ebs-chips-unchecked,
-.ebs-chips.disabled.ebs-chips-unchecked:hover {
-  background-color: transparent;
-  border-color: $border-color;
-  color: $border-color;
-}
+  &.has-prefix {
+    padding-left: rem(28px);
+  }
 
-.ebs-chips__prefix {
-  position: absolute;
-  left: rem(9px);
-  top: calc(50% + 1px);
-  transform: translateY(-50%);
-}
+  &.has-suffix {
+    padding-right: rem(28px);
+  }
 
-.ebs-chips__prefix .ebs-icon {
-  font-size: rem(12px);
-}
+  &.disabled {
+    cursor: not-allowed;
+  }
 
-.ebs-chips__suffix {
-  position: absolute;
-  right: rem(9px);
-  top: calc(50% + 1px);
-  transform: translateY(-50%);
-}
+  &.disabled,
+  &.disabled:hover {
+    background-color: $border-color;
+    border-color: $border-color;
+    color: $grey-500;
+  }
 
-.ebs-chips__suffix .ebs-icon {
-  font-size: rem(12px);
+  &.disabled,
+  &.disabled:hover {
+    background-color: transparent;
+    border-color: $border-color;
+    color: $border-color;
+  }
 }
diff --git a/src/components/atoms/Collapse/Collapse.scss b/src/components/atoms/Collapse/Collapse.scss
index 038c2bd0..1e2f5e98 100644
--- a/src/components/atoms/Collapse/Collapse.scss
+++ b/src/components/atoms/Collapse/Collapse.scss
@@ -4,41 +4,41 @@
   border-color: $collapse-border-color;
   border-radius: $collapse-border-radius;
   transition: height 600ms ease-out;
-}
 
-.ebs-collapse.collapsed .ebs-collapse__header {
-  border-bottom: none;
-}
+  &.collapsed &__header {
+    border-bottom: none;
+  }
 
-.ebs-collapse__header {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
-  border-bottom: $collapse-header-border-bottom;
-  border-bottom-color: $collapse-header-border-bottom-color;
-  padding: rem(10px);
-}
+  &__header {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    border-bottom: $collapse-header-border-bottom;
+    border-bottom-color: $collapse-header-border-bottom-color;
+    padding: rem(10px);
+  }
 
-.ebs-collapse__header__side-left,
-.ebs-collapse__header__side-right {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-}
+  &__header__side-left,
+  &__header__side-right {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+  }
 
-.ebs-collapse__header__side-right {
-  text-align: right;
-}
+  &__header__side-right {
+    text-align: right;
+  }
 
-.ebs-collapse__header-action {
-  margin-left: rem(10px);
-}
+  &__header-action {
+    margin-left: rem(10px);
 
-.ebs-collapse__header-action svg {
-  width: rem(12px);
-}
+    svg {
+      width: rem(12px);
+    }
+  }
 
-.ebs-collapse__title {
-  margin-right: rem(10px);
-  cursor: pointer;
+  &__title {
+    margin-right: rem(10px);
+    cursor: pointer;
+  }
 }
diff --git a/src/components/atoms/Extra/Extra.scss b/src/components/atoms/Extra/Extra.scss
index 2dcff97f..008f8c9e 100644
--- a/src/components/atoms/Extra/Extra.scss
+++ b/src/components/atoms/Extra/Extra.scss
@@ -3,37 +3,37 @@
   color: $text-color-secondary;
   @include fontRegular;
   font-size: rem(10px);
-}
 
-.ebs-extra.has-error {
-  color: $danger-color;
-}
+  &.has-error {
+    color: $danger-color;
+  }
 
-.ebs-extra.disabled {
-  color: $grey-500;
-}
+  &.disabled {
+    color: $grey-500;
+  }
 
-.ebs-extra.ebs-extra__status--success {
-  color: $success-color;
-  border-color: $success-color;
-}
+  &__status--success {
+    color: $success-color;
+    border-color: $success-color;
+  }
 
-.ebs-extra.ebs-extra__status--warning {
-  color: $warning-color;
-  border-color: $warning-color;
-}
+  &__status--warning {
+    color: $warning-color;
+    border-color: $warning-color;
+  }
 
-.ebs-extra.ebs-extra__status--danger {
-  color: $danger-color;
-  border-color: $danger-color;
-}
+  &__status--danger {
+    color: $danger-color;
+    border-color: $danger-color;
+  }
 
-.ebs-extra.ebs-extra__status--info {
-  color: $info-color;
-  border-color: $info-color;
-}
+  &__status--info {
+    color: $info-color;
+    border-color: $info-color;
+  }
 
-.ebs-extra.ebs-extra__status--text {
-  color: $text-color;
-  border-color: $text-color;
+  &__status--text {
+    color: $text-color;
+    border-color: $text-color;
+  }
 }
diff --git a/src/components/atoms/Icon/Icon.scss b/src/components/atoms/Icon/Icon.scss
index c963c174..59416f05 100644
--- a/src/components/atoms/Icon/Icon.scss
+++ b/src/components/atoms/Icon/Icon.scss
@@ -1,15 +1,15 @@
 .ebs-icon {
   font-size: rem(16px);
-}
 
-.ebs-icon__type-arrow-right {
-  transform: rotate(90deg);
-}
+  &__type-arrow-right {
+    transform: rotate(90deg);
+  }
 
-.ebs-icon__type-arrow--bottom {
-  transform: rotate(180deg);
-}
+  &__type-arrow--bottom {
+    transform: rotate(180deg);
+  }
 
-.ebs-icon__type-arrow--left {
-  transform: rotate(270deg);
+  &__type-arrow--left {
+    transform: rotate(270deg);
+  }
 }
diff --git a/src/components/atoms/Input/Input.scss b/src/components/atoms/Input/Input.scss
index b8a344f6..eb9d0670 100644
--- a/src/components/atoms/Input/Input.scss
+++ b/src/components/atoms/Input/Input.scss
@@ -4,85 +4,54 @@
   border: 1px solid $border-color;
   background-color: $white;
   border-radius: rem($border-radius);
-}
 
-.ebs-input__wrapper.has-prefix .ebs-input {
-  padding-left: rem(37.5px);
-}
+  &.has-prefix .ebs-input {
+    padding-left: rem(37.5px);
+  }
 
-.ebs-input__wrapper.has-suffix .ebs-input {
-  padding-right: rem(37.5px);
-}
+  &.has-suffix .ebs-input {
+    padding-right: rem(37.5px);
+  }
 
-.ebs-input__wrapper--active,
-.ebs-input__wrapper.focus {
-  border-color: $primary-color;
-  background-color: $white !important;
+  &--active,
+  &.focus {
+    border-color: $primary-color;
+    background-color: $white !important;
 
-  .ebs-input {
-    color: $heading-color;
+    .ebs-input {
+      color: $heading-color;
+    }
   }
-}
-
-.ebs-input__wrapper--unactive {
-  border-color: $border-color;
-  background-color: $white;
-}
 
-.ebs-input__wrapper.has-error {
-  border-color: $danger-color;
-  background-color: $white;
-}
+  &--unactive {
+    border-color: $border-color;
+    background-color: $white;
+  }
 
-.ebs-input__wrapper.disabled {
-  border-color: $grey-500;
-  background-color: $white;
+  &.has-error {
+    border-color: $danger-color;
+    background-color: $white;
+  }
 
-  .ebs-input {
-    color: $grey-500;
-    cursor: not-allowed;
+  &.disabled {
+    border-color: $grey-500;
+    background-color: $white;
 
-    @include placeholder {
+    .ebs-input {
       color: $grey-500;
+      cursor: not-allowed;
+
+      @include placeholder {
+        color: $grey-500;
+      }
     }
   }
-}
 
-.ebs-input__wrapper.ebs-input__style-grey {
-  background-color: $grey-50;
-}
-
-.ebs-input__prefix,
-.ebs-input__suffix {
-  position: absolute;
-  left: rem(10px);
-  top: 50%;
-  transform: translateY(-50%);
-  display: flex;
-  align-items: center;
-
-  .ebs-icon {
-    font-size: rem(16px);
+  &.ebs-input__style-grey {
+    background-color: $grey-50;
   }
 }
 
-.ebs-input__prefix.clickable,
-.ebs-input__suffix.clickable {
-  cursor: pointer;
-  z-index: 2;
-}
-
-.ebs-input__prefix.not-clickable,
-.ebs-input__suffix.not-clickable {
-  cursor: pointer;
-  z-index: 2;
-}
-
-.ebs-input__suffix {
-  left: inherit;
-  right: rem(10px);
-}
-
 // input html element
 .ebs-input {
   @include fontRegular;
@@ -98,13 +67,44 @@
   @include placeholder {
     color: $text-color-secondary;
   }
-}
 
-.ebs-input:focus {
-  outline: none !important;
-}
+  &:focus {
+    outline: none !important;
+  }
 
-.ebs-input-container {
-  position: relative;
-  width: 100%;
+  &-container {
+    position: relative;
+    width: 100%;
+  }
+
+  &__prefix,
+  &__suffix {
+    position: absolute;
+    left: rem(10px);
+    top: 50%;
+    transform: translateY(-50%);
+    display: flex;
+    align-items: center;
+
+    .ebs-icon {
+      font-size: rem(16px);
+    }
+  }
+
+  &__prefix.clickable,
+  &__suffix.clickable {
+    cursor: pointer;
+    z-index: 2;
+  }
+
+  &__prefix.not-clickable,
+  &__suffix.not-clickable {
+    cursor: pointer;
+    z-index: 2;
+  }
+
+  &__suffix {
+    left: inherit;
+    right: rem(10px);
+  }
 }
diff --git a/src/components/atoms/Label/Label.scss b/src/components/atoms/Label/Label.scss
index 5f92b343..a6ea345c 100644
--- a/src/components/atoms/Label/Label.scss
+++ b/src/components/atoms/Label/Label.scss
@@ -3,142 +3,143 @@
   position: relative;
   white-space: nowrap;
   @include fontRegular;
-}
 
-.ebs-label-regular {
-  font-size: rem(12px);
-  margin-bottom: rem(5px);
-  color: $text-color;
-}
+  &--type-regular {
+    font-size: rem(12px);
+    margin-bottom: rem(5px);
+    color: $text-color;
+  }
 
-.ebs-label.ebs-label-circle,
-.ebs-label.ebs-label-fill {
-  display: inline;
-  font-size: rem(10px);
-  padding: rem(5px 12px);
-  border: 1px solid $text-color;
-  border-radius: rem(12px);
-}
+  &--type-circle,
+  &--type-fill {
+    display: inline;
+    font-size: rem(10px);
+    padding: rem(5px 12px);
+    border: 1px solid $text-color;
+    border-radius: rem(12px);
+  }
 
-.ebs-label.ebs-label--circle {
-  color: $text-color;
-}
+  &--type-circle {
+    color: $text-color;
+  }
 
-.ebs-label.ebs-label-fill {
-  color: $white !important;
-  background: $text-color;
-  border-radius: rem(12px);
-}
+  &--type-fill {
+    color: $white !important;
+    background: $text-color;
+    border-radius: rem(12px);
 
-.ebs-label.ebs-label-fill.ebs-label__status--success {
-  background-color: $success-color;
-}
+    &.ebs-label--status-success {
+      background-color: $success-color;
+    }
 
-.ebs-label.ebs-label-fill.ebs-label__status--warning {
-  background-color: $warning-color;
-}
+    &.ebs-label--status-warning {
+      background-color: $warning-color;
+    }
 
-.ebs-label.ebs-label-fill.ebs-label__status--danger {
-  background-color: $danger-color;
-}
+    &.ebs-label--status-danger {
+      background-color: $danger-color;
+    }
 
-.ebs-label.ebs-label-fill.ebs-label__status--info {
-  background-color: $info-color;
-}
+    &.ebs-label--status-info {
+      background-color: $info-color;
+    }
 
-.ebs-label.ebs-label-fill.ebs-label__status--text {
-  background-color: $text-color;
-}
+    &.ebs-label--status-text {
+      background-color: $text-color;
+    }
 
-.ebs-label.ebs-label-fill.disabled {
-  cursor: not-allowed;
-  color: $grey-500 !important;
-  background: $grey-100;
-}
+    &.disabled {
+      cursor: not-allowed;
+      color: $grey-500 !important;
+      background: $grey-100;
+    }
+  }
 
-.ebs-label.ebs-label__status--success {
-  color: $success-color;
-  border-color: $success-color;
-}
+  &--status-success {
+    color: $success-color;
+    border-color: $success-color;
+  }
 
-.ebs-label.ebs-label__status--warning {
-  color: $warning-color;
-  border-color: $warning-color;
-}
+  &--status-warning {
+    color: $warning-color;
+    border-color: $warning-color;
+  }
 
-.ebs-label.ebs-label__status--danger {
-  color: $danger-color;
-  border-color: $danger-color;
+  &--status-danger {
+    color: $danger-color;
+    border-color: $danger-color;
+  }
 
-  &.is-icon-info {
+  &--status-danger.ebs-label--type-icon {
     background: $white;
     border-color: $white;
+
     .ebs-icon {
       color: $danger-color;
     }
   }
-}
 
-.ebs-label.ebs-label__status--info {
-  color: $info-color;
-  border-color: $info-color;
-}
+  &--status-info {
+    color: $info-color;
+    border-color: $info-color;
+  }
 
-.ebs-label.ebs-label__status--text {
-  color: $text-color;
-  border-color: $text-color;
-}
+  &--status-text {
+    color: $text-color;
+    border-color: $text-color;
+  }
 
-.ebs-label.ebs-label__status--primary {
-  background-color: $primary-000;
-  color: $primary-color;
-  border-color: $primary-color;
-}
+  &--status-primary {
+    background-color: $primary-000;
+    color: $primary-color;
+    border-color: $primary-color;
+  }
 
-.ebs-label.disabled {
-  cursor: not-allowed;
-  color: $grey-500;
-  border-color: $grey-500;
-}
+  &.disabled {
+    cursor: not-allowed;
+    color: $grey-500;
+    border-color: $grey-500;
+  }
 
-.ebs-label.has-prefix,
-.ebs-label.has-prefix.ebs-label__circle {
-  padding-left: rem(22.5px);
-}
+  &.has-prefix,
+  &.has-prefix.ebs-label--type-circle {
+    padding-left: rem(22.5px);
+  }
 
-.ebs-label.has-suffix,
-.ebs-label.has-suffix.ebs-label__circle {
-  padding-right: rem(27.5px);
-}
+  &.has-suffix,
+  &.has-suffix.ebs-label--type-circle {
+    padding-right: rem(27.5px);
+  }
 
-.ebs-label.is-icon {
-  @include flex-center;
-  width: $gutter-size;
-  height: $gutter-size;
-  float: left;
-  padding: 0;
-  margin-right: $gutter-size / 2;
-}
+  &--type-icon {
+    @include flex-center;
+    width: $gutter-size;
+    height: $gutter-size;
+    float: left;
+    padding: 0;
+    margin-right: $gutter-size / 2;
+  }
 
-.ebs-label__prefix,
-.ebs-label__suffix {
-  position: absolute;
-  top: calc(50% + 1px);
-  transform: translateY(-50%);
+  &__prefix,
+  &__suffix {
+    position: absolute;
+    top: calc(50% + 1px);
+    transform: translateY(-50%);
 
-  .ebs-icon__close:hover svg {
-    opacity: 0.5;
-  }
+    .ebs-icon__close:hover svg {
+      opacity: 0.5;
+    }
 
-  svg {
-    font-size: rem(12px);
+    svg {
+      font-size: rem(12px);
+    }
   }
-}
 
-.ebs-label__prefix {
-  left: rem(7.5px);
-}
+  &__prefix {
+    left: rem(7.5px);
+  }
 
-.ebs-label__suffix {
-  right: rem(7.5px);
+  &__suffix {
+    right: rem(7.5px);
+  }
 }
diff --git a/src/components/atoms/Label/Label.tsx b/src/components/atoms/Label/Label.tsx
index ac951d3d..3b9659df 100644
--- a/src/components/atoms/Label/Label.tsx
+++ b/src/components/atoms/Label/Label.tsx
@@ -41,11 +41,11 @@ export const Label: React.FC<Props> = ({
 
   return (
     <div
-      className={cn(`ebs-label`, `ebs-label-${type}`, `ebs-label__status--${status}`, className, {
+      className={cn(`ebs-label`, `ebs-label--type-${type}`, `ebs-label--status-${status}`, className, {
+        'ebs-label--type-icon': icon,
+        'ebs-label--type-icon-info': icon && icon.props && icon.props.type === 'info',
         'has-prefix': prefix,
         'has-suffix': suffix,
-        'is-icon': icon,
-        'is-icon-info': icon && icon.props && icon.props.type === 'info',
         disabled: disabled,
       })}
       style={style}
diff --git a/src/components/atoms/LoaderSpinner/LoaderSpinner.scss b/src/components/atoms/LoaderSpinner/LoaderSpinner.scss
index 6328ecd4..afb8b45f 100644
--- a/src/components/atoms/LoaderSpinner/LoaderSpinner.scss
+++ b/src/components/atoms/LoaderSpinner/LoaderSpinner.scss
@@ -19,29 +19,27 @@
   animation-iteration-count: infinite;
   animation-timing-function: linear;
 
-  &.ebs-loader__spinner-size {
-    &--small {
-      border: 2px solid $grey-500;
-      border-top: 2px solid $primary-color;
-      width: rem(15px);
-      height: rem(15px);
-      top: calc(50% - 5px);
-    }
+  &--size-small {
+    border: 2px solid $grey-500;
+    border-top: 2px solid $primary-color;
+    width: rem(15px);
+    height: rem(15px);
+    top: calc(50% - 5px);
+  }
 
-    &--middle {
-      border: 2px solid $grey-500;
-      border-top: 2px solid $primary-color;
-      width: rem(20px);
-      height: rem(20px);
-      top: calc(50% - 10px);
-    }
+  &--size-middle {
+    border: 2px solid $grey-500;
+    border-top: 2px solid $primary-color;
+    width: rem(20px);
+    height: rem(20px);
+    top: calc(50% - 10px);
+  }
 
-    &--regular {
-      border: 6px solid $grey-500;
-      border-top: 6px solid $primary-color;
-      width: rem(60px);
-      height: rem(60px);
-      top: calc(50% - 20px);
-    }
+  &--size-regular {
+    border: 6px solid $grey-500;
+    border-top: 6px solid $primary-color;
+    width: rem(60px);
+    height: rem(60px);
+    top: calc(50% - 20px);
   }
 }
diff --git a/src/components/atoms/LoaderSpinner/LoaderSpinner.tsx b/src/components/atoms/LoaderSpinner/LoaderSpinner.tsx
index c7d97147..2cf150ce 100644
--- a/src/components/atoms/LoaderSpinner/LoaderSpinner.tsx
+++ b/src/components/atoms/LoaderSpinner/LoaderSpinner.tsx
@@ -10,5 +10,5 @@ export interface Props {
 }
 
 export const LoaderSpinner: React.FC<Props> = ({ fixed, size = 'regular', className }) => (
-  <div className={cn(`ebs-loader__spinner`, `ebs-loader__spinner-size--${size}`, className, { fixed: fixed })} />
+  <div className={cn(`ebs-loader__spinner`, `ebs-loader__spinner--size-${size}`, className, { fixed: fixed })} />
 );
diff --git a/src/components/atoms/Mask/Mask.scss b/src/components/atoms/Mask/Mask.scss
index b23081e8..d7fef715 100644
--- a/src/components/atoms/Mask/Mask.scss
+++ b/src/components/atoms/Mask/Mask.scss
@@ -6,4 +6,5 @@
   height: 100vh;
   z-index: 990;
   animation: fadeIn 0.3s forwards;
+  background: rgba(0, 0, 0, 0.4);
 }
diff --git a/src/components/atoms/Radio/Radio.scss b/src/components/atoms/Radio/Radio.scss
index 7f5712b9..b5843bd2 100644
--- a/src/components/atoms/Radio/Radio.scss
+++ b/src/components/atoms/Radio/Radio.scss
@@ -1,133 +1,135 @@
-.ebs-radio__group.vertical {
-  display: flex;
-  flex-wrap: wrap;
-}
-
-.ebs-radio__group.ebs-radio__align--left {
-  .ebs-radio {
-    right: inherit;
-    left: 0;
+.ebs-radio__group {
+  &.vertical {
+    display: flex;
+    flex-wrap: wrap;
   }
 
-  .ebs-radio__text {
-    padding-left: rem(26px);
-  }
-}
-
-.ebs-radio__group.ebs-radio__align--right {
-  .ebs-radio {
-    left: inherit;
-    right: 0;
-  }
+  &.ebs-radio__align--left {
+    .ebs-radio {
+      right: inherit;
+      left: 0;
 
-  .ebs-radio__text {
-    padding-right: rem(26px);
-    width: rem(160px);
+      &__text {
+        padding-left: rem(26px);
+      }
+    }
   }
-}
 
-.ebs-radio__group .ebs-radio__wrapper {
-  position: relative;
-}
-
-.ebs-radio__group .ebs-radio__wrapper:not(:last-child) {
-  margin-bottom: rem(5px);
-}
+  &.ebs-radio__align--right {
+    .ebs-radio {
+      left: inherit;
+      right: 0;
 
-.ebs-radio__group .ebs-radio__wrapper.disabled {
-  .ebs-radio__input {
-    cursor: not-allowed;
+      &__text {
+        padding-right: rem(26px);
+        width: rem(160px);
+      }
+    }
   }
 
-  .ebs-radio__text {
-    color: $grey-500;
-  }
+  .ebs-radio__wrapper {
+    position: relative;
 
-  .ebs-radio,
-  .ebs-radio__input:hover ~ .ebs-radio {
-    background-color: transparent;
-
-    .ebs-radio__dot {
-      border: 1px solid $border-color;
-      box-shadow: none;
-      background-color: transparent;
+    &:not(:last-child) {
+      margin-bottom: rem(5px);
     }
-  }
 
-  .ebs-radio__input:checked ~ .ebs-radio,
-  .ebs-radio__input:checked:hover ~ .ebs-radio {
-    background-color: transparent;
+    &.has-text .ebs-radio {
+      position: absolute;
+      top: rem(-2px);
+    }
 
-    .ebs-radio__dot {
-      border: 1px solid $grey-500;
-      box-shadow: 0px 0px 0px 3px $white inset;
-      background-color: $grey-500;
+    &.disabled {
+      .ebs-radio__input {
+        cursor: not-allowed;
+      }
+
+      .ebs-radio__text {
+        color: $grey-500;
+      }
+
+      .ebs-radio,
+      .ebs-radio__input:hover ~ .ebs-radio {
+        background-color: transparent;
+
+        &__dot {
+          border: 1px solid $border-color;
+          box-shadow: none;
+          background-color: transparent;
+        }
+      }
+
+      .ebs-radio__input:checked ~ .ebs-radio,
+      .ebs-radio__input:checked:hover ~ .ebs-radio {
+        background-color: transparent;
+
+        &__dot {
+          border: 1px solid $grey-500;
+          box-shadow: 0px 0px 0px 3px $white inset;
+          background-color: $grey-500;
+        }
+      }
     }
   }
-}
 
-.ebs-radio__group .ebs-radio__wrapper.has-text .ebs-radio {
-  position: absolute;
-  top: rem(-2px);
-}
-
-.ebs-radio__group .ebs-radio__input {
-  position: absolute;
-  left: 0;
-  top: 0;
-  height: 100%;
-  width: 100%;
-  opacity: 0;
-  cursor: pointer;
-}
+  .ebs-radio__input {
+    position: absolute;
+    left: 0;
+    top: 0;
+    height: 100%;
+    width: 100%;
+    opacity: 0;
+    cursor: pointer;
+
+    &:hover ~ .ebs-radio {
+      background-color: $primary-100;
+
+      &__dot {
+        border-color: $primary-color;
+        background-color: $primary-100;
+      }
+    }
 
-.ebs-radio__group .ebs-radio__input:hover ~ .ebs-radio {
-  background-color: $primary-100;
+    &:checked:hover ~ .ebs-radio {
+      background-color: $primary-100;
 
-  .ebs-radio__dot {
-    border-color: $primary-color;
-    background-color: $primary-100;
-  }
-}
-
-.ebs-radio__group .ebs-radio__input:checked:hover ~ .ebs-radio {
-  background-color: $primary-100;
+      &__dot {
+        border-color: $primary-color;
+        background-color: $primary-color;
+        box-shadow: 0px 0px 0px 3px $primary-100 inset;
+      }
+    }
 
-  .ebs-radio__dot {
-    border-color: $primary-color;
-    background-color: $primary-color;
-    box-shadow: 0px 0px 0px 3px $primary-100 inset;
+    &:checked ~ .ebs-radio .ebs-radio__dot {
+      border-color: $primary-color;
+      background-color: $primary-color;
+      box-shadow: 0px 0px 0px 3px $white inset;
+    }
   }
-}
 
-.ebs-radio__group .ebs-radio__input:checked ~ .ebs-radio .ebs-radio__dot {
-  border-color: $primary-color;
-  background-color: $primary-color;
-  box-shadow: 0px 0px 0px 3px $white inset;
-}
+  .ebs-radio {
+    transition: all $transition-time;
+    width: rem(20px);
+    height: rem(20px);
+    background-color: transparent;
+    pointer-events: none;
+    border-radius: 50%;
 
-.ebs-radio__group .ebs-radio {
-  transition: all $transition-time;
-  width: rem(20px);
-  height: rem(20px);
-  background-color: transparent;
-  pointer-events: none;
-  border-radius: 50%;
+    &__dot {
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      width: rem(16px);
+      height: rem(16px);
+      border: 1px solid $border-color;
+      border-radius: 50%;
+      background-color: transparent;
+    }
 
-  .ebs-radio__dot {
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    transform: translate(-50%, -50%);
-    width: rem(16px);
-    height: rem(16px);
-    border: 1px solid $border-color;
-    border-radius: 50%;
-    background-color: transparent;
+    &__text {
+      color: $text-color;
+      font-size: rem(14px);
+    }
   }
 }
-
-.ebs-radio__group .ebs-radio__text {
-  color: $text-color;
-  font-size: rem(14px);
-}
diff --git a/src/components/atoms/Switch/Switch.scss b/src/components/atoms/Switch/Switch.scss
index c76eea8c..551db4c7 100644
--- a/src/components/atoms/Switch/Switch.scss
+++ b/src/components/atoms/Switch/Switch.scss
@@ -4,80 +4,80 @@
   width: rem(32px);
   position: relative;
   cursor: pointer;
-}
 
-.ebs-switch.ebs-switch--unchecked {
-  background-color: $border-color;
+  &--unchecked {
+    background-color: $border-color;
 
-  .ebs-switch__dot {
-    border-color: $border-color;
-    background-color: $white;
-    box-shadow: 0px 0px 0px 2px $grey-500 inset;
-  }
-}
+    .ebs-switch__dot {
+      border-color: $border-color;
+      background-color: $white;
+      box-shadow: 0px 0px 0px 2px $grey-500 inset;
+    }
 
-.ebs-switch.ebs-switch--unchecked:hover .ebs-switch__dot {
-  border-color: $primary-200;
-  box-shadow: 0px 0px 0px 2px $primary-color inset;
-}
+    &:hover .ebs-switch__dot {
+      border-color: $primary-200;
+      box-shadow: 0px 0px 0px 2px $primary-color inset;
+    }
+  }
 
-.ebs-switch.ebs-switch--unchecked.disabled {
-  cursor: not-allowed;
-  background-color: $border-color;
+  &--unchecked.disabled {
+    cursor: not-allowed;
+    background-color: $border-color;
 
-  .ebs-switch__dot,
-  .ebs-switch__dot:hover {
-    background-color: $white;
-    border-color: $border-color;
+    .ebs-switch__dot,
+    .ebs-switch__dot:hover {
+      background-color: $white;
+      border-color: $border-color;
+    }
   }
-}
 
-.ebs-switch.ebs-switch--checked {
-  background-color: $primary-200;
+  &--checked {
+    background-color: $primary-200;
 
-  .ebs-switch__dot {
-    transform: translate(16px, -50%);
-    background-color: $primary-400;
-    border-color: $primary-200;
-  }
-}
+    .ebs-switch__dot {
+      transform: translate(16px, -50%);
+      background-color: $primary-400;
+      border-color: $primary-200;
+    }
 
-.ebs-switch.ebs-switch--checked:hover .ebs-switch__dot {
-  border-color: $primary-300;
-  box-shadow: 0px 0px 0px 2px $primary-color inset;
-}
+    &:hover .ebs-switch__dot {
+      border-color: $primary-300;
+      box-shadow: 0px 0px 0px 2px $primary-color inset;
+    }
+  }
 
-.ebs-switch.ebs-switch--checked.disabled {
-  cursor: not-allowed;
-  background-color: $primary-100;
+  &--checked.disabled {
+    cursor: not-allowed;
+    background-color: $primary-100;
 
-  .ebs-switch__dot,
-  .ebs-switch__dot:hover {
-    box-shadow: 0px 0px 0px 2px $primary-400 inset;
-    background-color: $primary-300;
-    border-color: $primary-100;
+    .ebs-switch__dot,
+    .ebs-switch__dot:hover {
+      box-shadow: 0px 0px 0px 2px $primary-400 inset;
+      background-color: $primary-300;
+      border-color: $primary-100;
+    }
   }
-}
 
-.ebs-switch__dot {
-  position: absolute;
-  left: 0;
-  top: 50%;
-  transform: translate(0, -50%);
-  width: rem(16px);
-  height: rem(16px);
-  border: 2px solid transparent;
-  box-shadow: 0px 0px 0px 2px $primary-color inset;
-  border-radius: 50%;
-  overflow: hidden;
-  transition: all $transition-time;
-}
+  &__dot {
+    position: absolute;
+    left: 0;
+    top: 50%;
+    transform: translate(0, -50%);
+    width: rem(16px);
+    height: rem(16px);
+    border: 2px solid transparent;
+    box-shadow: 0px 0px 0px 2px $primary-color inset;
+    border-radius: 50%;
+    overflow: hidden;
+    transition: all $transition-time;
+  }
 
-.ebs-switch__checked-sheet {
-  border-radius: rem(25px);
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
+  &__checked-sheet {
+    border-radius: rem(25px);
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+  }
 }
diff --git a/src/components/atoms/Tooltip/Tooltip.scss b/src/components/atoms/Tooltip/Tooltip.scss
index eb77b37f..8dd9d61e 100644
--- a/src/components/atoms/Tooltip/Tooltip.scss
+++ b/src/components/atoms/Tooltip/Tooltip.scss
@@ -1,70 +1,72 @@
-.ebs-tooltip__wrapper {
-  background-color: $white;
-  border-radius: rem($border-radius);
-  @include elevation-2;
-  margin: rem(0 $gutter-size / 2);
-  z-index: 2;
-}
+.ebs-tooltip {
+  &__wrapper {
+    @include elevation-2;
+    background-color: $white;
+    border-radius: rem($border-radius);
+    margin: rem(0 $gutter-size / 2);
+    z-index: 2;
 
-.ebs-tooltip__wrapper.ebs-tooltip--top {
-  margin: rem(0 0 $gutter-size / 2);
-}
+    &.ebs-tooltip--top {
+      margin: rem(0 0 $gutter-size / 2);
+    }
 
-.ebs-tooltip__wrapper.ebs-tooltip--bottom {
-  margin: rem($gutter-size / 2 0 0);
-}
+    &.ebs-tooltip--bottom {
+      margin: rem($gutter-size / 2 0 0);
+    }
 
-.ebs-tooltip__wrapper.ebs-tooltip--left {
-  margin: rem(0 $gutter-size / 2 0 0);
-}
+    &.ebs-tooltip--left {
+      margin: rem(0 $gutter-size / 2 0 0);
+    }
 
-.ebs-tooltip__wrapper.ebs-tooltip--right {
-  margin: rem(0 0 0 $gutter-size / 2);
-}
+    &.ebs-tooltip--right {
+      margin: rem(0 0 0 $gutter-size / 2);
+    }
+  }
 
-.ebs-tooltip__body {
-  padding: rem($gutter-size);
-  font-size: rem($gutter-size);
-  color: $text-color;
-}
+  &__body {
+    padding: rem($gutter-size);
+    font-size: rem($gutter-size);
+    color: $text-color;
 
-.ebs-tooltip__body-title {
-  color: $heading-color;
-  font-size: $font-size-base;
-  margin-bottom: $border-radius;
-  @include fontMedium;
-}
+    &-title {
+      color: $heading-color;
+      font-size: $font-size-base;
+      margin-bottom: $border-radius;
+      @include fontMedium;
+    }
+  }
 
-.ebs-tooltip__arrow {
-  position: absolute;
-  font-size: $gutter-size;
-  transform: translate3d(-50%, 0, 0) rotate(180deg);
-}
+  &__arrow {
+    position: absolute;
+    font-size: $gutter-size;
+    transform: translate3d(-50%, 0, 0) rotate(180deg);
+  }
 
-.ebs-tooltip__arrow path {
-  stroke: transparent;
-  fill: $white;
-}
+  &__arrow path {
+    stroke: transparent;
+    fill: $white;
+  }
 
-.ebs-tooltip__arrow[data-placement*='top'] {
-  bottom: rem(-$gutter-size + 5);
-  left: 50%;
-}
+  &__arrow[data-placement*='top'] {
+    bottom: rem(-$gutter-size + 5);
+    left: 50%;
+  }
 
-.ebs-tooltip__arrow[data-placement*='right'] {
-  left: rem(-$gutter-size + 5);
-  top: 50%;
-  transform: translate3d(0, -50%, 0) rotate(270deg);
-}
+  &__arrow[data-placement*='right'] {
+    left: rem(-$gutter-size + 5);
+    top: 50%;
+    transform: translate3d(0, -50%, 0) rotate(270deg);
+  }
 
-.ebs-tooltip__arrow[data-placement*='bottom'] {
-  top: rem(-$gutter-size + 5);
-  left: 50%;
-  transform: translate3d(0, 0, 0) rotate(0deg);
-}
+  &__arrow[data-placement*='bottom'] {
+    top: rem(-$gutter-size + 5);
+    left: 50%;
+    transform: translate3d(0, 0, 0) rotate(0deg);
+  }
 
-.ebs-tooltip__arrow[data-placement*='left'] {
-  right: rem(-$gutter-size + 5);
-  top: 50%;
-  transform: translate3d(0, -50%, 0) rotate(90deg);
+  &__arrow[data-placement*='left'] {
+    right: rem(-$gutter-size + 5);
+    top: 50%;
+    transform: translate3d(0, -50%, 0) rotate(90deg);
+  }
 }
diff --git a/src/components/molecules/Calendar/Calendar.scss b/src/components/molecules/Calendar/Calendar.scss
index 5420edd5..59d8375f 100644
--- a/src/components/molecules/Calendar/Calendar.scss
+++ b/src/components/molecules/Calendar/Calendar.scss
@@ -3,13 +3,13 @@
 .picker-wrapper {
   display: flex;
   align-items: center;
-}
 
-.picker-wrapper > div:last-child,
-.picker-wrapper > div:first-child:not(:last-child),
-.picker-wrapper .ebs-calendar__wrapper > div:last-child,
-.picker-wrapper .ebs-calendar__wrapper > div:first-child:not(:last-child) {
-  margin-right: rem(10px);
+  > div:last-child,
+  > div:first-child:not(:last-child),
+  .ebs-calendar__wrapper > div:last-child,
+  .ebs-calendar__wrapper > div:first-child:not(:last-child) {
+    margin-right: rem(10px);
+  }
 }
 
 .picker-container {
@@ -21,55 +21,55 @@
   max-width: rem(600px);
   width: max-content;
   z-index: 9999;
-}
 
-.picker-container-date {
-  transform: translate3d(0, rem(55px, 0));
-}
-
-.ebs-calendar__wrapper.disabled .ebs-calendar__input-wrapper .ebs-calendar {
-  border-color: $grey-500;
-  background-color: $white;
-  color: $grey-500;
-  cursor: not-allowed;
-
-  @include placeholder {
-    color: $grey-500 !important;
+  &-date {
+    transform: translate3d(0, rem(55px, 0));
   }
 }
 
-.ebs-calendar__wrapper.active .ebs-calendar__input-wrapper .ebs-calendar {
-  border-color: $primary-color;
-  background-color: $white;
-}
+.ebs-calendar__wrapper {
+  &.disabled .ebs-calendar__input-wrapper .ebs-calendar {
+    border-color: $grey-500;
+    background-color: $white;
+    color: $grey-500;
+    cursor: not-allowed;
 
-.ebs-calendar__wrapper.has-error .ebs-calendar__input-wrapper .ebs-calendar {
-  border-color: $danger-color;
-  background-color: $white;
-}
+    @include placeholder {
+      color: $grey-500 !important;
+    }
+  }
 
-.ebs-calendar__wrapper.ebs-calendar__type-period
-  .ebs-calendar__input-wrapper
-  .react-datepicker-wrapper:not(:first-child) {
-  .ebs-calendar {
-    border-left: inherit;
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
+  &.active .ebs-calendar__input-wrapper .ebs-calendar {
+    border-color: $primary-color;
+    background-color: $white;
   }
-}
 
-.ebs-calendar__wrapper.ebs-calendar__type-period
-  .ebs-calendar__input-wrapper
-  .react-datepicker-wrapper:not(:last-child) {
-  .ebs-calendar {
-    padding-right: rem(10px);
-    border-right: inherit;
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
+  &.has-error .ebs-calendar__input-wrapper .ebs-calendar {
+    border-color: $danger-color;
+    background-color: $white;
   }
 
-  .react-datepicker__input-container:before {
-    display: none;
+  &.ebs-calendar__type-period .ebs-calendar__input-wrapper .react-datepicker-wrapper {
+    &:not(:first-child) {
+      .ebs-calendar {
+        border-left: inherit;
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+      }
+    }
+
+    &:not(:last-child) {
+      .ebs-calendar {
+        padding-right: rem(10px);
+        border-right: inherit;
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+      }
+
+      .react-datepicker__input-container:before {
+        display: none;
+      }
+    }
   }
 }
 
@@ -77,40 +77,40 @@
   display: flex;
   width: 100%;
   margin: 0;
-}
 
-.ebs-calendar__input-wrapper .react-datepicker-wrapper {
-  width: 100%;
-}
-
-.ebs-calendar__input-wrapper .react-datepicker__input-container {
-  position: relative;
-}
+  .react-datepicker-wrapper {
+    width: 100%;
+  }
 
-.ebs-calendar__input-wrapper .react-datepicker__input-container:before {
-  content: '';
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M12 3.33325H3.99996C3.26358 3.33325 2.66663 3.93021 2.66663 4.66659V12.6666C2.66663 13.403 3.26358 13.9999 3.99996 13.9999H12C12.7363 13.9999 13.3333 13.403 13.3333 12.6666V4.66659C13.3333 3.93021 12.7363 3.33325 12 3.33325Z' stroke='%23494F7D' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M10.6666 2V4.66667' stroke='%23494F7D' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M5.33337 2V4.66667' stroke='%23494F7D' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M2.66663 7.33325H13.3333' stroke='%23494F7D' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M7.33337 10H8.00004' stroke='%23494F7D' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8 10V12' stroke='%23494F7D' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
-  width: rem(35px);
-  height: 100%;
-  position: absolute;
-  background-repeat: no-repeat;
-  background-position: center;
-  right: 0;
-}
+  .react-datepicker__input-container {
+    position: relative;
+
+    &:before {
+      content: '';
+      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M12 3.33325H3.99996C3.26358 3.33325 2.66663 3.93021 2.66663 4.66659V12.6666C2.66663 13.403 3.26358 13.9999 3.99996 13.9999H12C12.7363 13.9999 13.3333 13.403 13.3333 12.6666V4.66659C13.3333 3.93021 12.7363 3.33325 12 3.33325Z' stroke='%23494F7D' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M10.6666 2V4.66667' stroke='%23494F7D' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M5.33337 2V4.66667' stroke='%23494F7D' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M2.66663 7.33325H13.3333' stroke='%23494F7D' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M7.33337 10H8.00004' stroke='%23494F7D' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8 10V12' stroke='%23494F7D' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
+      width: rem(35px);
+      height: 100%;
+      position: absolute;
+      background-repeat: no-repeat;
+      background-position: center;
+      right: 0;
+    }
+  }
 
-.ebs-calendar__input-wrapper .ebs-calendar {
-  width: 100%;
-  height: rem(40px);
-  border: 1px solid $border-color;
-  border-radius: rem($border-radius);
-  outline: none;
-  font-size: rem(14px);
-  padding: rem(10px);
-  padding-right: rem(35px);
-  color: $heading-color;
-
-  @include placeholder {
-    color: $text-color-secondary;
+  .ebs-calendar {
+    width: 100%;
+    height: rem(40px);
+    border: 1px solid $border-color;
+    border-radius: rem($border-radius);
+    outline: none;
+    font-size: rem(14px);
+    padding: rem(10px);
+    padding-right: rem(35px);
+    color: $heading-color;
+
+    @include placeholder {
+      color: $text-color-secondary;
+    }
   }
 }
 
@@ -120,161 +120,161 @@
   * {
     outline: 0;
   }
-}
-
-.react-datepicker-popper .react-datepicker {
-  border: none;
-  display: flex;
-  @include elevation-2;
-}
-
-.react-datepicker-popper .react-datepicker__time-list,
-.react-datepicker-popper .react-datepicker__year-dropdown {
-  @include hiddenScroll;
-}
-
-.react-datepicker-popper .react-datepicker__time-list-item:hover {
-  background-color: $primary-100 !important;
-  color: $text-color;
-}
-
-.react-datepicker-popper .react-datepicker__time-list-item--disabled {
-  display: none !important;
-}
-
-.react-datepicker-popper .react-datepicker__time-list-item--selected,
-.react-datepicker-popper .react-datepicker__time-list-item--selected:hover {
-  background-color: $primary-color !important;
-  color: $white;
-}
-
-.react-datepicker-popper .react-datepicker__navigation {
-  content: '';
-
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 8 12' fill='rgb(16 77 67)' class='ebs-icon ebs-icon-size-small ebs-icon__arrow-right '%3E%3Cpath fill-rule='evenodd' d='M1.052,-0.003 C1.317,-0.003 1.581,0.098 1.783,0.300 L6.721,5.263 C7.120,5.663 7.120,6.309 6.721,6.710 L1.783,11.672 C1.382,12.074 0.731,12.077 0.328,11.677 C-0.076,11.278 -0.078,10.628 0.322,10.225 L4.541,5.986 L0.322,1.748 C-0.078,1.345 -0.076,0.695 0.328,0.295 C0.528,0.097 0.790,-0.003 1.052,-0.003 Z'%3E%3C/path%3E%3C/svg%3E");
-
-  background-size: 80%;
-  background-repeat: no-repeat;
-  background-position: center;
-  width: rem(15px);
-  height: rem(15px);
-  border: none;
-}
-
-.react-datepicker-popper .react-datepicker__navigation--previous {
-  transform: rotate(180deg);
-}
 
-// arrow
-.react-datepicker-popper .react-datepicker__triangle {
-  display: none;
-}
-
-.react-datepicker-popper .react-datepicker__time-container {
-  border-color: $border-color;
-}
-
-.react-datepicker-popper .react-datepicker__time ul li {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.react-datepicker-popper .react-datepicker__navigation {
-  background-size: 50%;
-  padding: rem(10px);
-  top: rem(5px);
-}
-
-.react-datepicker-popper .react-datepicker__navigation--years {
-  top: unset;
-}
-
-.react-datepicker-popper .react-datepicker__navigation--years-upcoming {
-  transform: rotate(-90deg);
-}
-
-.react-datepicker-popper .react-datepicker__navigation--years-previous {
-  transform: rotate(90deg);
-}
-
-.react-datepicker-popper .react-datepicker__year-option--selected {
-  width: rem(20px);
-  border-radius: rem(100px);
-  font-size: rem(20px);
-}
-
-.react-datepicker-popper .react-datepicker__year-read-view--down-arrow {
-  border: none;
-  top: rem(7px);
-}
-
-.react-datepicker-popper .react-datepicker__year-read-view--down-arrow:before {
-  border: none;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 8 12' fill='rgb(16 77 67)' class='ebs-icon ebs-icon-size-small ebs-icon__arrow-right '%3E%3Cpath fill-rule='evenodd' d='M1.052,-0.003 C1.317,-0.003 1.581,0.098 1.783,0.300 L6.721,5.263 C7.120,5.663 7.120,6.309 6.721,6.710 L1.783,11.672 C1.382,12.074 0.731,12.077 0.328,11.677 C-0.076,11.278 -0.078,10.628 0.322,10.225 L4.541,5.986 L0.322,1.748 C-0.078,1.345 -0.076,0.695 0.328,0.295 C0.528,0.097 0.790,-0.003 1.052,-0.003 Z'%3E%3C/path%3E%3C/svg%3E");
-  background-size: 50%;
-  background-repeat: no-repeat;
-  background-position: center;
-  width: rem(15px);
-  height: rem(15px);
-  left: auto;
-  top: auto;
-  bottom: auto;
-  z-index: unset;
-  transform: rotate(90deg) translate3d(-50%, 50%, 0);
-}
-
-.react-datepicker-popper .react-datepicker__header {
-  background: transparent;
-  border: none;
-}
-
-.react-datepicker-popper .react-datepicker__year-read-view {
-  padding: rem(5px 10px);
-}
-
-.react-datepicker-popper .react-datepicker__day-name {
-  font-weight: 600;
-  margin: 0;
-  width: rem(30px);
-  height: rem(30px);
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.react-datepicker-popper .react-datepicker__month {
-  margin: rem(0 15px 15px);
-}
-
-.react-datepicker-popper .react-datepicker__day {
-  margin: 0;
-  width: rem(30px);
-  height: rem(30px);
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  border-radius: 0;
-  color: $text-color;
-}
-
-.react-datepicker-popper .react-datepicker__day:hover {
-  background-color: $primary-100;
-}
-
-.react-datepicker-popper .react-datepicker__day--in-range {
-  background-color: $primary-100;
-}
-
-.react-datepicker-popper .react-datepicker__day--in-selecting-range {
-  background-color: $primary-000;
-}
-
-.react-datepicker-popper .react-datepicker__day--selected,
-.react-datepicker-popper .react-datepicker__day--selected:hover,
-.react-datepicker-popper .react-datepicker__day--keyboard-selected,
-.react-datepicker-popper .react-datepicker__day--keyboard-selected:hover {
-  border-radius: rem($border-radius);
-  background-color: $primary-color;
-  color: $white;
+  .react-datepicker {
+    @include elevation-2;
+    border: none;
+    display: flex;
+
+    &__time-list,
+    &__year-dropdown {
+      @include hiddenScroll;
+    }
+
+    &__time-list-item:hover {
+      background-color: $primary-100 !important;
+      color: $text-color;
+    }
+
+    &__time-list-item--disabled {
+      display: none !important;
+    }
+
+    &__time-list-item--selected,
+    &__time-list-item--selected:hover {
+      background-color: $primary-color !important;
+      color: $white;
+    }
+
+    &__navigation {
+      content: '';
+
+      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 8 12' fill='rgb(16 77 67)' class='ebs-icon ebs-icon-size-small ebs-icon__arrow-right '%3E%3Cpath fill-rule='evenodd' d='M1.052,-0.003 C1.317,-0.003 1.581,0.098 1.783,0.300 L6.721,5.263 C7.120,5.663 7.120,6.309 6.721,6.710 L1.783,11.672 C1.382,12.074 0.731,12.077 0.328,11.677 C-0.076,11.278 -0.078,10.628 0.322,10.225 L4.541,5.986 L0.322,1.748 C-0.078,1.345 -0.076,0.695 0.328,0.295 C0.528,0.097 0.790,-0.003 1.052,-0.003 Z'%3E%3C/path%3E%3C/svg%3E");
+
+      background-size: 80%;
+      background-repeat: no-repeat;
+      background-position: center;
+      width: rem(15px);
+      height: rem(15px);
+      border: none;
+    }
+
+    &__navigation--previous {
+      transform: rotate(180deg);
+    }
+
+    // arrow
+    &__triangle {
+      display: none;
+    }
+
+    &__time-container {
+      border-color: $border-color;
+    }
+
+    &__time ul li {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    &__navigation {
+      background-size: 50%;
+      padding: rem(10px);
+      top: rem(5px);
+    }
+
+    &__navigation--years {
+      top: unset;
+    }
+
+    &__navigation--years-upcoming {
+      transform: rotate(-90deg);
+    }
+
+    &__navigation--years-previous {
+      transform: rotate(90deg);
+    }
+
+    &__year-option--selected {
+      width: rem(20px);
+      border-radius: rem(100px);
+      font-size: rem(20px);
+    }
+
+    &__year-read-view--down-arrow {
+      border: none;
+      top: rem(7px);
+    }
+
+    &__year-read-view--down-arrow:before {
+      border: none;
+      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 8 12' fill='rgb(16 77 67)' class='ebs-icon ebs-icon-size-small ebs-icon__arrow-right '%3E%3Cpath fill-rule='evenodd' d='M1.052,-0.003 C1.317,-0.003 1.581,0.098 1.783,0.300 L6.721,5.263 C7.120,5.663 7.120,6.309 6.721,6.710 L1.783,11.672 C1.382,12.074 0.731,12.077 0.328,11.677 C-0.076,11.278 -0.078,10.628 0.322,10.225 L4.541,5.986 L0.322,1.748 C-0.078,1.345 -0.076,0.695 0.328,0.295 C0.528,0.097 0.790,-0.003 1.052,-0.003 Z'%3E%3C/path%3E%3C/svg%3E");
+      background-size: 50%;
+      background-repeat: no-repeat;
+      background-position: center;
+      width: rem(15px);
+      height: rem(15px);
+      left: auto;
+      top: auto;
+      bottom: auto;
+      z-index: unset;
+      transform: rotate(90deg) translate3d(-50%, 50%, 0);
+    }
+
+    &__header {
+      background: transparent;
+      border: none;
+    }
+
+    &__year-read-view {
+      padding: rem(5px 10px);
+    }
+
+    &__day-name {
+      font-weight: 600;
+      margin: 0;
+      width: rem(30px);
+      height: rem(30px);
+      display: inline-flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+    &__month {
+      margin: rem(0 15px 15px);
+    }
+
+    &__day {
+      margin: 0;
+      width: rem(30px);
+      height: rem(30px);
+      display: inline-flex;
+      justify-content: center;
+      align-items: center;
+      border-radius: 0;
+      color: $text-color;
+    }
+
+    &__day:hover {
+      background-color: $primary-100;
+    }
+
+    &__day--in-range {
+      background-color: $primary-100;
+    }
+
+    &__day--in-selecting-range {
+      background-color: $primary-000;
+    }
+
+    &__day--selected,
+    &__day--selected:hover,
+    &__day--keyboard-selected,
+    &__day--keyboard-selected:hover {
+      border-radius: rem($border-radius);
+      background-color: $primary-color;
+      color: $white;
+    }
+  }
 }
diff --git a/src/components/molecules/Checkbox/Checkbox.scss b/src/components/molecules/Checkbox/Checkbox.scss
index 632dd713..3fe2c239 100644
--- a/src/components/molecules/Checkbox/Checkbox.scss
+++ b/src/components/molecules/Checkbox/Checkbox.scss
@@ -1,86 +1,82 @@
 .ebs-checkbox__wrapper {
   position: relative;
   cursor: pointer;
-}
 
-.ebs-checkbox__wrapper.indeterminate {
-  .ebs-checkbox__input:checked ~ .ebs-checkbox {
-    .ebs-checkbox__check {
-      font-size: rem(10px);
-    }
+  &.indeterminate {
+    .ebs-checkbox__input:checked ~ .ebs-checkbox {
+      .ebs-checkbox__check {
+        font-size: rem(10px);
+      }
 
-    .ebs-checkbox__indeterminate {
-      font-size: 0;
+      .ebs-checkbox__indeterminate {
+        font-size: 0;
+      }
     }
-  }
 
-  .ebs-checkbox {
-    border-color: $primary-color;
-    background-color: $primary-color;
+    .ebs-checkbox {
+      border-color: $primary-color;
+      background-color: $primary-color;
 
-    .ebs-checkbox__check {
-      font-size: 0;
-    }
+      .ebs-checkbox__check {
+        font-size: 0;
+      }
 
-    .ebs-checkbox__indeterminate {
-      font-size: rem(10px);
+      .ebs-checkbox__indeterminate {
+        font-size: rem(10px);
+      }
     }
   }
-}
 
-.ebs-checkbox__wrapper.disabled .ebs-checkbox__input {
-  cursor: not-allowed;
-}
+  &.disabled .ebs-checkbox__input {
+    cursor: not-allowed;
+  }
 
-.ebs-checkbox__wrapper.disabled .ebs-checkbox__input:checked ~ .ebs-checkbox,
-.ebs-checkbox__wrapper.disabled .ebs-checkbox__input:checked:hover ~ .ebs-checkbox {
-  border-color: $grey-500;
-  background-color: $grey-500;
-}
+  &.disabled .ebs-checkbox__input:checked ~ .ebs-checkbox,
+  &.disabled .ebs-checkbox__input:checked:hover ~ .ebs-checkbox {
+    border-color: $grey-500;
+    background-color: $grey-500;
 
-.ebs-checkbox__wrapper.disabled .ebs-checkbox__input:checked ~ .ebs-checkbox:before,
-.ebs-checkbox__wrapper.disabled .ebs-checkbox__input:checked:hover ~ .ebs-checkbox:before {
-  background-color: transparent;
-}
+    &:before {
+      background-color: transparent;
+    }
+  }
 
-.ebs-checkbox__wrapper.disabled .ebs-checkbox,
-.ebs-checkbox__wrapper.disabled .ebs-checkbox__input:hover ~ .ebs-checkbox {
-  border-color: $grey-500;
-  background-color: transparent;
-}
+  &.disabled .ebs-checkbox,
+  &.disabled .ebs-checkbox__input:hover ~ .ebs-checkbox {
+    border-color: $grey-500;
+    background-color: transparent;
 
-.ebs-checkbox__wrapper.disabled .ebs-checkbox:before,
-.ebs-checkbox__wrapper.disabled .ebs-checkbox__input:hover ~ .ebs-checkbox:before {
-  background-color: transparent;
-}
+    &:before {
+      background-color: transparent;
+    }
+  }
 
-.ebs-checkbox__wrapper.disabled .ebs-checkbox__text {
-  color: $grey-500;
-}
+  &.disabled .ebs-checkbox__text {
+    color: $grey-500;
+  }
 
-.ebs-checkbox__wrapper.has-text .ebs-checkbox {
-  position: absolute;
-  top: rem(-2px);
-}
+  &.has-text .ebs-checkbox {
+    position: absolute;
+    top: rem(-2px);
+  }
 
-.ebs-checkbox__wrapper.ebs-checkbox__align-left .ebs-checkbox {
-  right: inherit;
-  left: 0;
-}
+  &.ebs-checkbox__align-left .ebs-checkbox {
+    right: inherit;
+    left: 0;
 
-.ebs-checkbox__wrapper.ebs-checkbox__align-left .ebs-checkbox__text {
-  padding-left: rem(26px);
-}
+    &__text {
+      padding-left: rem(26px);
+    }
+  }
 
-.ebs-checkbox__wrapper.ebs-checkbox__align-right {
-  .ebs-checkbox {
+  &.ebs-checkbox__align-right .ebs-checkbox {
     left: inherit;
     right: 0;
-  }
 
-  .ebs-checkbox__text {
-    padding-right: rem(26px);
-    width: rem(160px);
+    &__text {
+      padding-right: rem(26px);
+      width: rem(160px);
+    }
   }
 }
 
@@ -92,33 +88,35 @@
   height: 100%;
   width: 100%;
   cursor: pointer;
-}
 
-.ebs-checkbox__input:checked ~ .ebs-checkbox {
-  border-color: $primary-color;
-  background-color: $primary-color;
-}
+  &:checked {
+    ~ .ebs-checkbox {
+      border-color: $primary-color;
+      background-color: $primary-color;
+    }
 
-.ebs-checkbox__input:checked ~ .ebs-checkbox .ebs-checkbox__check {
-  font-size: rem(10px);
-  color: $white;
-}
+    ~ .ebs-checkbox .ebs-checkbox__check {
+      font-size: rem(10px);
+      color: $white;
+    }
 
-.ebs-checkbox__input:checked .ebs-checkbox__input:hover ~ .ebs-checkbox {
-  border-color: $primary-color;
-  background-color: $primary-color;
-}
+    &:hover ~ .ebs-checkbox {
+      border-color: $primary-color;
+      background-color: $primary-color;
 
-.ebs-checkbox__input:checked .ebs-checkbox__input:hover ~ .ebs-checkbox:before {
-  background-color: $primary-100;
-}
+      &:before {
+        background-color: $primary-100;
+      }
+    }
+  }
 
-.ebs-checkbox__input:hover ~ .ebs-checkbox {
-  border-color: $primary-color;
-}
+  &:hover ~ .ebs-checkbox {
+    border-color: $primary-color;
 
-.ebs-checkbox__input:hover ~ .ebs-checkbox:before {
-  background-color: $primary-100;
+    &:before {
+      background-color: $primary-100;
+    }
+  }
 }
 
 .ebs-checkbox {
@@ -131,43 +129,41 @@
   border-radius: rem($border-radius);
   transition: all $transition-time;
   pointer-events: none;
-}
 
-.ebs-checkbox:before {
-  content: ' ';
-  display: block;
-  position: absolute;
-  width: rem(20px);
-  height: rem(20px);
-  left: 50%;
-  top: 50%;
-  background-color: transparent;
-  transform: translate(-50%, -50%);
-  border-radius: rem($border-radius);
-  z-index: -1;
-}
+  &:before {
+    content: ' ';
+    display: block;
+    position: absolute;
+    width: rem(20px);
+    height: rem(20px);
+    left: 50%;
+    top: 50%;
+    background-color: transparent;
+    transform: translate(-50%, -50%);
+    border-radius: rem($border-radius);
+    z-index: -1;
+  }
 
-.ebs-checkbox__check,
-.ebs-checkbox__indeterminate {
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  font-size: 0;
-  color: $white;
-}
+  &__check,
+  &__indeterminate {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    font-size: 0;
+    color: $white;
+  }
 
-.ebs-checkbox__indeterminate rect {
-  fill: $white;
-}
+  &__indeterminate rect {
+    fill: $white;
+  }
 
-.ebs-checkbox__text {
-  color: $text-color;
-  font-size: rem(14px);
-}
+  &__text {
+    color: $text-color;
+    font-size: rem(14px);
+  }
 
-.ebs-checkbox__group {
-  .ebs-checkbox__wrapper:not(:last-child) {
+  &__group &__wrapper:not(:last-child) {
     margin-bottom: rem(5px);
   }
 }
diff --git a/src/components/molecules/InputPhone/InputPhone.scss b/src/components/molecules/InputPhone/InputPhone.scss
index 90611e85..a01e8e92 100644
--- a/src/components/molecules/InputPhone/InputPhone.scss
+++ b/src/components/molecules/InputPhone/InputPhone.scss
@@ -1,74 +1,76 @@
 @import '~react-phone-input-2/lib/style.css';
 
-.ebs-input__phone.active .form-control,
-.ebs-input__phone.active .flag-dropdown {
-  border-color: $primary-color;
-  background-color: $white !important;
-  color: $heading-color;
-}
+.ebs-input__phone {
+  &.active .form-control,
+  &.active .flag-dropdown {
+    border-color: $primary-color;
+    background-color: $white !important;
+    color: $heading-color;
+  }
 
-.ebs-input__phone.disabled .form-control,
-.ebs-input__phone.disabled .flag-dropdown {
-  border-color: $grey-500;
-  background-color: $white;
-  color: $grey-500;
-  cursor: not-allowed;
+  &.disabled .form-control,
+  &.disabled .flag-dropdown {
+    border-color: $grey-500;
+    background-color: $white;
+    color: $grey-500;
+    cursor: not-allowed;
 
-  @include placeholder {
-    color: $grey-500 !important;
+    @include placeholder {
+      color: $grey-500 !important;
+    }
   }
-}
 
-.ebs-input__phone.has-error .form-control,
-.ebs-input__phone.has-error .flag-dropdown {
-  border-color: $danger-color;
-  background-color: $white;
-}
+  &.has-error .form-control,
+  &.has-error .flag-dropdown {
+    border-color: $danger-color;
+    background-color: $white;
+  }
 
-.ebs-input__phone .form-control {
-  border-radius: rem($border-radius);
-  height: rem(40px);
+  &-dropdown.country-list {
+    padding: rem(4px);
+    @include hiddenScroll;
+    @include elevation-2;
+    border-radius: rem($border-radius);
 
-  @include placeholder {
-    color: $text-color-secondary !important;
-  }
-}
+    .country {
+      font-size: rem(14px);
+      color: $text-color;
+      padding: rem(6px);
+      @include fontRegular;
+    }
 
-.ebs-input__phone .form-control,
-.ebs-input__phone .flag-dropdown {
-  border: 1px solid $border-color;
-  background-color: $white;
-}
+    .country.highlight,
+    .country:hover,
+    .country[aria-selected='true'] {
+      background-color: $primary-000;
+      border-radius: rem($border-radius);
+    }
 
-.ebs-input__phone-dropdown.country-list {
-  padding: rem(4px);
-  @include hiddenScroll;
-  @include elevation-2;
-  border-radius: rem($border-radius);
-}
+    .country[aria-selected='true'] {
+      color: $primary-color;
 
-.ebs-input__phone-dropdown.country-list .country {
-  font-size: rem(14px);
-  color: $text-color;
-  padding: rem(6px);
-  @include fontRegular;
-}
+      .dial-code {
+        color: $primary-400;
+      }
+    }
 
-.ebs-input__phone-dropdown.country-list .country.highlight,
-.ebs-input__phone-dropdown.country-list .country:hover,
-.ebs-input__phone-dropdown.country-list .country[aria-selected='true'] {
-  background-color: $primary-000;
-  border-radius: rem($border-radius);
-}
+    .country .dial-code {
+      color: $text-color-secondary;
+    }
+  }
 
-.ebs-input__phone-dropdown.country-list .country[aria-selected='true'] {
-  color: $primary-color;
+  .form-control {
+    border-radius: rem($border-radius);
+    height: rem(40px);
 
-  .dial-code {
-    color: $primary-400;
+    @include placeholder {
+      color: $text-color-secondary !important;
+    }
   }
-}
 
-.ebs-input__phone-dropdown.country-list .country .dial-code {
-  color: $text-color-secondary;
+  .form-control,
+  .flag-dropdown {
+    border: 1px solid $border-color;
+    background-color: $white;
+  }
 }
diff --git a/src/components/molecules/InputSearch/InputSearch.scss b/src/components/molecules/InputSearch/InputSearch.scss
index e0ab4992..6af5be7c 100644
--- a/src/components/molecules/InputSearch/InputSearch.scss
+++ b/src/components/molecules/InputSearch/InputSearch.scss
@@ -1,27 +1,29 @@
-.ebs-input__search-wrapper.ebs-input__search-type-fill {
-  .ebs-input__search,
-  .ebs-input__wrapper-active {
-    background-color: $grey-100 !important;
+.ebs-input__search-wrapper {
+  &.ebs-input__search-type-fill {
+    .ebs-input__search,
+    .ebs-input__wrapper-active {
+      background-color: $grey-100 !important;
+    }
   }
-}
-
-.ebs-input__search-wrapper.ebs-input__search-type-transparent {
-  .ebs-input__search,
-  .ebs-input__wrapper-active {
-    background-color: transparent !important;
-    border-color: transparent;
-    color: $white;
 
-    .ebs-input {
+  &.ebs-input__search-type-transparent {
+    .ebs-input__search,
+    .ebs-input__wrapper-active {
+      background-color: transparent !important;
+      border-color: transparent;
       color: $white;
 
-      @include placeholder {
+      .ebs-input {
         color: $white;
+
+        @include placeholder {
+          color: $white;
+        }
       }
     }
   }
-}
 
-.ebs-input__search-wrapper.disabled .cursor {
-  cursor: not-allowed;
+  &.disabled .cursor {
+    cursor: not-allowed;
+  }
 }
diff --git a/src/components/molecules/InputSelect/InputSelect.scss b/src/components/molecules/InputSelect/InputSelect.scss
index 1a1f60a6..c84b9b8b 100644
--- a/src/components/molecules/InputSelect/InputSelect.scss
+++ b/src/components/molecules/InputSelect/InputSelect.scss
@@ -1,97 +1,98 @@
-.ebs-select__input-wrapper.disabled .ebs-select__input-dropdown-wrapper .ebs-select__input {
-  cursor: not-allowed;
-  border-color: $grey-500;
+.ebs-select__input-wrapper {
+  &.disabled .ebs-select__input-dropdown-wrapper .ebs-select__input {
+    cursor: not-allowed;
+    border-color: $grey-500;
 
-  .ebs-select__input-value {
-    color: $grey-500;
+    .ebs-select__input-value {
+      color: $grey-500;
+    }
   }
-}
 
-.ebs-select__input-wrapper.has-error .ebs-select__input-dropdown-wrapper .ebs-select__input {
-  border-color: $danger-color;
-  background-color: $white;
-}
+  &.has-error .ebs-select__input-dropdown-wrapper .ebs-select__input {
+    border-color: $danger-color;
+    background-color: $white;
+  }
 
-.ebs-select__input-wrapper.active .ebs-select__input-dropdown-wrapper .ebs-select__input {
-  border-color: $primary-color;
-  background-color: $white !important;
-}
+  &.active {
+    &.ebs-select__input-mode-multiple .ebs-select__input-value {
+      padding-right: rem(75px);
+    }
 
-.ebs-select__input-wrapper.active .ebs-select__input-dropdown-wrapper .ebs-select__input .ebs-select__input-value {
-  color: $heading-color;
-}
+    .ebs-select__input-dropdown-wrapper .ebs-select__input {
+      border-color: $primary-color;
+      background-color: $white !important;
 
-.ebs-select__input-wrapper.active.ebs-select__input-mode-multiple .ebs-select__input-value {
-  padding-right: rem(75px);
+      .ebs-select__input-value {
+        color: $heading-color;
+      }
+    }
+  }
 }
 
 .ebs-select__input-dropdown-wrapper {
   position: relative;
-}
 
-.ebs-select__input-dropdown-wrapper .ebs-select__input {
-  cursor: pointer;
-  padding: rem(11px 10px);
-  border: 1px solid $border-color;
-  border-radius: rem($border-radius);
-  font-size: rem(14px);
-}
+  .ebs-select__input {
+    cursor: pointer;
+    padding: rem(11px 10px);
+    border: 1px solid $border-color;
+    border-radius: rem($border-radius);
+    font-size: rem(14px);
 
-.ebs-select__input-dropdown-wrapper .ebs-select__input .ebs-select__input-value {
-  color: $text-color-secondary;
-  overflow: auto hidden;
-  white-space: nowrap;
-  @include hiddenScroll;
-}
+    &-transition {
+      width: rem(90px);
+      height: calc(100% - 2px);
+      margin: 1px;
+      position: absolute;
+      right: 0;
+      top: 0;
+      border-top-right-radius: rem(4px);
+      border-bottom-right-radius: rem(4px);
+      box-shadow: inset -90px 0px 15px -12px rgba($white, 1);
+    }
 
-.ebs-select__input-dropdown-wrapper .ebs-select__input .ebs-select__input-value .ebs-select__input-label {
-  position: relative;
-  top: rem(-1px);
-  padding-top: rem(4px);
-  padding-bottom: rem(4px);
-  font-size: rem(12px);
-  margin-bottom: 0;
-}
+    &-count {
+      position: absolute;
+      right: (35px);
+      top: 50%;
+      transform: translateY(-50%);
+      background-color: $primary-color;
+      color: $white;
+      font-size: rem(12px);
+      border-radius: rem($border-radius);
+      padding: rem(5px 8px);
+    }
 
-.ebs-select__input-dropdown-wrapper
-  .ebs-select__input
-  .ebs-select__input-value
-  .ebs-select__input-label:not(:last-child) {
-  margin-right: rem(4px);
-}
+    &-suffix {
+      position: absolute;
+      right: rem(14px);
+      top: 50%;
+      transform: translateY(-50%);
+      color: $text-color;
 
-.ebs-select__input-dropdown-wrapper .ebs-select__input-transition {
-  width: rem(90px);
-  height: calc(100% - 2px);
-  margin: 1px;
-  position: absolute;
-  right: 0;
-  top: 0;
-  border-top-right-radius: rem(4px);
-  border-bottom-right-radius: rem(4px);
-  box-shadow: inset -90px 0px 15px -12px rgba($white, 1);
-}
+      .ebs-icon {
+        font-size: rem(10px);
+      }
+    }
 
-.ebs-select__input-dropdown-wrapper .ebs-select__input-count {
-  position: absolute;
-  right: (35px);
-  top: 50%;
-  transform: translateY(-50%);
-  background-color: $primary-color;
-  color: $white;
-  font-size: rem(12px);
-  border-radius: rem($border-radius);
-  padding: rem(5px 8px);
-}
+    &-value {
+      color: $text-color-secondary;
+      overflow: auto hidden;
+      white-space: nowrap;
+      @include hiddenScroll;
+    }
 
-.ebs-select__input-dropdown-wrapper .ebs-select__input-suffix {
-  position: absolute;
-  right: rem(14px);
-  top: 50%;
-  transform: translateY(-50%);
-  color: $text-color;
+    &-label {
+      position: relative;
+      top: rem(-1px);
+      padding-top: rem(4px);
+      padding-bottom: rem(4px);
+      font-size: rem(12px);
+      margin-bottom: 0;
+    }
 
-  .ebs-icon {
-    font-size: rem(10px);
+    &-label:not(:last-child) {
+      margin-right: rem(4px);
+    }
   }
 }
diff --git a/src/components/molecules/Loader/Loader.scss b/src/components/molecules/Loader/Loader.scss
index 1dd43283..50fef4b0 100644
--- a/src/components/molecules/Loader/Loader.scss
+++ b/src/components/molecules/Loader/Loader.scss
@@ -17,31 +17,31 @@
   }
 }
 
-.ebs-loader__inline {
-  color: $text-color-secondary;
-  @include fontRegular;
-  font-size: rem(14px);
-}
-
-.ebs-loader__inline .ebs-loader__spinner {
-  position: relative;
-  top: rem(2px);
-  display: inline-block;
-  margin-right: rem(7.5px);
-}
-
 .ebs-loader {
   position: relative;
   animation: loaderFade 0.5s forwards;
   z-index: 2;
-}
 
-.ebs-loader .ebs-loader__spinner {
-  position: absolute;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}
+  &__inline {
+    color: $text-color-secondary;
+    @include fontRegular;
+    font-size: rem(14px);
+  }
+
+  &__inline &__spinner {
+    position: relative;
+    top: rem(2px);
+    display: inline-block;
+    margin-right: rem(7.5px);
+  }
 
-.ebs-loader .ebs-loader__spinner.fixed {
-  position: fixed;
+  & > &__spinner {
+    position: absolute;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  & > &__spinner.fixed {
+    position: fixed;
+  }
 }
diff --git a/src/components/molecules/SelectDropdown/SelectDropdown.scss b/src/components/molecules/SelectDropdown/SelectDropdown.scss
index fe6a02a8..09417af8 100644
--- a/src/components/molecules/SelectDropdown/SelectDropdown.scss
+++ b/src/components/molecules/SelectDropdown/SelectDropdown.scss
@@ -10,33 +10,33 @@
   border: 1px solid $white;
   border-radius: rem($border-radius);
   z-index: 999;
-}
 
-.ebs-select__dropdown .ebs-select__dropdown-search,
-.ebs-select__dropdown.ebs-select__dropdown-search.ebs-input__wrapper-active {
-  margin-bottom: rem(4px);
-  border-color: $grey-100;
-  background-color: $grey-100 !important;
+  & > &-search,
+  &-search.ebs-input__wrapper-active {
+    margin-bottom: rem(4px);
+    border-color: $grey-100;
+    background-color: $grey-100 !important;
 
-  .ebs-input {
-    height: rem(32px);
+    .ebs-input {
+      height: rem(32px);
+    }
   }
-}
 
-.ebs-select__dropdown .ebs-select__dropdown-items {
-  @include greyScroll;
-  max-height: rem(174px);
-  overflow-y: auto;
+  & > &-items {
+    @include greyScroll;
+    max-height: rem(174px);
+    overflow-y: auto;
 
-  .ebs-select__dropdown-item:not(:last-child) {
-    margin-bottom: rem(4px);
+    .ebs-select__dropdown-item:not(:last-child) {
+      margin-bottom: rem(4px);
+    }
   }
-}
 
-.ebs-select__dropdown .ebs-select__dropdown--empty {
-  display: block;
-  color: $grey-500;
-  text-align: center;
-  margin: rem(5px);
-  font-size: rem(12px);
+  & > &--empty {
+    display: block;
+    color: $grey-500;
+    text-align: center;
+    margin: rem(5px);
+    font-size: rem(12px);
+  }
 }
diff --git a/src/components/molecules/Stepper/Stepper.scss b/src/components/molecules/Stepper/Stepper.scss
index 9c83c2fa..6b71e1d4 100644
--- a/src/components/molecules/Stepper/Stepper.scss
+++ b/src/components/molecules/Stepper/Stepper.scss
@@ -1,167 +1,169 @@
 @import '~rc-input-number/assets/index.css';
 
-.ebs-stepper__wrapper.left .ebs-stepper .rc__input-number-handler-wrap {
-  float: left;
-  border-left-width: 0px;
-  border-right-width: 1px;
-  border-right-style: solid;
-}
-
-.ebs-stepper__wrapper.right .ebs-stepper .rc__input-number-handler-wrap {
-  float: right;
-  border-right-width: 0px;
-  border-left-width: 1px;
-  border-left-style: solid;
-}
+.ebs-stepper__wrapper {
+  &.active .ebs-stepper,
+  &.active .ebs-stepper:hover {
+    border-color: $primary-color;
+    background-color: $white;
 
-.ebs-stepper__wrapper.active .ebs-stepper,
-.ebs-stepper__wrapper.active .ebs-stepper:hover {
-  border-color: $primary-color;
-  background-color: $white;
+    .rc-input-number-handler-wrap {
+      border-color: $primary-color;
+    }
 
-  .rc-input-number-handler-wrap {
-    border-color: $primary-color;
+    .rc-input-number-input {
+      color: $heading-color;
+    }
   }
 
-  .rc-input-number-input {
-    color: $heading-color;
+  &.has-error .ebs-stepper,
+  &.has-error .rc-input-number-handler-wrap {
+    border-color: $danger-color !important;
   }
-}
 
-.ebs-stepper__wrapper.has-error .ebs-stepper,
-.ebs-stepper__wrapper.has-error .rc-input-number-handler-wrap {
-  border-color: $danger-color !important;
-}
+  &.has-error .ebs-stepper__extra {
+    color: $danger-color;
+  }
 
-.ebs-stepper__wrapper.has-error .ebs-stepper__extra {
-  color: $danger-color;
-}
+  &.disabled .ebs-stepper__label {
+    color: $grey-500;
+  }
 
-.ebs-stepper__wrapper.disabled .ebs-stepper__label {
-  color: $grey-500;
-}
+  &.disabled .ebs-stepper,
+  &.disabled .ebs-stepper:hover {
+    border-color: $grey-500;
 
-.ebs-stepper__wrapper.disabled .ebs-stepper,
-.ebs-stepper__wrapper.disabled .ebs-stepper:hover {
-  border-color: $grey-500;
+    &.rc-input-number-disabled .rc-input-number-input {
+      background-color: $white;
 
-  &.rc-input-number-disabled .rc-input-number-input {
-    background-color: $white;
+      @include placeholder {
+        color: $grey-500;
+      }
+    }
 
-    @include placeholder {
+    .rc-input-number-handler-wrap,
+    .rc-input-number-handler-wrap:hover {
+      border-color: $grey-500;
       color: $grey-500;
     }
   }
 
-  .rc-input-number-handler-wrap,
-  .rc-input-number-handler-wrap:hover {
-    border-color: $grey-500;
-    color: $grey-500;
-  }
-}
+  .ebs-stepper {
+    width: 100%;
+    height: rem(40px);
+    border: 1px solid $border-color;
+    background-color: $white;
+    border-radius: rem($border-radius);
 
-.ebs-stepper__wrapper .ebs-stepper {
-  width: 100%;
-  height: rem(40px);
-  border: 1px solid $border-color;
-  background-color: $white;
-  border-radius: rem($border-radius);
-}
+    &:focus,
+    &:hover,
+    &.rc-input-number-focused {
+      box-shadow: inherit;
+      outline: none !important;
+    }
 
-.ebs-stepper__wrapper .ebs-stepper:focus,
-.ebs-stepper__wrapper .ebs-stepper:hover,
-.ebs-stepper__wrapper .ebs-stepper.rc-input-number-focused {
-  box-shadow: inherit;
-  outline: none !important;
-}
+    &:hover {
+      border-color: $border-color;
 
-.ebs-stepper__wrapper .ebs-stepper:hover {
-  border-color: $border-color;
+      .rc-input-number-handler-wrap {
+        border-color: $border-color;
+      }
+    }
 
-  .rc-input-number-handler-wrap {
-    border-color: $border-color;
-  }
-}
+    &.rc-input-number-focused {
+      border-color: $primary-color;
+      background-color: $white;
 
-.ebs-stepper__wrapper .ebs-stepper.rc-input-number-focused {
-  border-color: $primary-color;
-  background-color: $white;
+      .rc-input-number-handler-wrap {
+        border-color: $primary-color;
+      }
 
-  .rc-input-number-handler-wrap {
-    border-color: $primary-color;
-  }
+      .rc-input-number-input {
+        color: $heading-color;
+      }
+    }
 
-  .rc-input-number-input {
-    color: $heading-color;
-  }
-}
+    // Label
+    &__label {
+      margin-bottom: rem(5px);
+      color: $text-color;
+      @include fontRegular;
+      font-size: rem(12px);
+    }
 
-.ebs-stepper__wrapper .ebs-stepper .rc-input-number-handler-wrap {
-  border-color: $border-color;
-  width: rem(30px);
-}
+    // Extra
+    &__extra {
+      margin-top: rem(2.5px);
+      color: $text-color-secondary;
+      @include fontRegular;
+      font-size: rem(10px);
+    }
 
-.ebs-stepper__wrapper .ebs-stepper .rc-input-number-handler {
-  height: 50%;
-  width: 100%;
-}
+    .rc-input-number-handler-wrap {
+      border-color: $border-color;
+      width: rem(30px);
+    }
 
-.ebs-stepper__wrapper .ebs-stepper .rc-input-number-handler > * {
-  font-size: rem(8px);
-}
+    .rc-input-number-handler {
+      height: 50%;
+      width: 100%;
+    }
 
-.ebs-stepper__wrapper .ebs-stepper .rc-input-number-handler.rc-input-number-handler-up,
-.ebs-stepper__wrapper .ebs-stepper .rc-input-number-handler.rc-input-number-handler-down {
-  position: relative;
+    .rc-input-number-handler > * {
+      font-size: rem(8px);
+    }
 
-  .ebs-icon {
-    position: absolute;
-    left: 50%;
-    transform: translateX(-50%);
-    color: $text-color;
-  }
-}
+    .rc-input-number-handler.rc-input-number-handler-up,
+    .rc-input-number-handler.rc-input-number-handler-down {
+      position: relative;
 
-.ebs-stepper__wrapper .ebs-stepper .rc-input-number-handler.rc-input-number-handler-up {
-  border-bottom-color: transparent;
+      .ebs-icon {
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+        color: $text-color;
+      }
+    }
 
-  .ebs-icon {
-    bottom: rem(2px);
-  }
-}
+    .rc-input-number-handler.rc-input-number-handler-up {
+      border-bottom-color: transparent;
 
-.ebs-stepper__wrapper .ebs-stepper .rc-input-number-handler.rc-input-number-handler-down {
-  border-bottom-color: transparent;
+      .ebs-icon {
+        bottom: rem(2px);
+      }
+    }
 
-  .ebs-icon {
-    top: rem(2px);
-    transform: translateX(-50%) rotate(180deg);
-  }
-}
+    .rc-input-number-handler.rc-input-number-handler-down {
+      border-bottom-color: transparent;
 
-.ebs-stepper__wrapper .ebs-stepper .rc-input-number-input-wrap .rc-input-number-input {
-  padding: rem(10px);
-  text-align: left;
-  color: $heading-color;
-  font-size: rem(14px);
+      .ebs-icon {
+        top: rem(2px);
+        transform: translateX(-50%) rotate(180deg);
+      }
+    }
+
+    .rc-input-number-input-wrap .rc-input-number-input {
+      padding: rem(10px);
+      text-align: left;
+      color: $heading-color;
+      font-size: rem(14px);
 
-  @include placeholder {
-    color: $text-color-secondary !important;
+      @include placeholder {
+        color: $text-color-secondary !important;
+      }
+    }
   }
-}
 
-// Label
-.ebs-stepper__wrapper .ebs-stepper__label {
-  margin-bottom: rem(5px);
-  color: $text-color;
-  @include fontRegular;
-  font-size: rem(12px);
-}
+  &.left .rc-input-number-handler-wrap {
+    float: left;
+    border-left-width: 0px;
+    border-right-width: 1px;
+    border-right-style: solid;
+  }
 
-// Extra
-.ebs-stepper__wrapper .ebs-stepper__extra {
-  margin-top: rem(2.5px);
-  color: $text-color-secondary;
-  @include fontRegular;
-  font-size: rem(10px);
+  &.right .rc-input-number-handler-wrap {
+    float: right;
+    border-right-width: 0px;
+    border-left-width: 1px;
+    border-left-style: solid;
+  }
 }
diff --git a/src/components/molecules/Textarea/Textarea.scss b/src/components/molecules/Textarea/Textarea.scss
index 105e2140..c7f8f8cb 100644
--- a/src/components/molecules/Textarea/Textarea.scss
+++ b/src/components/molecules/Textarea/Textarea.scss
@@ -1,59 +1,58 @@
 .ebs-textarea {
-  width: 100%;
-  border: 1px solid $border-color;
+  @include fontRegular;
+  font-size: rem(14px);
+  padding: rem(10px);
   min-height: rem(80px);
+  width: 100%;
   outline: none;
+  border: 1px solid $border-color;
   border-radius: rem($border-radius);
   background-color: $white;
   color: $heading-color;
 
-  @include fontRegular;
-  font-size: rem(14px);
-  padding: rem(10px);
-
   @include placeholder {
     color: $text-color-secondary;
   }
-}
 
-.ebs-textarea.has-value {
-  border-color: $primary-color;
-}
+  &.has-value {
+    border-color: $primary-color;
+  }
 
-.ebs-textarea.has-error {
-  border-color: $danger-color;
-}
+  &.has-error {
+    border-color: $danger-color;
+  }
 
-.ebs-textarea.disabled {
-  border-color: $grey-500;
-}
+  &.disabled {
+    border-color: $grey-500;
+  }
 
-// Label
-.ebs-textarea__label {
-  @include fontRegular;
+  // Label
+  &__label {
+    @include fontRegular;
 
-  color: $text-color;
-  margin-bottom: rem(5px);
-  font-size: rem(12px);
-}
+    color: $text-color;
+    margin-bottom: rem(5px);
+    font-size: rem(12px);
+  }
 
-.ebs-textarea__label.disabled {
-  color: $grey-500;
-}
+  &__label.disabled {
+    color: $grey-500;
+  }
 
-// Extra
-.ebs-textarea__extra {
-  @include fontRegular;
+  // Extra
+  &__extra {
+    @include fontRegular;
 
-  color: $text-color-secondary;
-  margin-top: rem(2.5px);
-  font-size: rem(10px);
-}
+    color: $text-color-secondary;
+    margin-top: rem(2.5px);
+    font-size: rem(10px);
+  }
 
-.ebs-textarea__extra.has-error {
-  color: $danger-color;
-}
+  &__extra.has-error {
+    color: $danger-color;
+  }
 
-.ebs-textarea__extra.disabled {
-  color: $grey-500;
+  &__extra.disabled {
+    color: $grey-500;
+  }
 }
diff --git a/src/components/organisms/Actions/Actions.scss b/src/components/organisms/Actions/Actions.scss
index e43d2309..81a93c8d 100644
--- a/src/components/organisms/Actions/Actions.scss
+++ b/src/components/organisms/Actions/Actions.scss
@@ -5,43 +5,42 @@
 .ebs-action__tooltip {
   min-width: rem($actions-tooltip-min-width);
   padding: rem($actions-tooltip-padding) !important;
-}
 
-.ebs-action__tooltip-title {
-  @include fontMedium;
-  font-size: rem($actions-tooltip-title-font-size);
-  padding: rem($actions-tooltip-title-padding);
-  border-bottom: $actions-border;
-  color: $actions-tooltip-title-color;
-}
+  &-title {
+    @include fontMedium;
+    font-size: rem($actions-tooltip-title-font-size);
+    padding: rem($actions-tooltip-title-padding);
+    border-bottom: $actions-border;
+    color: $actions-tooltip-title-color;
+  }
 
-.ebs-action__tooltip-item {
-  position: relative;
-  // display: inline-block;
-  padding: rem($actions-tooltip-item-padding);
-  font-size: rem($actions-tooltip-item-font-size);
-  @include fontMedium;
-  cursor: pointer;
-  transition: $transition-time;
-}
+  &-item {
+    @include fontMedium;
+    cursor: pointer;
+    position: relative;
+    padding: rem($actions-tooltip-item-padding);
+    font-size: rem($actions-tooltip-item-font-size);
+    transition: $transition-time;
 
-.ebs-action__tooltip-item .loader-display {
-  display: inline-block;
-  margin-right: rem($gutter-size / 2);
-  vertical-align: middle;
-}
+    &:hover {
+      background-color: $background-content;
+      color: $link-hover-color;
+    }
+  }
 
-.ebs-action__tooltip-item:hover {
-  background-color: $background-content;
-  color: $link-hover-color;
-}
+  &-item .loader-display {
+    display: inline-block;
+    margin-right: rem($gutter-size / 2);
+    vertical-align: middle;
+  }
 
-.ebs-action__tooltip-icon {
-  cursor: pointer;
-  display: block;
-  color: $text-color;
-}
+  &-icon {
+    cursor: pointer;
+    display: block;
+    color: $text-color;
 
-.ebs-action__tooltip-icon:hover {
-  color: $primary-color;
+    &:hover {
+      color: $primary-color;
+    }
+  }
 }
diff --git a/src/components/organisms/Form/Form.scss b/src/components/organisms/Form/Form.scss
index c2106199..d7bd53d9 100644
--- a/src/components/organisms/Form/Form.scss
+++ b/src/components/organisms/Form/Form.scss
@@ -1,28 +1,30 @@
-.ebs-form__inline .ebs-form__item {
-  display: flex;
-  align-items: center;
-}
+.ebs-form__inline {
+  .ebs-form__item {
+    display: flex;
+    align-items: center;
 
-.ebs-form__inline .ebs-form__item:not(:last-child) {
-  margin-bottom: rem(25px);
-}
+    &:not(:last-child) {
+      margin-bottom: rem(25px);
+    }
 
-.ebs-form__inline .ebs-form__item .ebs-label {
-  text-align: right;
-  max-width: rem(125px);
-  width: 100%;
-  margin: rem(0 10px 0 0);
-}
+    .ebs-label {
+      text-align: right;
+      max-width: rem(125px);
+      width: 100%;
+      margin: rem(0 10px 0 0);
+    }
 
-.ebs-form__inline .ebs-form__item .ebs-form__children {
-  width: 100%;
-}
+    .ebs-form__children {
+      width: 100%;
+    }
 
-.ebs-form__inline .ebs-form__item .ebs-extra {
-  text-align: right;
-  position: absolute;
-  bottom: rem(-12.5px);
-  width: 100%;
+    .ebs-extra {
+      text-align: right;
+      position: absolute;
+      bottom: rem(-12.5px);
+      width: 100%;
+    }
+  }
 }
 
 .ebs-form__items {
@@ -32,35 +34,35 @@
   @include mq($until: small-desktop) {
     display: block;
   }
-}
 
-.ebs-form__items:not(:last-child) {
-  margin-bottom: rem(20px);
-}
+  &:not(:last-child) {
+    margin-bottom: rem(20px);
+  }
 
-.ebs-form__items.ebs-form__items-three .ebs-form__item {
-  width: calc(33% - 7.5px);
-}
+  &-three .ebs-form__item {
+    width: calc(33% - 7.5px);
+  }
 
-.ebs-form__items .ebs-form__item {
-  @include mq($from: small-desktop) {
-    margin-bottom: 0 !important;
+  .ebs-form__item {
+    @include mq($from: small-desktop) {
+      margin-bottom: 0 !important;
 
-    &:not(:first-child) {
-      margin-left: rem(12.5px);
+      &:not(:first-child) {
+        margin-left: rem(12.5px);
+      }
     }
-  }
 
-  @include mq($until: small-desktop) {
-    width: 100% !important;
+    @include mq($until: small-desktop) {
+      width: 100% !important;
+    }
   }
 }
 
 .ebs-form__item {
   position: relative;
   width: 100%;
-}
 
-.ebs-form__item:not(:last-child) {
-  margin-bottom: rem(20px);
+  &:not(:last-child) {
+    margin-bottom: rem(20px);
+  }
 }
diff --git a/src/components/organisms/Layout/Layout.scss b/src/components/organisms/Layout/Layout.scss
index e6f25952..bb368bec 100644
--- a/src/components/organisms/Layout/Layout.scss
+++ b/src/components/organisms/Layout/Layout.scss
@@ -1,19 +1,19 @@
 .ebs-layout {
   @include mq($until: small-desktop) {
-    .ebs-layout__content-wrapper,
-    .ebs-layout__footer {
+    &__content-wrapper,
+    &__footer {
       width: 100% !important;
     }
 
-    .ebs-layout__top-bar {
+    &__top-bar {
       padding-left: 0 !important;
 
-      .ebs-layout__top-bar-mobile {
+      &-mobile {
         display: flex !important;
         align-items: center;
         width: 100%;
 
-        .ebs-layout__top-bar-mobile--toggler {
+        &--toggler {
           position: relative;
           height: $layout-top-bar-height;
           width: $layout-top-bar-height;
@@ -34,52 +34,109 @@
       }
     }
 
-    .ebs-layout__top-bar-title {
+    &__top-bar-title {
       display: none;
     }
   }
-}
 
-.ebs-layout.ebs-layout__sidebar--untoggled.has-options {
-  @media (min-width: 54.84714em) {
-    .ebs-layout__content-wrapper,
-    .ebs-layout__footer {
-      width: calc(100% - 27.3936rem) !important;
+  &__sidebar--untoggled.has-options {
+    @media (min-width: 54.84714em) {
+      .ebs-layout__content-wrapper,
+      .ebs-layout__footer {
+        width: calc(100% - 27.3936rem) !important;
+      }
+    }
+
+    @media (max-width: 54.84714em) {
+      .ebs-sidebar.ebs-sidebar__mobile--closed {
+        transform: translateX(-200%);
+      }
     }
   }
 
-  @media (max-width: 54.84714em) {
-    .ebs-sidebar.ebs-sidebar__mobile--closed {
-      transform: translateX(-200%);
+  &__sidebar--toggled {
+    @media (min-width: 54.84714em) {
+      .ebs-layout__content-wrapper,
+      .ebs-layout__footer {
+        // 57px
+        width: calc(100% - 3.95224rem) !important;
+      }
+    }
+
+    &.has-options {
+      @media (min-width: 54.84714em) {
+        .ebs-layout__content-wrapper,
+        .ebs-layout__footer {
+          width: calc(100% - 17.75772rem) !important;
+        }
+      }
+
+      @media (max-width: 54.84714em) {
+        .ebs-sidebar.ebs-sidebar__mobile--closed {
+          transform: translateX(-500%);
+        }
+      }
+
+      .ebs-sidebar__item {
+        border-right: none;
+      }
     }
   }
-}
 
-.ebs-layout.ebs-layout__sidebar--toggled {
-  @media (min-width: 54.84714em) {
-    .ebs-layout__content-wrapper,
-    .ebs-layout__footer {
-      // 57px
-      width: calc(100% - 3.95224rem) !important;
+  &__content-wrapper,
+  &__footer {
+    transition: width $transition-time;
+    margin-left: auto;
+
+    // 191px
+    width: calc(100% - #{$sidebar-width});
+  }
+
+  &__content-wrapper {
+    position: relative;
+  }
+
+  &__content {
+    width: 100%;
+    height: calc(100vh - #{$layout-top-bar-height} - #{$layout-footer-height});
+    overflow: hidden auto;
+    margin: 0 auto;
+    padding: rem(15px 25px);
+
+    .ebs-breadcrumbs__wrapper {
+      margin-bottom: rem(20px);
+
+      + .ebs-card .ebs-card__header {
+        padding-top: 0;
+      }
     }
   }
-}
 
-.ebs-layout.ebs-layout__sidebar--toggled.has-options .ebs-sidebar__options > .ebs-sidebar__item {
-  border-right: none;
-}
+  &__footer {
+    height: $layout-footer-height;
+    display: flex;
+    align-items: center;
+    color: $grey-300;
 
-.ebs-layout.ebs-layout__sidebar--toggled.has-options {
-  @media (min-width: 54.84714em) {
-    .ebs-layout__content-wrapper,
-    .ebs-layout__footer {
-      width: calc(100% - 17.75772rem) !important;
+    span {
+      @include fontRegular;
+      display: block;
+      margin: 0 auto;
     }
   }
 
-  @media (max-width: 54.84714em) {
-    .ebs-sidebar.ebs-sidebar__mobile--closed {
-      transform: translateX(-500%);
+  .ebs-sidebar {
+    margin-top: $layout-top-bar-height;
+    height: calc(100vh - #{$layout-top-bar-height});
+
+    @include mq($until: small-desktop) {
+      margin-top: 0;
+      height: 100vh;
+    }
+
+    &--toggled .ebs-label {
+      @include text-ellipsis;
+      padding: 0 $gutter-size / 3;
     }
   }
 }
@@ -105,131 +162,70 @@
   padding: rem($gutter-size 24px);
   border-bottom: $layout-top-bar-border-color;
   background-color: $layout-top-bar-background;
-}
-
-.ebs-layout__top-bar.fixed {
-  position: fixed;
-  right: 0;
-  top: 0;
-  z-index: 3;
-}
-
-.ebs-layout__top-bar.fixed + .ebs-sidebar + .ebs-layout__content-wrapper {
-  padding-top: $layout-top-bar-height;
-}
 
-.ebs-layout__top-bar-mobile {
-  display: none;
-}
-
-.ebs-layout__top-bar-title {
-  cursor: pointer;
-  font-size: rem(14px);
-  @include fontBold;
-  min-width: $sidebar-width - $gutter-size;
-}
+  &.fixed {
+    position: fixed;
+    right: 0;
+    top: 0;
+    z-index: 3;
 
-.ebs-layout__top-bar-title > svg:first-child {
-  font-size: $sidebar-logo-width;
-}
-
-.ebs-layout__top-bar-title img {
-  max-width: $sidebar-logo-width;
-}
-
-.ebs-layout__top-bar-left {
-  width: 100%;
-}
-
-.ebs-layout__top-bar-left ~ .ebs-layout__top-bar-title {
-  width: auto;
-}
-
-.ebs-layout__top-bar-left,
-.ebs-layout__top-bar-right {
-  display: flex;
-  align-items: center;
-  white-space: nowrap;
-}
-
-.ebs-layout__top-bar-left {
-  margin-left: $layout-top-bar-side-left-magin-left;
-}
-
-.ebs-layout__top-bar-right {
-  margin-left: $layout-top-bar-side-right-magin-left;
-  width: 100%;
-  justify-content: flex-end;
-}
-
-.ebs-layout__top-bar-right > *:not(:first-child) {
-  margin-left: $gutter-size * 2;
-}
+    + .ebs-sidebar + .ebs-layout__content-wrapper {
+      padding-top: $layout-top-bar-height;
+    }
+  }
 
-.ebs-layout__top-bar-right-item {
-  display: flex;
-  align-items: center;
-  margin-left: $gutter-size;
-}
+  &-mobile {
+    display: none;
+  }
 
-.ebs-layout__top-bar-right-item > *:not(:first-child) {
-  margin-left: $gutter-size;
-}
-//
+  &-title {
+    cursor: pointer;
+    font-size: rem(14px);
+    @include fontBold;
+    min-width: $sidebar-width - $gutter-size;
 
-.ebs-layout .ebs-sidebar {
-  margin-top: $layout-top-bar-height;
-  height: calc(100vh - #{$layout-top-bar-height});
+    img {
+      max-width: $sidebar-logo-width;
+    }
 
-  @include mq($until: small-desktop) {
-    margin-top: 0;
-    height: 100vh;
+    svg:first-child {
+      font-size: $sidebar-logo-width;
+    }
   }
-}
 
-.ebs-layout .ebs-sidebar.ebs-sidebar--toggled .ebs-label {
-  @include text-ellipsis;
-  padding: 0 $gutter-size / 3;
-}
-
-.ebs-layout__content-wrapper,
-.ebs-layout__footer {
-  transition: width $transition-time;
-  margin-left: auto;
-
-  // 191px
-  width: calc(100% - #{$sidebar-width});
-}
+  &-left {
+    width: 100%;
+    margin-left: $layout-top-bar-side-left-magin-left;
+  }
 
-.ebs-layout__content-wrapper {
-  position: relative;
-}
+  &-left ~ &-title {
+    width: auto;
+  }
 
-.ebs-layout__content {
-  width: 100%;
-  height: calc(100vh - #{$layout-top-bar-height} - #{$layout-footer-height});
-  overflow: hidden auto;
-  margin: 0 auto;
-  padding: rem(15px 25px);
-}
+  &-left,
+  &-right {
+    display: flex;
+    align-items: center;
+    white-space: nowrap;
+  }
 
-.ebs-layout__content .ebs-breadcrumbs__wrapper {
-  margin-bottom: rem(20px);
-}
+  &-right {
+    margin-left: $layout-top-bar-side-right-magin-left;
+    width: 100%;
+    justify-content: flex-end;
 
-.ebs-layout__content .ebs-breadcrumbs__wrapper + .ebs-card .ebs-card__header {
-  padding-top: 0;
-}
+    > *:not(:first-child) {
+      margin-left: $gutter-size * 2;
+    }
 
-.ebs-layout__footer {
-  height: $layout-footer-height;
-  display: flex;
-  align-items: center;
-  color: $grey-300;
-}
+    &-item {
+      display: flex;
+      align-items: center;
+      margin-left: $gutter-size;
 
-.ebs-layout__footer span {
-  @include fontRegular;
-  display: block;
-  margin: 0 auto;
+      > *:not(:first-child) {
+        margin-left: $gutter-size;
+      }
+    }
+  }
 }
diff --git a/src/components/organisms/Modal/Modal.scss b/src/components/organisms/Modal/Modal.scss
index 098006ab..ce8ee91d 100644
--- a/src/components/organisms/Modal/Modal.scss
+++ b/src/components/organisms/Modal/Modal.scss
@@ -1,10 +1,3 @@
-.ebs-mask {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  background: rgba(0, 0, 0, 0.4);
-}
-
 @keyframes fadeModal {
   0% {
     opacity: 0;
@@ -37,99 +30,96 @@
   border-radius: rem($border-radius);
   background-color: $background-content;
   animation: 250ms cubic-bezier(0.25, 0.1, 0.25, 1) 0s 1 normal forwards running fadeModal;
-}
-
-.ebs-modal.ebs-modal__size--small {
-  width: 100%;
-  max-width: rem(550px);
-}
-
-.ebs-modal.ebs-modal__size--regular {
-  width: 100%;
-  max-width: rem(760px);
-}
-
-.ebs-modal.ebs-modal__size--large {
-  width: 100%;
-  max-width: rem(960px);
-}
-
-.ebs-modal__content {
-  padding: rem($gutter-size);
-}
-
-.ebs-modal.hide-header .ebs-modal__content {
-  padding: rem($gutter-size * 2);
-}
-
-.ebs-modal__header {
-  position: relative;
-  padding: rem($gutter-size);
-  border-bottom: 1px solid $border-color;
-  background-color: $white;
-}
-
-.ebs-modal__header--close {
-  position: absolute;
-  top: 50%;
-  right: rem($gutter-size);
-  transform: translate3d(0, -50%, 0);
-  border-radius: rem($border-radius);
-  color: $black;
-}
-
-.ebs-modal__title {
-  font-size: rem(14px);
-  @include fontMedium;
-  margin: 0;
-  padding: 0;
-}
 
-.ebs-modal__footer {
-  padding: rem($gutter-size);
-  border-top: 1px solid $border-color;
-  background-color: $white;
-}
-
-.ebs-modal__footer__button {
-  display: flex;
-  justify-content: space-between;
-}
-
-.ebs-modal__footer__button > div:not(:first-child) {
-  margin-left: rem($gutter-size);
-}
-
-.ebs-modal__footer__button > div:not(:first-child) > div:not(:first-child) {
-  margin-left: rem($gutter-size);
-}
+  &__size--small {
+    width: 100%;
+    max-width: rem(550px);
+  }
 
-.ebs-modal__footer__button.ebs-modal__footer__button--flex {
-  display: flex;
-  align-items: center;
-}
+  &__size--regular {
+    width: 100%;
+    max-width: rem(760px);
+  }
 
-.ebs-modal__footer__button.ebs-modal__footer__button--flex > * {
-  display: block;
-  white-space: nowrap;
-}
+  &__size--large {
+    width: 100%;
+    max-width: rem(960px);
+  }
 
-.ebs-modal__footer__button.ebs-modal__footer__button--flex > * > *:not(:first-child) {
-  margin-left: rem($gutter-size);
-}
+  &.hide-header &__content {
+    padding: rem($gutter-size * 2);
+  }
 
-.ebs-modal__footer__button.ebs-modal__footer__button--flex > *:first-child {
-  width: 100%;
-}
+  &__header {
+    position: relative;
+    padding: rem($gutter-size);
+    border-bottom: 1px solid $border-color;
+    background-color: $white;
+
+    &--close {
+      position: absolute;
+      top: 50%;
+      right: rem($gutter-size);
+      transform: translate3d(0, -50%, 0);
+      border-radius: rem($border-radius);
+      color: $black;
+    }
+  }
 
-.ebs-modal__footer__button.ebs-modal__footer__button--flex > *:last-child {
-  width: auto;
-}
+  &__content {
+    padding: rem($gutter-size);
+  }
 
-.ebs-modal__footer__button.ebs-modal__footer__button--center {
-  text-align: center;
-}
+  &__title {
+    font-size: rem(14px);
+    @include fontMedium;
+    margin: 0;
+    padding: 0;
+  }
 
-.ebs-modal__footer__button.ebs-modal__footer__button--center .ebs-button__wrapper:last__child {
-  margin-left: rem($gutter-size);
+  &__footer {
+    padding: rem($gutter-size);
+    border-top: 1px solid $border-color;
+    background-color: $white;
+
+    &__button {
+      display: flex;
+      justify-content: space-between;
+
+      &--flex {
+        display: flex;
+        align-items: center;
+
+        > * {
+          display: block;
+          white-space: nowrap;
+
+          &:first-child {
+            width: 100%;
+          }
+
+          &:last-child {
+            width: auto;
+          }
+
+          > *:not(:first-child) {
+            margin-left: rem($gutter-size);
+          }
+        }
+      }
+
+      &--center {
+        text-align: center;
+
+        .ebs-button__wrapper:last__child {
+          margin-left: rem($gutter-size);
+        }
+      }
+
+      > div:not(:first-child),
+      > div:not(:first-child) > div:not(:first-child) {
+        margin-left: rem($gutter-size);
+      }
+    }
+  }
 }
diff --git a/src/components/organisms/Sidebar/Item/Item.scss b/src/components/organisms/Sidebar/Item/Item.scss
index 3ca8290b..d72a6fbd 100644
--- a/src/components/organisms/Sidebar/Item/Item.scss
+++ b/src/components/organisms/Sidebar/Item/Item.scss
@@ -1,126 +1,130 @@
-.ebs-sidebar__item {
-  position: relative;
-  cursor: pointer;
-  transition: $transition-time;
-  padding: rem($gutter-size 27.5px $gutter-size 57.5px);
-  display: flex;
-  align-items: center;
-  color: $sidebar-item-text-color;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-height: rem(44px);
-}
-
-.ebs-sidebar__item.ebs-sidebar__toggler {
-  margin-bottom: rem(10px);
-
-  @include mq($until: small-desktop) {
-    display: none !important;
+.ebs-sidebar {
+  &__item {
+    position: relative;
+    cursor: pointer;
+    transition: $transition-time;
+    padding: rem($gutter-size 27.5px $gutter-size 57.5px);
+    display: flex;
+    align-items: center;
+    color: $sidebar-item-text-color;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-height: rem(44px);
+
+    &.ebs-sidebar__toggler {
+      margin-bottom: rem(10px);
+
+      @include mq($until: small-desktop) {
+        display: none !important;
+      }
+    }
+
+    // item has no options
+    &.invert:not(.has-options):hover,
+    &.invert.active:not(.has-options) {
+      background-color: $sidebar-item-hover-background;
+      color: $sidebar-item-hover-color;
+
+      .ebs-sidebar__text {
+        color: $sidebar-item-hover-color;
+      }
+    }
+
+    &:hover:not(.has-options),
+    &.active:not(.has-options) {
+      background-color: $sidebar-item-hover-background;
+      color: $sidebar-item-hover-color;
+
+      .ebs-sidebar__text {
+        color: $sidebar-item-hover-color;
+      }
+    }
+
+    // item has options
+    &.invert.has-options:hover,
+    &.invert.has-options.active {
+      background-color: $sidebar-item-hover-background;
+      color: $sidebar-item-hover-color;
+
+      .ebs-sidebar__text {
+        color: $sidebar-item-hover-color;
+      }
+    }
+
+    &.has-options:hover,
+    &.has-options.active {
+      background-color: $sidebar-item-hover-background;
+      color: $sidebar-item-hover-color;
+
+      .ebs-sidebar__text {
+        color: $sidebar-item-hover-color;
+      }
+    }
   }
-}
 
-// item has no options
-.ebs-sidebar__item.invert:not(.has-options):hover,
-.ebs-sidebar__item.invert.active:not(.has-options) {
-  background-color: $sidebar-item-hover-background;
-  color: $sidebar-item-hover-color;
-
-  .ebs-sidebar__text {
-    color: $sidebar-item-hover-color;
+  &__prefix svg {
+    position: absolute;
+    left: rem(20px);
+    top: 50%;
+    transform: translateY(-50%);
+    font-size: rem(18px);
   }
-}
 
-.ebs-sidebar__item:hover:not(.has-options),
-.ebs-sidebar__item.active:not(.has-options) {
-  background-color: $sidebar-item-hover-background;
-  color: $sidebar-item-hover-color;
-
-  .ebs-sidebar__text {
-    color: $sidebar-item-hover-color;
+  &__text {
+    color: $sidebar-item-text-color;
+    font-size: rem(14px);
+    transition: $transition-time;
   }
-}
 
-// item has options
-.ebs-sidebar__item.invert.has-options:hover,
-.ebs-sidebar__item.invert.has-options.active {
-  background-color: $sidebar-item-hover-background;
-  color: $sidebar-item-hover-color;
-
-  .ebs-sidebar__text {
-    color: $sidebar-item-hover-color;
+  &__suffix {
+    .ebs-icon {
+      position: absolute;
+      right: rem(12px);
+      top: calc(50% - 4px);
+      font-size: rem(10px);
+      transition: $transition-time;
+
+      path {
+        transition: $transition-time;
+      }
+
+      &.ebs-icon__left {
+        transform: rotate(270deg) translateY(-50%);
+      }
+
+      &.ebs-icon__bottom {
+        transform: rotate(180deg) translateY(-50%);
+      }
+    }
   }
-}
 
-.ebs-sidebar__item.has-options:hover,
-.ebs-sidebar__item.has-options.active {
-  background-color: $sidebar-item-hover-background;
-  color: $sidebar-item-hover-color;
-
-  .ebs-sidebar__text {
-    color: $sidebar-item-hover-color;
+  &__label.ebs-label__status-text {
+    padding: rem(12px 16px 6px);
+    margin: 0;
+    color: $sidebar-item-text-color;
   }
-}
 
-.ebs-sidebar__prefix svg {
-  position: absolute;
-  left: rem(20px);
-  top: 50%;
-  transform: translateY(-50%);
-  font-size: rem(18px);
-}
-
-.ebs-sidebar__text {
-  color: $sidebar-item-text-color;
-  font-size: rem(14px);
-  transition: $transition-time;
-}
+  &__options &__item {
+    padding: rem(5px 13.75px 5px 60px);
 
-.ebs-sidebar__suffix .ebs-icon {
-  position: absolute;
-  right: rem(12px);
-  top: calc(50% - 4px);
-  font-size: rem(10px);
-  transition: $transition-time;
-}
+    &:hover,
+    &.active,
+    &.invert:hover,
+    &.invert.active:hover {
+      background-color: rgba($sidebar-item-hover-background, 0.7);
 
-.ebs-sidebar__suffix .ebs-icon.ebs-icon__left {
-  transform: rotate(270deg) translateY(-50%);
-}
-
-.ebs-sidebar__suffix .ebs-icon.ebs-icon__bottom {
-  transform: rotate(180deg) translateY(-50%);
-}
-
-.ebs-sidebar__suffix .ebs-icon path {
-  transition: $transition-time;
-}
-
-.ebs-sidebar__label.ebs-label__status-text {
-  padding: rem(12px 16px 6px);
-  margin: 0;
-  color: $sidebar-item-text-color;
-}
-
-.ebs-sidebar__options .ebs-sidebar__item {
-  padding: rem(5px 13.75px 5px 60px);
-}
-
-.ebs-sidebar__options .ebs-sidebar__item:hover,
-.ebs-sidebar__options .ebs-sidebar__item.active,
-.ebs-sidebar__options .ebs-sidebar__item.invert:hover,
-.ebs-sidebar__options .ebs-sidebar__item.invert.active:hover {
-  background-color: rgba($sidebar-item-hover-background, 0.7);
-
-  .ebs-sidebar__text {
-    color: $sidebar-item-hover-color;
+      .ebs-sidebar__text {
+        color: $sidebar-item-hover-color;
+      }
+    }
   }
-}
 
-.ebs-sidebar__options .ebs-sidebar__item .ebs-sidebar__prefix {
-  display: none;
-}
+  &__options &__item &__prefix {
+    display: none;
+  }
 
-.ebs-sidebar__options .ebs-sidebar__item .ebs-sidebar__text {
-  font-size: rem(12px);
-  color: $sidebar-item-text-color;
+  &__options &__item .ebs-sidebar__text {
+    font-size: rem(12px);
+    color: $sidebar-item-text-color;
+  }
 }
diff --git a/src/components/organisms/Sidebar/Options/Item/Item.scss b/src/components/organisms/Sidebar/Options/Item/Item.scss
index f946a53b..25d05d69 100644
--- a/src/components/organisms/Sidebar/Options/Item/Item.scss
+++ b/src/components/organisms/Sidebar/Options/Item/Item.scss
@@ -1,20 +1,20 @@
 .ebs-optionsbar__item {
+  cursor: pointer;
   padding: rem(14px 16px);
-  color: $text-color;
   font-size: rem(14px);
-  cursor: pointer;
+  color: $text-color;
   transition: all $transition-time;
-}
 
-.ebs-optionsbar__item.disabled,
-.ebs-optionsbar__item.disabled:hover {
-  cursor: not-allowed;
-  color: $grey-300;
-  background-color: transparent;
-}
+  &.disabled,
+  &.disabled:hover {
+    cursor: not-allowed;
+    color: $grey-300;
+    background-color: transparent;
+  }
 
-.ebs-optionsbar__item:hover,
-.ebs-optionsbar__item.active {
-  background-color: $primary-000;
-  color: $primary-color;
+  &:hover,
+  &.active {
+    background-color: $primary-000;
+    color: $primary-color;
+  }
 }
diff --git a/src/components/organisms/Sidebar/Options/Options.scss b/src/components/organisms/Sidebar/Options/Options.scss
index ecad9f9c..4f699dfd 100644
--- a/src/components/organisms/Sidebar/Options/Options.scss
+++ b/src/components/organisms/Sidebar/Options/Options.scss
@@ -1,9 +1,9 @@
 .ebs-optionsbar {
   position: absolute;
   top: 0;
-  background-color: $grey-50;
-  border-right: 1px solid $border-color;
   width: rem(192px);
   height: 100vh;
+  background-color: $grey-50;
+  border-right: 1px solid $border-color;
   transition: $transition-time;
 }
diff --git a/src/components/organisms/Sidebar/Sidebar.scss b/src/components/organisms/Sidebar/Sidebar.scss
index 9c17c2e1..9e9762dd 100644
--- a/src/components/organisms/Sidebar/Sidebar.scss
+++ b/src/components/organisms/Sidebar/Sidebar.scss
@@ -15,147 +15,149 @@
 
   @include mq($until: small-desktop) {
     padding-top: rem(80px);
-  }
-}
 
-@include mq($until: small-desktop) {
-  .ebs-sidebar.ebs-sidebar__mobile--closed,
-  .ebs-sidebar.ebs-sidebar__mobile--opened {
-    transition: $transition-time;
-    padding-top: 0;
-  }
+    &__mobile--closed,
+    &__mobile--opened {
+      transition: $transition-time;
+      padding-top: 0;
+    }
 
-  .ebs-sidebar.ebs-sidebar__mobile--closed {
-    transform: translateX(-100%);
-  }
+    &__mobile--closed {
+      transform: translateX(-100%);
+    }
 
-  .ebs-sidebar.ebs-sidebar__mobile--opened {
-    width: $sidebar-width !important;
-    transform: translateX(0);
+    &__mobile--opened {
+      width: $sidebar-width !important;
+      transform: translateX(0);
+    }
   }
-}
 
-.ebs-sidebar__top {
-  margin-top: rem(5px);
-}
-
-.ebs-sidebar.ebs-sidebar--untoggled .ebs-sidebar__options {
-  left: $sidebar-width;
-}
-
-.ebs-sidebar.ebs-sidebar--toggled {
-  width: rem(57px);
-
-  .ebs-sidebar__options .ebs-sidebar__item:hover,
-  .ebs-sidebar__options .ebs-sidebar__item.active,
-  .ebs-sidebar__options .ebs-sidebar__item.invert:hover,
-  .ebs-sidebar__options .ebs-sidebar__item.invert.active:hover {
-    background-color: $primary-color;
+  &__top {
+    margin-top: rem(5px);
   }
 
-  @media (min-width: 54.84714em) {
-    + .ebs-layout__content-wrapper {
-      width: calc(100% - 4.38462rem) !important;
-    }
+  &--untoggled &__options {
+    left: $sidebar-width;
   }
-}
 
-.ebs-sidebar.ebs-sidebar--toggled .ebs-sidebar__label {
-  animation: fadeOut 0.1s;
-  white-space: nowrap;
-}
+  &--toggled {
+    width: rem(57px);
 
-.ebs-sidebar.ebs-sidebar--toggled .ebs-sidebar__item {
-  padding-right: 0;
-}
+    @media (min-width: 54.84714em) {
+      + .ebs-layout__content-wrapper {
+        width: calc(100% - 4.38462rem) !important;
+      }
+    }
 
-.ebs-sidebar.ebs-sidebar--toggled .ebs-sidebar__item .ebs-sidebar__text {
-  animation: fadeOut 0.1s;
-  white-space: nowrap;
-}
+    .ebs-sidebar__label {
+      animation: fadeOut 0.1s;
+      white-space: nowrap;
+    }
 
-.ebs-sidebar.ebs-sidebar--toggled .ebs-sidebar__item .ebs-sidebar__suffix .ebs-icon {
-  right: $gutter-size / 2;
-}
+    .ebs-sidebar__item {
+      padding-right: 0;
 
-.ebs-sidebar.ebs-sidebar--toggled .ebs-sidebar__options {
-  left: rem(57px);
-}
+      .ebs-sidebar__text {
+        animation: fadeOut 0.1s;
+        white-space: nowrap;
+      }
 
-.ebs-sidebar__bottom {
-  background-color: $sidebar-bottom-background;
-  width: 100%;
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  margin-top: rem(20px);
-  padding-bottom: rem(20px);
-  overflow: hidden;
+      .ebs-sidebar__suffix .ebs-icon {
+        right: $gutter-size / 2;
+      }
+    }
 
-  @include mq($until: small-desktop) {
-    padding-bottom: rem(120px);
+    .ebs-sidebar__options {
+      left: rem(57px);
+    }
+
+    .ebs-sidebar__options .ebs-sidebar__item:hover,
+    .ebs-sidebar__options .ebs-sidebar__item.active,
+    .ebs-sidebar__options .ebs-sidebar__item.invert:hover,
+    .ebs-sidebar__options .ebs-sidebar__item.invert.active:hover {
+      background-color: $primary-color;
+    }
   }
-}
 
-.ebs-sidebar::after {
-  content: '';
-  width: 1px;
-  height: $layout-top-bar-height + 2;
-  border-right: 1px solid $layout-top-bar-toggler-border-color;
-  position: absolute;
-  top: -$layout-top-bar-height - 2;
-  left: $sidebar-width - 2px;
-}
+  &--toggled &__item {
+    z-index: 3;
+  }
 
-.ebs-sidebar.ebs-sidebar--toggled .ebs-sidebar__item {
-  z-index: 3;
-}
+  &--toggled &__item.has-options {
+    padding-right: 0;
+  }
 
-.ebs-sidebar.ebs-sidebar--toggled .ebs-sidebar__item.has-options {
-  padding-right: 0;
-}
+  &--toggled &__item.active + .rah-static &__options &__item {
+    opacity: 1;
+    left: $layout-top-bar-height - 1;
+    transition: all $transition-time;
+  }
 
-.ebs-sidebar.ebs-sidebar--toggled .ebs-sidebar__item.active + .rah-static .ebs-sidebar__options .ebs-sidebar__item {
-  opacity: 1;
-  left: $layout-top-bar-height - 1;
-  transition: all $transition-time;
-}
+  &--toggled &__options &__item {
+    background-color: $sidebar-background;
+    padding: $gutter-size / 3 $gutter-size;
+    z-index: 2;
+    left: -$sidebar-width;
+    opacity: 0;
+    height: $layout-top-bar-height;
+    width: $sidebar-width - 1;
+    border-top: 1px solid $border-color;
+    border-right: 1px solid $border-color;
+
+    &.disabled {
+      background-color: $border-color;
+
+      span {
+        color: $grey-500;
+      }
+    }
 
-.ebs-sidebar.ebs-sidebar--toggled .ebs-sidebar__options .ebs-sidebar__item {
-  background-color: $sidebar-background;
-  padding: $gutter-size / 3 $gutter-size;
-  z-index: 2;
-  left: -$sidebar-width;
-  opacity: 0;
-  height: $layout-top-bar-height;
-  width: $sidebar-width - 1;
-  border-top: 1px solid $border-color;
-  border-right: 1px solid $border-color;
-}
+    &:nth-last-child(2) {
+      border-bottom: 1px solid $border-color;
+    }
 
-.ebs-sidebar.ebs-sidebar--toggled .ebs-sidebar__options .ebs-sidebar__item.disabled {
-  background-color: $border-color;
-}
+    span {
+      @include text-ellipsis;
+    }
+  }
 
-.ebs-sidebar.ebs-sidebar--toggled .ebs-sidebar__options .ebs-sidebar__item.disabled span {
-  color: $grey-500;
-}
+  &--toggled &__options &__item span {
+    @include text-ellipsis;
+  }
 
-.ebs-sidebar.ebs-sidebar--toggled .ebs-sidebar__options .ebs-sidebar__item:nth-last-child(2) {
-  border-bottom: 1px solid $border-color;
-}
+  &__mask {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100vw;
+    height: 100vh;
+    background-color: rgba($black, 0.5);
+    z-index: 4;
+    animation: fadeIn 0.3s forwards;
+  }
 
-.ebs-sidebar.ebs-sidebar--toggled .ebs-sidebar__options .ebs-sidebar__item span {
-  @include text-ellipsis;
-}
+  &__bottom {
+    background-color: $sidebar-bottom-background;
+    width: 100%;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    margin-top: rem(20px);
+    padding-bottom: rem(20px);
+    overflow: hidden;
+
+    @include mq($until: small-desktop) {
+      padding-bottom: rem(120px);
+    }
+  }
 
-.ebs-sidebar__mask {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 100vw;
-  height: 100vh;
-  background-color: rgba($black, 0.5);
-  z-index: 4;
-  animation: fadeIn 0.3s forwards;
+  &::after {
+    content: '';
+    width: 1px;
+    height: $layout-top-bar-height + 2;
+    border-right: 1px solid $layout-top-bar-toggler-border-color;
+    position: absolute;
+    top: -$layout-top-bar-height - 2;
+    left: $sidebar-width - 2px;
+  }
 }
diff --git a/src/components/organisms/SortBy/SortBy.scss b/src/components/organisms/SortBy/SortBy.scss
index 49282ae0..8292c632 100644
--- a/src/components/organisms/SortBy/SortBy.scss
+++ b/src/components/organisms/SortBy/SortBy.scss
@@ -1,84 +1,93 @@
-.ebs-sort-by__wrapper {
-  position: relative;
-  height: rem($sort-by-height);
-  display: flex;
-}
+.ebs-sort-by__tooltip {
+  padding: 0 !important;
+  border: 1px solid $border-color;
+  border-radius: $border-radius;
+  width: rem(162.5px);
 
-.ebs-sort-by__wrapper.ebs-sort-asc > .ebs-button__wrapper .ebs-icon {
-  transform: rotate(180deg);
-}
+  &-title {
+    @include fontMedium;
+    font-size: rem(11px);
+    padding: rem(12.5px);
+    border-bottom: 1px solid $border-color;
+    color: #3c3939;
+  }
 
-.ebs-sort-by__wrapper > .ebs-button__wrapper {
-  border-right: none;
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-}
+  &-items &-item {
+    position: relative;
+    padding: rem(12.5px);
+    font-size: rem(12px);
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    @include fontMedium;
+    cursor: pointer;
+    transition: 0.2s;
 
-.ebs-sort-by__wrapper .ebs-tooltip__trigger > .ebs-button__wrapper {
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-}
+    &--active {
+      @include fontBold;
+      color: $primary-color;
+    }
 
-.ebs-sort-by__wrapper .ebs-button__wrapper {
-  height: rem($sort-by-height);
+    &:hover {
+      background-color: #f4f3f2;
+      color: $primary-300;
+    }
 
-  .ebs-icon {
-    transition: 300ms transform;
+    &:not(:last-child) {
+      border-bottom: 1px solid $border-color;
+    }
+
+    .ebs-icon {
+      position: absolute;
+      right: rem(10px);
+      top: 50%;
+      transform: translateY(-50%);
+    }
   }
 }
 
-.ebs-sort-by__wrapper .ebs-button__wrapper.ebs-button__type--ghost .ebs-button .ebs-icon {
-  color: $sort-by-icon-color;
-}
+.ebs-sort-by__wrapper {
+  position: relative;
+  height: rem($sort-by-height);
+  display: flex;
 
-.ebs-sort-by__wrapper .ebs-button__wrapper.ebs-button__type--ghost .ebs-button:hover .ebs-icon {
-  color: $sort-by-icon-hover-color;
-}
+  > .ebs-button__wrapper {
+    border-right: none;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
 
-.ebs-sort-by__tooltip {
-  padding: 0 !important;
-  border: 1px solid $border-color;
-  border-radius: $border-radius;
-  width: rem(162.5px);
-}
+  &.ebs-sort-asc > .ebs-button__wrapper .ebs-icon {
+    transform: rotate(180deg);
+  }
 
-.ebs-sort-by__tooltip-title {
-  @include fontMedium;
-  font-size: rem(11px);
-  padding: rem(12.5px);
-  border-bottom: 1px solid $border-color;
-  color: #3c3939;
-}
+  .ebs-tooltip__trigger > .ebs-button__wrapper {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
 
-.ebs-sort-by__tooltip-items .ebs-sort-by__tooltip-item {
-  position: relative;
-  padding: rem(12.5px);
-  font-size: rem(12px);
-  text-overflow: ellipsis;
-  overflow: hidden;
-  white-space: nowrap;
-  @include fontMedium;
-  cursor: pointer;
-  transition: 0.2s;
-
-  .ebs-icon {
-    position: absolute;
-    right: rem(10px);
-    top: 50%;
-    transform: translateY(-50%);
+  .ebs-button__wrapper {
+    border: 1px solid $border-color;
+    height: rem($sort-by-height);
+
+    .ebs-icon {
+      transition: 300ms transform;
+    }
   }
-}
 
-.ebs-sort-by__tooltip-items .ebs-sort-by__tooltip-item:not(:last-child) {
-  border-bottom: 1px solid $border-color;
-}
+  .ebs-button--type-ghost .ebs-button {
+    color: $sort-by-text-color;
 
-.ebs-sort-by__tooltip-items .ebs-sort-by__tooltip-item--active {
-  @include fontBold;
-  color: $primary-color;
-}
+    .ebs-icon {
+      color: $sort-by-icon-color;
+    }
 
-.ebs-sort-by__tooltip-items .ebs-sort-by__tooltip-item:hover {
-  background-color: #f4f3f2;
-  color: $primary-300;
+    &:hover {
+      color: $sort-by-text-hover-color;
+
+      .ebs-icon {
+        color: $sort-by-icon-hover-color;
+      }
+    }
+  }
 }
diff --git a/src/components/organisms/Table/Table.scss b/src/components/organisms/Table/Table.scss
index 661f05ec..ed545f18 100644
--- a/src/components/organisms/Table/Table.scss
+++ b/src/components/organisms/Table/Table.scss
@@ -6,273 +6,281 @@
   @include mq($until: desktop) {
     display: none;
   }
-}
-
-.ebs-table.ebs-table__size-small td {
-  padding: rem($gutter-size / 2 $gutter-size);
-}
-
-.ebs-table .rc-table-content {
-  border: none;
-}
-
-.ebs-table .rc-table-expanded-row .rc-table-cell {
-  box-shadow: none;
-  padding: 0;
-}
-
-.ebs-table .rc-table-expanded-row .rc-table-cell .flex-item {
-  border-bottom: none;
-}
-
-.ebs-table th,
-.ebs-table td {
-  border-color: $border-color;
-  border-right: none;
-  padding: rem(22px 16px);
-}
-
-.ebs-table th:first-child,
-.ebs-table td:first-child {
-  border-left: $table-border !important;
-}
-
-.ebs-table th:last-child,
-.ebs-table td:last-child {
-  border-right: $table-border !important;
-}
-
-.ebs-table td {
-  @include fontMedium;
-  color: $text-color;
-}
-
-.ebs-table td a {
-  color: $primary-color;
-}
-
-.ebs-table td b,
-.ebs-table td strong {
-  @include fontBold;
-}
-
-.ebs-table td .ebs-time__period-cell > div > .ebs-info {
-  display: inline-block;
-}
-
-.ebs-table td .ebs-time__period-cell > div > .ebs-info:not(:first-child) {
-  padding-left: $table-body-font-size;
 
-  .ebs-info__icon {
-    display: none;
+  &__size-small td {
+    padding: rem($gutter-size / 2 $gutter-size);
   }
-}
-
-.ebs-table td .ebs-time__period-cell > div > .ebs-info:not(:last-child) {
-  margin-right: $table-body-font-size;
-}
-
-.ebs-table .rc-table-thead tr th.rc-table-cell {
-  text-transform: uppercase;
-  border: $table-head-cell-border;
-  border-top: $table-border;
-  border-bottom: $table-head-cell-bottom-border;
-  position: relative;
-  font-weight: $table-head-font-weight;
-  text-align: left;
-  background-color: $table-head-background;
-  font-size: $table-head-font-size;
-  color: $heading-color;
-  word-break: normal;
-}
-
-.ebs-table .rc-table-thead tr th.rc-table-cell.has-children {
-  border: $table-border;
-  border-right: none;
-}
-
-.ebs-table .rc-table-thead tr th.rc-table-cell.has-children + *:not(.has-children) {
-  border-left: $table-border;
-}
-
-.ebs-table .rc-table-thead tr th.rc-table-cell:not(:last-child) {
-  border-right: none;
-}
 
-.ebs-table .rc-table-thead tr th.rc-table-cell:not(:last-child) {
-  border-right: none;
-}
-
-.ebs-table .rc-table-thead tr th.rc-table-cell.rc-table-row-expand-icon-cell + th.rc-table-cell {
-  padding-left: 0;
-}
-
-.ebs-table__th-filtered {
-  cursor: pointer;
-  transition: $transition-time;
-
-  .ebs-icon {
-    font-size: $table-body-font-size;
-    margin-left: rem(6px);
-    position: relative;
-    top: 0;
+  &__th-filtered {
+    cursor: pointer;
     transition: $transition-time;
-    color: $text-color;
-  }
-}
 
-.ebs-table__th-filtered.ebs-table__th-filtered-asc,
-.ebs-table__th-filtered.ebs-table__th-filtered-desc {
-  @include fontMedium;
-  color: $text-color-secondary;
-
-  .ebs-icon {
-    color: $text-color-secondary;
+    &:hover {
+      color: $text-color-secondary;
+
+      .ebs-icon {
+        color: $text-color-secondary;
+      }
+    }
+
+    &-desc .ebs-icon {
+      transform: rotate(180deg);
+    }
+
+    &-asc,
+    &-desc {
+      @include fontMedium;
+      color: $text-color-secondary;
+
+      .ebs-icon {
+        color: $text-color-secondary;
+      }
+    }
+
+    .ebs-icon {
+      font-size: $table-body-font-size;
+      margin-left: rem(6px);
+      position: relative;
+      top: 0;
+      transition: $transition-time;
+      color: $text-color;
+    }
   }
-}
-
-.ebs-table__th-filtered.ebs-table__th-filtered-desc .ebs-icon {
-  transform: rotate(180deg);
-}
-
-.ebs-table__th-filtered:hover {
-  color: $text-color-secondary;
 
-  .ebs-icon {
-    color: $text-color-secondary;
+  .rc-table-thead tr:not(:first-child) th {
+    border: $table-border;
+    border-top: none;
+    border-right: none !important;
+    border-bottom: $table-head-cell-bottom-border;
   }
-}
-
-.ebs-table .rc-table-thead tr:not(:first-child) th {
-  border: $table-border;
-  border-top: none;
-  border-right: none !important;
-  border-bottom: $table-head-cell-bottom-border;
-}
-
-.ebs-table .rc-table-tbody tr.rc-table-row:hover:nth-child(odd) td.rc-table-cell,
-.ebs-table .rc-table-tbody tr.rc-table-row:hover:nth-child(even) td.rc-table-cell {
-  background-color: $table-body-cell-hover-background;
-}
-
-.ebs-table .rc-table-tbody tr.rc-table-row td.rc-table-cell {
-  word-break: normal;
-  border: $table-body-cell-border;
-  transition: $transition-time;
-}
-
-.ebs-table .rc-table-tbody tr.rc-table-row td.rc-table-cell:not(:last-child) {
-  border-right: none;
-}
 
-.ebs-table .rc-table-tbody tr.rc-table-row:nth-child(odd) td.rc-table-cell {
-  background-color: $table-body-cell-odd-background;
-  font-size: $table-body-font-size;
-}
-
-.ebs-table .rc-table-tbody tr.rc-table-row:last-child td {
-  border-bottom: $table-border;
-}
-
-.ebs-table__mobile {
-  display: none;
-
-  @include mq($until: desktop) {
-    display: block;
+  .rc-table-tbody tr.rc-table-row {
+    td.rc-table-cell {
+      word-break: normal;
+      border: $table-body-cell-border;
+      transition: $transition-time;
+      text-align: $table-body-cell-text-align;
+      white-space: nowrap;
+
+      &:not(:last-child) {
+        border-right: none;
+      }
+    }
+
+    &:nth-child(odd) td.rc-table-cell {
+      background-color: $table-body-cell-odd-background;
+      font-size: $table-body-font-size;
+    }
+
+    &:hover:nth-child(odd) td.rc-table-cell,
+    &:hover:nth-child(even) td.rc-table-cell {
+      background-color: $table-body-cell-hover-background;
+    }
+
+    &:last-child td {
+      border-bottom: $table-border;
+    }
   }
-}
 
-.ebs-table__mobile .ebs-button__wrapper {
-  width: 100%;
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
-}
+  &__mobile {
+    display: none;
 
-.ebs-table__mobile .ebs-action__wrapper {
-  position: relative;
-}
+    @include mq($until: desktop) {
+      display: block;
+    }
+
+    &-item {
+      @include elevation-2;
+      position: relative;
+      border: $table-body-mobile-cell-border;
+      border-radius: $border-radius;
+      background-color: $table-head-background;
+      display: flex;
+      flex-wrap: wrap;
+
+      &-key {
+        font-size: rem($gutter-size);
+        position: absolute;
+        top: rem($gutter-size);
+        right: rem($gutter-size);
+        color: $grey-400;
+      }
+
+      &-title {
+        padding: rem($gutter-size $gutter-size $gutter-size / 2);
+        font-size: rem($table-body-font-size);
+        width: 100%;
+      }
+
+      &-desc {
+        padding: rem(0 $gutter-size $gutter-size);
+        width: 100%;
+      }
+
+      &-desc:not(:last-child) {
+        border-bottom: $table-body-mobile-cell-border;
+      }
+
+      &-child {
+        padding: rem($gutter-size);
+        width: 50%;
+
+        &-title {
+          display: block;
+          font-size: rem($table-body-font-size);
+          margin-bottom: rem(5px);
+          color: $grey-400;
+        }
+
+        &:nth-child(even) {
+          border-right: $table-body-mobile-cell-border;
+        }
+
+        &:last-child {
+          border-right: unset;
+          width: 100%;
+        }
+      }
+
+      &-action {
+        width: 100%;
+        border-top: $table-body-mobile-cell-border;
+        border-bottom-left-radius: $border-radius;
+        border-bottom-right-radius: $border-radius;
+        color: $white;
+        display: flex;
+        align-items: center;
+        text-align: center;
+        padding: rem($gutter-size 5px);
+
+        > * {
+          width: 100%;
+          display: block;
+        }
+
+        > .flex {
+          display: flex;
+          width: 100%;
+          align-items: center;
+          justify-content: center;
+        }
+      }
+
+      &:not(:last-child) {
+        margin-bottom: rem($gutter-size);
+      }
+    }
+
+    .ebs-button__wrapper {
+      width: 100%;
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+    }
+
+    .ebs-action__wrapper {
+      position: relative;
+    }
+  }
 
-.ebs-table__mobile-item {
-  position: relative;
-  border: $table-body-mobile-cell-border;
-  border-radius: $border-radius;
-  background-color: $table-head-background;
-  display: flex;
-  flex-wrap: wrap;
-  @include elevation-2;
-}
+  .rc-table-content {
+    border: none;
+  }
 
-.ebs-table__mobile-item:not(:last-child) {
-  margin-bottom: rem($gutter-size);
-}
+  .rc-table-expanded-row {
+    .rc-table-cell {
+      box-shadow: none;
+      padding: 0;
 
-.ebs-table__mobile-item-key {
-  font-size: rem($gutter-size);
-  position: absolute;
-  top: rem($gutter-size);
-  right: rem($gutter-size);
-  color: $grey-400;
-}
+      .flex-item {
+        border-bottom: none;
+      }
+    }
+  }
 
-.ebs-table__mobile-item-title {
-  padding: rem($gutter-size $gutter-size $gutter-size / 2);
-  font-size: rem($table-body-font-size);
-  width: 100%;
-}
+  th,
+  td {
+    border-color: $border-color;
+    border-right: none;
+    padding: rem(22px 16px);
 
-.ebs-table__mobile-item-desc {
-  padding: rem(0 $gutter-size $gutter-size);
-  width: 100%;
-}
+    &:first-child {
+      border-left: $table-border !important;
+    }
 
-.ebs-table__mobile-item-desc:not(:last-child) {
-  border-bottom: $table-body-mobile-cell-border;
-}
+    &:last-child {
+      border-right: $table-border !important;
+    }
+  }
 
-.ebs-table__mobile-item-child {
-  padding: rem($gutter-size);
-  width: 50%;
-}
+  td {
+    @include fontMedium;
+    color: $text-color;
 
-.ebs-table__mobile-item-child:nth-child(even) {
-  border-right: $table-body-mobile-cell-border;
-}
+    a {
+      color: $primary-color;
+    }
 
-.ebs-table__mobile-item-child:last-child {
-  border-right: unset;
-}
+    b,
+    strong {
+      @include fontBold;
+    }
 
-.ebs-table__mobile-item-child-title {
-  display: block;
-  font-size: rem($table-body-font-size);
-  margin-bottom: rem(5px);
-  color: $grey-400;
-}
+    .ebs-time__period-cell > div > .ebs-info {
+      display: inline-block;
+    }
 
-.ebs-table__mobile-item-action {
-  width: 100%;
-  border-top: $table-body-mobile-cell-border;
-  border-bottom-left-radius: $border-radius;
-  border-bottom-right-radius: $border-radius;
-  color: $white;
-  display: flex;
-  align-items: center;
-  text-align: center;
-  padding: rem($gutter-size 5px);
-}
+    .ebs-time__period-cell > div > .ebs-info:not(:first-child) {
+      padding-left: $table-body-font-size;
 
-.ebs-table__mobile-item-action > .flex {
-  display: flex;
-  width: 100%;
-  align-items: center;
-  justify-content: center;
-}
+      .ebs-info__icon {
+        display: none;
+      }
+    }
 
-.ebs-table__mobile-item-action > * {
-  width: 100%;
-  display: block;
-}
+    .ebs-time__period-cell > div > .ebs-info:not(:last-child) {
+      margin-right: $table-body-font-size;
+    }
+  }
 
-.ebs-table__mobile-child:last-child {
-  width: 100%;
+  .rc-table-thead tr {
+    &.rc-table-row-expand-icon-cell + th.rc-table-cell {
+      padding-left: 0;
+    }
+
+    th.rc-table-cell {
+      text-transform: uppercase;
+      border: $table-head-cell-border;
+      border-bottom: $table-head-cell-bottom-border;
+      border-top: $table-border;
+      position: relative;
+      font-weight: $table-head-font-weight;
+      text-align: $table-head-cell-text-align;
+      background-color: $table-head-background;
+      font-size: $table-head-font-size;
+      color: $heading-color;
+      word-break: normal;
+
+      &.has-children {
+        border: $table-border;
+        border-right: none;
+        border-bottom: unset;
+
+        + *:not(.has-children) {
+          border-left: $table-border;
+        }
+      }
+    }
+
+    &:not(:last-child) th.rc-table-cell {
+      border-right: none;
+    }
+
+    &:not(:last-child) th.rc-table-cell {
+      border-right: none;
+    }
+
+    &:not(:first-child) th.rc-table-cell {
+      border-left: $table-border;
+    }
+  }
 }
diff --git a/src/components/organisms/Table/Table.tsx b/src/components/organisms/Table/Table.tsx
index 34746339..642ac377 100644
--- a/src/components/organisms/Table/Table.tsx
+++ b/src/components/organisms/Table/Table.tsx
@@ -20,7 +20,7 @@ export interface Column<T> {
 interface TableProps<T extends object> {
   className?: string;
   page?: number;
-  data: T[];
+  data?: T[];
   columns: Column<T>[];
   size?: 'small' | 'big' | 'regular';
   expandable?: any;
diff --git a/src/styles/global-styles.scss b/src/styles/global-styles.scss
index 3b802054..3b15f8b6 100644
--- a/src/styles/global-styles.scss
+++ b/src/styles/global-styles.scss
@@ -95,7 +95,7 @@ strong {
 }
 
 .no-wrap {
-  white-space: nowrap;
+  white-space: nowrap !important;
 }
 
 ::-webkit-scrollbar {
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index f3a73c8c..320cc2b0 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -229,9 +229,11 @@ $table-box-shadow: none !default;
 $table-body-cell-border: $table-border !default;
 $table-body-cell-odd-background: $background-content !default;
 $table-body-cell-hover-background: $grey-100 !default;
+$table-body-cell-text-align: left !default;
 $table-body-mobile-cell-border: $table-border !default;
 $table-head-font-weight: 500 !default;
 $table-body-font-size: 10px !default;
+$table-head-cell-text-align: left !default;
 $table-head-font-size: 13px !default;
 $table-head-background: $white !default;
 $table-head-cell-border: $table-border !default;
@@ -245,3 +247,5 @@ $table-font-size: $font-size-base !default;
 $sort-by-height: 36px !default;
 $sort-by-icon-color: $primary-color !default;
 $sort-by-icon-hover-color: $white !default;
+$sort-by-text-color: $text-color !default;
+$sort-by-text-hover-color: $white !default;

From 78a13c55e207112d4c2af2b127d88dcdc4765c73 Mon Sep 17 00:00:00 2001
From: Nicolae Tataru <devdfan@gmail.com>
Date: Tue, 19 Jan 2021 14:29:27 +0200
Subject: [PATCH 4/6] Small fix

---
 src/components/atoms/Button/Button.scss     | 2 +-
 src/components/organisms/SortBy/SortBy.scss | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/atoms/Button/Button.scss b/src/components/atoms/Button/Button.scss
index 8d74751a..484e3377 100644
--- a/src/components/atoms/Button/Button.scss
+++ b/src/components/atoms/Button/Button.scss
@@ -91,7 +91,7 @@
     color: $primary-color;
   }
 
-  &--type-ghost {
+  &--type-ghost.ebs-button__wrapper {
     background-color: $btn-type-ghost-background;
     border-color: $btn-type-ghost-border-color;
     color: $btn-type-ghost-color;
diff --git a/src/components/organisms/SortBy/SortBy.scss b/src/components/organisms/SortBy/SortBy.scss
index 8292c632..4435d321 100644
--- a/src/components/organisms/SortBy/SortBy.scss
+++ b/src/components/organisms/SortBy/SortBy.scss
@@ -67,7 +67,6 @@
   }
 
   .ebs-button__wrapper {
-    border: 1px solid $border-color;
     height: rem($sort-by-height);
 
     .ebs-icon {

From 13cfcc5922e0fc91680beed7d5daa759b167fce3 Mon Sep 17 00:00:00 2001
From: Nicolae Tataru <devdfan@gmail.com>
Date: Tue, 19 Jan 2021 15:19:05 +0200
Subject: [PATCH 5/6] Minor fixes

---
 src/components/atoms/Alert/Alert.scss         |  6 ++--
 src/components/atoms/Alert/Alert.tsx          |  2 +-
 src/components/atoms/Avatar/Avatar.scss       | 26 +++++++-------
 src/components/atoms/Avatar/Avatar.tsx        |  2 +-
 src/components/atoms/Avatar/AvatarInline.tsx  |  4 +--
 src/components/atoms/Button/Button.scss       | 36 +++++++++----------
 src/components/atoms/Button/Button.tsx        | 10 +++---
 src/components/atoms/Label/Label.scss         | 18 +++++-----
 src/components/atoms/Label/Label.tsx          |  6 ++--
 .../atoms/LoaderSpinner/LoaderSpinner.scss    |  6 ++--
 .../atoms/LoaderSpinner/LoaderSpinner.tsx     |  2 +-
 src/components/organisms/Form/Form.tsx        |  3 +-
 src/components/organisms/SortBy/SortBy.scss   |  2 +-
 13 files changed, 62 insertions(+), 61 deletions(-)

diff --git a/src/components/atoms/Alert/Alert.scss b/src/components/atoms/Alert/Alert.scss
index 6c6bd947..a6784625 100644
--- a/src/components/atoms/Alert/Alert.scss
+++ b/src/components/atoms/Alert/Alert.scss
@@ -14,7 +14,7 @@
     color: $success-color;
   }
 
-  &__type--info {
+  &--info {
     border: 1px dashed $info-color;
 
     .ebs-icon {
@@ -22,7 +22,7 @@
     }
   }
 
-  &__type--warning {
+  &--warning {
     border: 1px dashed $warning-color;
 
     .ebs-icon {
@@ -30,7 +30,7 @@
     }
   }
 
-  &__type--error {
+  &--error {
     border: 1px dashed $danger-color;
 
     .ebs-icon {
diff --git a/src/components/atoms/Alert/Alert.tsx b/src/components/atoms/Alert/Alert.tsx
index 78b01ab9..48abe8f7 100644
--- a/src/components/atoms/Alert/Alert.tsx
+++ b/src/components/atoms/Alert/Alert.tsx
@@ -32,7 +32,7 @@ export const Alert: React.FC<Props> = ({ type = 'success', message = '', classNa
   }, [message, getHeader]);
 
   return message.length ? (
-    <div ref={ref} className={cn(`ebs-alert`, `ebs-alert__type--${type}`, className)}>
+    <div ref={ref} className={cn(`ebs-alert`, `ebs-alert--${type}`, className)}>
       {renderByType[type]}
       {message}
     </div>
diff --git a/src/components/atoms/Avatar/Avatar.scss b/src/components/atoms/Avatar/Avatar.scss
index 6ef99538..e6fc92af 100644
--- a/src/components/atoms/Avatar/Avatar.scss
+++ b/src/components/atoms/Avatar/Avatar.scss
@@ -8,42 +8,38 @@
     border-radius: 50%;
   }
 
-  &--color-white &__inline-alt {
-    color: $white;
-  }
-
-  &__type--regular {
+  &--regular {
     color: $primary-color;
     background-color: $grey-100;
   }
 
-  &__type--primary {
+  &--primary {
     color: $white;
     background-color: $primary-color;
   }
 
-  &__type--white {
+  &--white {
     color: $text-color;
     background-color: $white;
   }
 
-  &__size--small {
+  &--small {
     min-width: $avatar-size-small;
     width: $avatar-size-small;
     height: $avatar-size-small;
   }
 
-  &__size--small &-short-alt {
+  &--small &-short-alt {
     font-size: $avatar-font-small;
   }
 
-  &__size--big {
+  &--big {
     min-width: $avatar-size-big;
     width: $avatar-size-big;
     height: $avatar-size-big;
   }
 
-  &__size--big &-short-alt {
+  &--big &-short-alt {
     font-size: $avatar-font-big;
   }
 
@@ -82,7 +78,7 @@
       background-color: $primary-color;
     }
 
-    &--reuanctivegular {
+    &--inactive {
       background-color: $avatar-status-uanctive;
     }
   }
@@ -121,7 +117,7 @@
     align-items: center;
     text-align: left;
 
-    &--type-reversed &-alt {
+    &--reversed &-alt {
       margin-left: 0;
       margin-right: $gutter-size;
     }
@@ -133,6 +129,10 @@
       color: $black;
     }
 
+    &--white &-alt {
+      color: $white;
+    }
+
     &-description {
       font-size: rem(10px);
       color: $avatar-description-color;
diff --git a/src/components/atoms/Avatar/Avatar.tsx b/src/components/atoms/Avatar/Avatar.tsx
index cc47ff65..2f4fd659 100644
--- a/src/components/atoms/Avatar/Avatar.tsx
+++ b/src/components/atoms/Avatar/Avatar.tsx
@@ -33,7 +33,7 @@ export const Avatar: React.FC<AvatarProps> = ({
 
   return (
     <div
-      className={cn(`ebs-avatar`, `ebs-avatar__size--${size}`, `ebs-avatar__type--${type}`, className, {
+      className={cn(`ebs-avatar`, `ebs-avatar--${size}`, `ebs-avatar--${type}`, className, {
         'ebs-avatar--circle': circle,
       })}
     >
diff --git a/src/components/atoms/Avatar/AvatarInline.tsx b/src/components/atoms/Avatar/AvatarInline.tsx
index 96d3296c..06b6fbfd 100644
--- a/src/components/atoms/Avatar/AvatarInline.tsx
+++ b/src/components/atoms/Avatar/AvatarInline.tsx
@@ -19,8 +19,8 @@ export const AvatarInline: React.FC<CardProps> = ({
     className={cn(
       `ebs-avatar__inline`,
       {
-        'ebs-avatar__inline--type-reversed': reversed,
-        [`ebs-avatar--color-${type}`]: type === 'white',
+        'ebs-avatar__inline--reversed': reversed,
+        'ebs-avatar__inline--white': type === 'white',
       },
       className,
     )}
diff --git a/src/components/atoms/Button/Button.scss b/src/components/atoms/Button/Button.scss
index 484e3377..50ff5149 100644
--- a/src/components/atoms/Button/Button.scss
+++ b/src/components/atoms/Button/Button.scss
@@ -18,22 +18,22 @@
     height: 100%;
   }
 
-  &--type-prefix button.ebs-button {
+  &--prefix button.ebs-button {
     padding-left: rem(30px);
   }
 
-  &--type-icon {
+  &--icon {
     display: flex;
     align-items: center;
   }
 
-  &--type-block {
+  &--block {
     width: 100%;
     display: block;
   }
 
   // button type (Color)
-  &--type-primary {
+  &--primary {
     border-color: $primary-color;
     background-color: $primary-color;
     color: $white;
@@ -51,7 +51,7 @@
     }
   }
 
-  &--type-primary & {
+  &--primary & {
     color: $white;
 
     :hover {
@@ -59,7 +59,7 @@
     }
   }
 
-  &--type-fill {
+  &--fill {
     border-color: $primary-100;
     background-color: $primary-100;
     color: $primary-color;
@@ -87,11 +87,11 @@
     }
   }
 
-  &--type-fill & {
+  &--fill & {
     color: $primary-color;
   }
 
-  &--type-ghost.ebs-button__wrapper {
+  &--ghost.ebs-button__wrapper {
     background-color: $btn-type-ghost-background;
     border-color: $btn-type-ghost-border-color;
     color: $btn-type-ghost-color;
@@ -119,11 +119,11 @@
     }
   }
 
-  &--type-ghost & {
+  &--ghost & {
     color: $btn-type-ghost-color;
   }
 
-  &--type-text {
+  &--text {
     background-color: transparent;
     color: $primary-color;
 
@@ -146,11 +146,11 @@
     }
   }
 
-  &--type-text & {
+  &--text & {
     color: $primary-color;
   }
 
-  &--type-disabled {
+  &--disabled {
     background-color: $border-color;
 
     .ebs-button {
@@ -160,31 +160,31 @@
   }
 
   // button size
-  &--size-large {
+  &--large {
     border-radius: $btn-border-radius-lg;
   }
 
-  &--size-large & {
+  &--large & {
     padding: rem($btn-padding-y-lg $btn-padding-x-lg);
     font-weight: $btn-font-weight-lg;
     font-size: rem($btn-font-size-lg);
   }
 
-  &--size-medium {
+  &--medium {
     border-radius: $btn-border-radius;
   }
 
-  &--size-medium & {
+  &--medium & {
     padding: rem($btn-padding-y $btn-padding-x);
     font-weight: $btn-font-weight;
     font-size: rem($btn-font-size);
   }
 
-  &--size-small {
+  &--small {
     border-radius: $btn-border-radius-sm;
   }
 
-  &--size-small & {
+  &--small & {
     padding: rem($btn-padding-y-sm $btn-padding-x-sm);
     font-weight: $btn-font-weight-sm;
     font-size: rem($btn-font-size-sm);
diff --git a/src/components/atoms/Button/Button.tsx b/src/components/atoms/Button/Button.tsx
index 0c9dac39..5b803bb1 100644
--- a/src/components/atoms/Button/Button.tsx
+++ b/src/components/atoms/Button/Button.tsx
@@ -38,13 +38,13 @@ export const Button: React.FC<ButtonProps> = ({
     <div
       className={cn(
         `ebs-button__wrapper`,
-        `ebs-button--size-${size}`,
-        `ebs-button--type-${props.disabled ? 'disabled' : type}`,
+        `ebs-button--${size}`,
+        `ebs-button--${props.disabled ? 'disabled' : type}`,
         className,
         {
-          'ebs-button--type-block': block,
-          'ebs-button--type-prefix': prefix,
-          'ebs-button--type-icon': icon,
+          'ebs-button--block': block,
+          'ebs-button--prefix': prefix,
+          'ebs-button--icon': icon,
         },
       )}
       onClick={onClick}
diff --git a/src/components/atoms/Label/Label.scss b/src/components/atoms/Label/Label.scss
index a6ea345c..f91da8a5 100644
--- a/src/components/atoms/Label/Label.scss
+++ b/src/components/atoms/Label/Label.scss
@@ -4,14 +4,14 @@
   white-space: nowrap;
   @include fontRegular;
 
-  &--type-regular {
+  &--regular {
     font-size: rem(12px);
     margin-bottom: rem(5px);
     color: $text-color;
   }
 
-  &--type-circle,
-  &--type-fill {
+  &--circle,
+  &--fill {
     display: inline;
     font-size: rem(10px);
     padding: rem(5px 12px);
@@ -19,11 +19,11 @@
     border-radius: rem(12px);
   }
 
-  &--type-circle {
+  &--circle {
     color: $text-color;
   }
 
-  &--type-fill {
+  &--fill {
     color: $white !important;
     background: $text-color;
     border-radius: rem(12px);
@@ -70,7 +70,7 @@
     border-color: $danger-color;
   }
 
-  &--status-danger.ebs-label--type-icon {
+  &--status-danger.ebs-label--icon {
     background: $white;
     border-color: $white;
 
@@ -102,16 +102,16 @@
   }
 
   &.has-prefix,
-  &.has-prefix.ebs-label--type-circle {
+  &.has-prefix.ebs-label--circle {
     padding-left: rem(22.5px);
   }
 
   &.has-suffix,
-  &.has-suffix.ebs-label--type-circle {
+  &.has-suffix.ebs-label--circle {
     padding-right: rem(27.5px);
   }
 
-  &--type-icon {
+  &--icon {
     @include flex-center;
     width: $gutter-size;
     height: $gutter-size;
diff --git a/src/components/atoms/Label/Label.tsx b/src/components/atoms/Label/Label.tsx
index 3b9659df..7cfc710e 100644
--- a/src/components/atoms/Label/Label.tsx
+++ b/src/components/atoms/Label/Label.tsx
@@ -41,9 +41,9 @@ export const Label: React.FC<Props> = ({
 
   return (
     <div
-      className={cn(`ebs-label`, `ebs-label--type-${type}`, `ebs-label--status-${status}`, className, {
-        'ebs-label--type-icon': icon,
-        'ebs-label--type-icon-info': icon && icon.props && icon.props.type === 'info',
+      className={cn(`ebs-label`, `ebs-label--${type}`, `ebs-label--status-${status}`, className, {
+        'ebs-label--icon': icon,
+        'ebs-label--icon-info': icon && icon.props && icon.props.type === 'info',
         'has-prefix': prefix,
         'has-suffix': suffix,
         disabled: disabled,
diff --git a/src/components/atoms/LoaderSpinner/LoaderSpinner.scss b/src/components/atoms/LoaderSpinner/LoaderSpinner.scss
index afb8b45f..7d36afe5 100644
--- a/src/components/atoms/LoaderSpinner/LoaderSpinner.scss
+++ b/src/components/atoms/LoaderSpinner/LoaderSpinner.scss
@@ -19,7 +19,7 @@
   animation-iteration-count: infinite;
   animation-timing-function: linear;
 
-  &--size-small {
+  &--small {
     border: 2px solid $grey-500;
     border-top: 2px solid $primary-color;
     width: rem(15px);
@@ -27,7 +27,7 @@
     top: calc(50% - 5px);
   }
 
-  &--size-middle {
+  &--middle {
     border: 2px solid $grey-500;
     border-top: 2px solid $primary-color;
     width: rem(20px);
@@ -35,7 +35,7 @@
     top: calc(50% - 10px);
   }
 
-  &--size-regular {
+  &--regular {
     border: 6px solid $grey-500;
     border-top: 6px solid $primary-color;
     width: rem(60px);
diff --git a/src/components/atoms/LoaderSpinner/LoaderSpinner.tsx b/src/components/atoms/LoaderSpinner/LoaderSpinner.tsx
index 2cf150ce..b4c0847e 100644
--- a/src/components/atoms/LoaderSpinner/LoaderSpinner.tsx
+++ b/src/components/atoms/LoaderSpinner/LoaderSpinner.tsx
@@ -10,5 +10,5 @@ export interface Props {
 }
 
 export const LoaderSpinner: React.FC<Props> = ({ fixed, size = 'regular', className }) => (
-  <div className={cn(`ebs-loader__spinner`, `ebs-loader__spinner--size-${size}`, className, { fixed: fixed })} />
+  <div className={cn(`ebs-loader__spinner`, `ebs-loader__spinner--${size}`, className, { fixed: fixed })} />
 );
diff --git a/src/components/organisms/Form/Form.tsx b/src/components/organisms/Form/Form.tsx
index 79707729..04b9f74e 100644
--- a/src/components/organisms/Form/Form.tsx
+++ b/src/components/organisms/Form/Form.tsx
@@ -10,9 +10,10 @@ export type FormType = 'regular' | 'inline';
 interface Props extends FormProps {
   type?: FormType;
   className?: string;
+  onSubmit?: () => void;
 }
 
-export const Form: React.FC<FormProps> = ({ className, children, ...props }) => {
+export const Form: React.FC<Props> = ({ className, children, ...props }) => {
   return (
     <RCForm className={cn(`ebs-form`, className)} {...props}>
       {children}
diff --git a/src/components/organisms/SortBy/SortBy.scss b/src/components/organisms/SortBy/SortBy.scss
index 4435d321..0f2aad81 100644
--- a/src/components/organisms/SortBy/SortBy.scss
+++ b/src/components/organisms/SortBy/SortBy.scss
@@ -74,7 +74,7 @@
     }
   }
 
-  .ebs-button--type-ghost .ebs-button {
+  .ebs-button--ghost .ebs-button {
     color: $sort-by-text-color;
 
     .ebs-icon {

From 0760babcc2feb03a95a5c0a5266e72c0a80b6e9f Mon Sep 17 00:00:00 2001
From: Marcel Lefter <marcellefter@outlook.com>
Date: Tue, 19 Jan 2021 16:03:35 +0200
Subject: [PATCH 6/6] Update package.json

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 296a347e..5a6ee061 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ebs-integrator/react-ebs-ui",
-  "version": "0.0.1-beta.8",
+  "version": "0.0.1-beta.9",
   "description": "Basic React UI elements.",
   "author": "EBS Integrator",
   "maintainers": [