@shohojdhara/atomix 0.1.17 → 0.1.18

package/src/styles/06-components/_components.steps.scss

@@ -0,0 +1,99 @@
+@use '../01-settings/settings.config' as *;
+@use '../01-settings/settings.steps' as *;
+@use '../02-tools/tools.rem' as *;
+@use '../02-tools/tools.size' as *;
+@use '../02-tools/tools.hidden' as *;
+
+.c-steps {
+  $root: &;
+
+  --#{$prefix}steps-padding-x: #{rem($steps-padding-x)};
+  --#{$prefix}steps-padding-y: #{rem($steps-padding-y)};
+  --#{$prefix}steps-item-color: #{$steps-item-color};
+  --#{$prefix}steps-item-bg: #{$steps-item-bg};
+  --#{$prefix}steps-item-active-color: #{$steps-item-active-color};
+  --#{$prefix}steps-item-active-bg: #{$steps-item-active-bg};
+  --#{$prefix}steps-item-number-bg: #{$steps-item-number-bg};
+  --#{$prefix}steps-item-number-color: #{$steps-item-number-color};
+  --#{$prefix}steps-item-number-active-color: #{$steps-item-number-active-color};
+  --#{$prefix}steps-item-number-size: #{$steps-item-number-size};
+  --#{$prefix}steps-item-number-font-size: #{$steps-item-number-font-size};
+  --#{$prefix}steps-item-number-border-radius: #{$steps-item-number-border-radius};
+  --#{$prefix}steps-item-font-size: #{$steps-item-font-size};
+  --#{$prefix}steps-item-content-gap: #{rem($steps-item-content-gap)};
+  --#{$prefix}steps-line-height: #{rem($steps-line-height)};
+  --#{$prefix}steps-line-width: #{rem($steps-line-width)};
+  --#{$prefix}steps-gap: #{rem($steps-gap)};
+  --#{$prefix}steps-line-height-vertical: #{rem($steps-line-height-vertical)};
+  --#{$prefix}steps-line-width-vertical: #{rem($steps-line-width-vertical)};
+
+  display: inline-flex;
+  align-items: center;
+  gap: var(--#{$prefix}steps-gap);
+
+  &__item {
+    display: flex;
+    align-items: center;
+    gap: var(--#{$prefix}steps-gap);
+
+    &:first-child {
+      #{$root}__line {
+        @include visually-hidden();
+      }
+    }
+
+    &.is-active {
+      --#{$prefix}steps-item-bg: var(--#{$prefix}steps-item-active-bg);
+      --#{$prefix}steps-item-number-bg: var(--#{$prefix}steps-item-active-bg);
+      --#{$prefix}steps-item-number-color: var(--#{$prefix}steps-item-number-active-color);
+      --#{$prefix}steps-item-color: var(--#{$prefix}steps-item-active-color);
+    }
+  }
+
+  &__line {
+    width: var(--#{$prefix}steps-line-width);
+    height: var(--#{$prefix}steps-line-height);
+    background-color: var(--#{$prefix}steps-item-bg);
+    transition: 1s;
+  }
+
+  &__content {
+    display: flex;
+    align-items: center;
+    gap: var(--#{$prefix}steps-item-content-gap);
+  }
+
+  &__number {
+    display: grid;
+    place-items: center;
+    @include square(var(--#{$prefix}steps-item-number-size));
+    color: var(--#{$prefix}steps-item-number-color);
+    font-size: var(--#{$prefix}steps-item-number-font-size);
+    background-color: var(--#{$prefix}steps-item-number-bg);
+    border-radius: var(--#{$prefix}steps-item-number-border-radius);
+  }
+
+  &__text {
+    color: var(--#{$prefix}steps-item-color);
+    font-size: var(--#{$prefix}steps-item-font-size);
+  }
+
+  &--vertical {
+    --#{$prefix}steps-line-width: var(--#{$prefix}steps-line-width-vertical);
+    --#{$prefix}steps-line-height: var(--#{$prefix}steps-line-height-vertical);
+    flex-direction: column;
+    gap: 0;
+
+    #{$root} {
+      &__item {
+        gap: 0;
+        flex-direction: column;
+        align-items: flex-start;
+      }
+
+      &__line {
+        margin-left: calc(var(--#{$prefix}steps-item-number-size) / 2);
+      }
+    }
+  }
+}

package/src/styles/06-components/_components.tabs.scss

@@ -0,0 +1,124 @@
+@use '../01-settings/settings.config' as *;
+@use '../01-settings/settings.tabs' as *;
+@use '../02-tools/tools.rem' as *;
+@use '../02-tools/tools.transition' as *;
+@use '../02-tools/tools.breakpoints' as *;
+@use '../02-tools/tools.grid' as *;
+
+.c-tabs {
+  $root: &;
+
+  --#{$prefix}tabs-width: #{$tabs-width};
+  --#{$prefix}tabs-nav-btn-padding-x: #{rem($tabs-nav-btn-padding-x)};
+  --#{$prefix}tabs-nav-btn-padding-y: #{rem($tabs-nav-btn-padding-y)};
+  --#{$prefix}tabs-nav-btn-font-size: #{$tabs-nav-btn-font-size};
+  --#{$prefix}tabs-nav-btn-font-weight: #{$tabs-nav-btn-font-weight};
+  --#{$prefix}tabs-nav-btn-color: #{$tabs-nav-btn-color};
+  --#{$prefix}tabs-nav-btn-active-color: #{$tabs-nav-btn-active-color};
+  --#{$prefix}tabs-nav-btn-disabled-color: #{$tabs-nav-btn-disabled-color};
+  --#{$prefix}tabs-nav-btn-bg: #{$tabs-nav-btn-bg};
+  --#{$prefix}tabs-nav-btn-bg-hover: #{$tabs-nav-btn-bg-hover};
+  --#{$prefix}tabs-nav-btn-bg-active: #{$tabs-nav-btn-bg-active};
+  --#{$prefix}tabs-nav-btn-bg-disabled: #{$tabs-nav-btn-bg-disabled};
+  --#{$prefix}tabs-nav-btn-border-radius: #{$tabs-nav-btn-border-radius};
+  --#{$prefix}tabs-nav-btn-border-width: #{$tabs-nav-btn-border-width};
+  --#{$prefix}tabs-nav-btn-border-color: #{$tabs-nav-btn-border-color};
+  --#{$prefix}tabs-nav-btn-border-active-color: #{$tabs-nav-btn-border-active-color};
+  --#{$prefix}tabs-nav-btn-border-disabled-color: #{$tabs-nav-btn-border-disabled-color};
+  --#{$prefix}tabs-nav-btns-gap: #{rem($tabs-nav-btns-gap)};
+  --#{$prefix}tabs-nav-btn-inner-gap: #{rem($tabs-nav-btn-inner-gap)};
+  --#{$prefix}tabs-nav-btn-icon-size: #{rem($tab-nav-btn-icon-size)};
+  --#{$prefix}tabs-panel-padding-x: #{rem($tabs-panel-padding-x)};
+  --#{$prefix}tabs-panel-padding-y: #{rem($tabs-panel-padding-y)};
+
+  width: 100%;
+  max-width: var(--#{$prefix}tabs-width);
+
+  &__nav {
+    display: flex;
+    list-style: none;
+    padding-left: 0;
+    margin-bottom: 0;
+
+    @include media-breakpoint-down(sm) {
+      flex-wrap: wrap;
+    }
+  }
+
+  &__nav-item {
+    width: 50%;
+
+    & + & {
+      margin-left: var(--#{$prefix}tabs-nav-btns-gap);
+    }
+  }
+
+  &__nav-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--#{$prefix}tabs-nav-btn-inner-gap);
+    width: 100%;
+    color: var(--#{$prefix}tabs-nav-btn-color);
+    font-size: var(--#{$prefix}tabs-nav-btn-font-size);
+    font-weight: var(--#{$prefix}tabs-nav-btn-font-weight);
+    padding: var(--#{$prefix}tabs-nav-btn-padding-y) var(--#{$prefix}tabs-nav-btn-padding-x);
+    border-radius: var(--#{$prefix}tabs-nav-btn-border-radius);
+    border: var(--#{$prefix}tabs-nav-btn-border-width) solid transparent;
+    border-bottom: var(--#{$prefix}tabs-nav-btn-border-width) solid
+      var(--#{$prefix}tabs-nav-btn-border-color);
+    background-color: var(--#{$prefix}tabs-nav-btn-bg);
+    @include basic-transition();
+
+    &:active,
+    &.is-active {
+      color: var(--#{$prefix}tabs-nav-btn-active-color);
+      border-color: transparent transparent var(--#{$prefix}tabs-nav-btn-border-active-color)
+        transparent;
+    }
+
+    &:hover {
+      background-color: var(--#{$prefix}tabs-nav-btn-bg-hover);
+    }
+
+    &:disabled,
+    &.is-disabled {
+      --#{$prefix}tabs-nav-btn-border-active-color: var(
+        --#{$prefix}tabs-nav-btn-border-disabled-color
+      );
+
+      color: var(--#{$prefix}tabs-nav-btn-border-disabled-color);
+      background-color: var(--#{$prefix}tabs-nav-btn-bg-disabled);
+      pointer-events: none;
+    }
+
+    &:focus-visible {
+      outline: none;
+      border-color: var(--#{$prefix}tabs-nav-btn-border-active-color);
+    }
+
+    > i {
+      font-size: var(--#{$prefix}tabs-nav-btn-icon-size);
+    }
+  }
+
+  &__panels {
+    position: relative;
+  }
+
+  &__panel {
+    display: none;
+    opacity: 0;
+    overflow: hidden;
+    transition: opacity 0.3s cubic-bezier(0.65, 0.32, 1, 0.72);
+
+    &.is-active {
+      display: block;
+      opacity: 1;
+    }
+  }
+
+  &__panel-body {
+    padding: var(--#{$prefix}tabs-panel-padding-y) var(--#{$prefix}tabs-panel-padding-x);
+  }
+}

package/src/styles/06-components/_components.testimonials.scss

@@ -0,0 +1,65 @@
+@use '../01-settings/settings.config' as *;
+@use '../01-settings/settings.testimonials' as *;
+@use '../02-tools/tools.rem' as *;
+
+.c-testimonial {
+  --#{$prefix}testimonial-width: #{$testimonial-width};
+  --#{$prefix}testimonial-padding-x: #{rem($testimonial-padding-x)};
+  --#{$prefix}testimonial-padding-y: #{rem($testimonial-padding-y)};
+  --#{$prefix}testimonial-inner-spacer: #{rem($testimonial-inner-spacer)};
+  --#{$prefix}testimonial-bg: #{$testimonial-bg};
+  --#{$prefix}testimonial-quote-font-size: #{$testimonial-quote-font-size};
+  --#{$prefix}testimonial-quote-font-size-sm: #{$testimonial-quote-font-size-sm};
+  --#{$prefix}testimonial-quote-font-size-lg: #{$testimonial-quote-font-size-lg};
+  --#{$prefix}testimonial-quote-font-weight: #{$testimonial-quote-font-weight};
+  --#{$prefix}testimonial-quote-color: #{$testimonial-quote-color};
+  --#{$prefix}testimonial-author-font-size: #{$testimonial-author-font-size};
+  --#{$prefix}testimonial-author-color: #{$testimonial-author-color};
+  --#{$prefix}testimonial-author-role-font-size: #{$testimonial-author-role-font-size};
+  --#{$prefix}testimonial-author-role-color: #{$testimonial-author-role-color};
+  --#{$prefix}testimonial-author-inner-spacer: #{$testimonial-author-inner-spacer};
+
+  width: 100%;
+  max-width: var(--#{$prefix}testimonial-width);
+  padding: var(--#{$prefix}testimonial-padding-y) var(--#{$prefix}testimonial-padding-x);
+  background: var(--#{$prefix}testimonial-bg);
+
+  &__quote {
+    color: var(--#{$prefix}testimonial-quote-color);
+    font-size: var(--#{$prefix}testimonial-quote-font-size);
+    font-weight: var(--#{$prefix}testimonial-quote-font-weight);
+    margin-bottom: 0px;
+  }
+
+  &__author {
+    display: flex;
+    gap: var(--#{$prefix}testimonial-author-inner-spacer);
+    margin-top: var(--#{$prefix}testimonial-inner-spacer);
+  }
+
+  // &__author-avatar {
+
+  // }
+
+  // &__author-info {
+
+  // }
+
+  &__author-name {
+    color: var(--#{$prefix}testimonial-author-color);
+    font-size: var(--#{$prefix}testimonial-author-font-size);
+  }
+
+  &__author-role {
+    color: var(--#{$prefix}testimonial-author-role-color);
+    font-size: var(--#{$prefix}testimonial-author-role-font-size);
+  }
+
+  &--sm {
+    --#{$prefix}testimonial-quote-font-size: var(--#{$prefix}testimonial-quote-font-size-sm);
+  }
+
+  &--lg {
+    --#{$prefix}testimonial-quote-font-size: var(--#{$prefix}testimonial-quote-font-size-lg);
+  }
+}

package/src/styles/06-components/_components.todo.scss

@@ -0,0 +1,163 @@
+@use '../01-settings/settings.config' as config;
+@use '../01-settings/settings.todo' as todo;
+@use '../01-settings/settings.colors' as colors;
+@use '../02-tools/tools.color-functions' as *;
+@use '../02-tools/tools.to-rgb' as *;
+
+// Component: Todo
+// Description: Styles for the Todo component
+
+// Base todo component
+.c-todo {
+  --#{config.$prefix}todo-border-color: #{todo.$todo-border-color};
+  --#{config.$prefix}todo-border-radius: #{todo.$todo-border-radius};
+  --#{config.$prefix}todo-bg: #{todo.$todo-bg};
+  --#{config.$prefix}todo-color: #{todo.$todo-color};
+  --#{config.$prefix}todo-title-margin-bottom: #{todo.$todo-title-margin-bottom};
+  --#{config.$prefix}todo-item-padding: #{todo.$todo-item-padding};
+  --#{config.$prefix}todo-item-border-color: #{todo.$todo-item-border-color};
+  --#{config.$prefix}todo-item-hover-bg: #{todo.$todo-item-hover-bg};
+  --#{config.$prefix}todo-form-margin-bottom: #{todo.$todo-form-margin-bottom};
+  --#{config.$prefix}todo-form-gap: #{todo.$todo-form-gap};
+  --#{config.$prefix}todo-completed-color: #{todo.$todo-completed-color};
+  --#{config.$prefix}todo-completed-text-decoration: #{todo.$todo-completed-text-decoration};
+
+  width: 100%;
+  margin-bottom: todo.$todo-margin-bottom;
+  border: 1px solid var(--#{config.$prefix}todo-border-color);
+  border-radius: var(--#{config.$prefix}todo-border-radius);
+  background-color: var(--#{config.$prefix}todo-bg);
+  color: var(--#{config.$prefix}todo-color);
+  padding: todo.$todo-padding;
+
+  // Title
+  &__title {
+    font-size: todo.$todo-title-font-size;
+    font-weight: todo.$todo-title-font-weight;
+    margin-top: 0;
+    margin-bottom: var(--#{config.$prefix}todo-title-margin-bottom);
+  }
+
+  // Form
+  &__form {
+    margin-bottom: var(--#{config.$prefix}todo-form-margin-bottom);
+  }
+
+  &__form-group {
+    display: flex;
+    gap: var(--#{config.$prefix}todo-form-gap);
+  }
+
+  &__input {
+    flex: 1;
+    min-width: 0; // Prevent flex items from overflowing
+  }
+
+  &__add-btn {
+    flex-shrink: 0;
+  }
+
+  // List
+  &__list {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    border-top: 1px solid var(--#{config.$prefix}todo-item-border-color);
+  }
+
+  &__empty {
+    padding: var(--#{config.$prefix}todo-item-padding);
+    text-align: center;
+    color: todo.$todo-empty-color;
+    font-style: italic;
+  }
+
+  // Items
+  &__item {
+    padding: var(--#{config.$prefix}todo-item-padding);
+    border-bottom: 1px solid var(--#{config.$prefix}todo-item-border-color);
+    transition: background-color 0.2s ease;
+
+    &:hover {
+      background-color: var(--#{config.$prefix}todo-item-hover-bg);
+    }
+
+    &--completed {
+      .c-todo__item-text {
+        color: var(--#{config.$prefix}todo-completed-color);
+        text-decoration: var(--#{config.$prefix}todo-completed-text-decoration);
+      }
+    }
+  }
+
+  &__item-content {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.5rem;
+  }
+
+  &__checkbox-label {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    flex: 1;
+    cursor: pointer;
+  }
+
+  &__checkbox {
+    flex-shrink: 0;
+  }
+
+  &__item-text {
+    word-break: break-word;
+  }
+
+  &__delete-btn {
+    flex-shrink: 0;
+    opacity: 0.7;
+    transition: opacity 0.2s ease;
+
+    &:hover {
+      opacity: 1;
+    }
+  }
+
+  // Size variants
+  &--sm {
+    padding: todo.$todo-padding-sm;
+    font-size: todo.$todo-font-size-sm;
+
+    .c-todo__title {
+      font-size: todo.$todo-title-font-size-sm;
+      margin-bottom: todo.$todo-title-margin-bottom-sm;
+    }
+
+    .c-todo__item {
+      padding: todo.$todo-item-padding-sm;
+    }
+  }
+
+  &--lg {
+    padding: todo.$todo-padding-lg;
+
+    .c-todo__title {
+      font-size: todo.$todo-title-font-size-lg;
+      margin-bottom: todo.$todo-title-margin-bottom-lg;
+    }
+
+    .c-todo__item {
+      padding: todo.$todo-item-padding-lg;
+    }
+  }
+
+  // Disabled state
+  &--disabled {
+    opacity: todo.$todo-disabled-opacity;
+    cursor: not-allowed;
+
+    .c-todo__checkbox-label {
+      cursor: not-allowed;
+    }
+  }
+}

package/src/styles/06-components/_components.toggle.scss

@@ -0,0 +1,100 @@
+@use '../01-settings/settings.config' as *;
+@use '../01-settings/settings.toggle' as *;
+@use '../01-settings/settings.colors' as colors;
+@use '../02-tools/tools.rem' as *;
+@use '../02-tools/tools.hidden' as *;
+@use '../02-tools/tools.transition' as transition;
+
+.c-toggle {
+  $root: &;
+
+  --#{$prefix}toggle-gap: #{rem($toggle-gap)};
+  --#{$prefix}toggle-switch-bg: #{$toggle-switch-off-bg};
+  --#{$prefix}toggle-switch-disabled-bg: #{$toggle-switch-disabled-bg};
+  --#{$prefix}toggle-switch-border-radius: #{$toggle-switch-border-radius};
+  --#{$prefix}toggle-switch-box-shadow: #{$toggle-switch-box-shadow};
+  --#{$prefix}toggle-switch-handle-bg: #{$toggle-switch-handle-bg};
+  --#{$prefix}toggle-switch-handle-border-radius: #{$toggle-switch-handle-border-radius};
+  --#{$prefix}toggle-switch-width: #{rem($toggle-switch-width)};
+  --#{$prefix}toggle-switch-height: #{rem($toggle-switch-height)};
+  --#{$prefix}toggle-switch-handle-width: #{rem($toggle-switch-handle-width)};
+  --#{$prefix}toggle-switch-handle-height: #{rem($toggle-switch-handle-height)};
+  --#{$prefix}toggle-switch-handle-margin: #{rem($toggle-switch-handle-margin)};
+  --#{$prefix}toggle-label-font-size: #{$toggle-label-font-size};
+  --#{$prefix}toggle-label-color: #{$toggle-label-color};
+
+  display: flex;
+  align-items: center;
+  gap: var(--#{$prefix}toggle-gap);
+
+  &__switch {
+    position: relative;
+    display: flex;
+    align-items: center;
+    flex: 0 0 var(--#{$prefix}toggle-switch-width);
+    width: var(--#{$prefix}toggle-switch-width);
+    height: var(--#{$prefix}toggle-switch-height);
+    background-color: var(--#{$prefix}toggle-switch-bg);
+    border-radius: var(--#{$prefix}toggle-switch-border-radius);
+    user-select: none;
+    cursor: pointer;
+
+    @include transition.basic-transition();
+
+    &::before {
+      content: '';
+      display: inline-block;
+      width: var(--#{$prefix}toggle-switch-handle-width);
+      height: var(--#{$prefix}toggle-switch-handle-height);
+      margin: var(--#{$prefix}toggle-switch-handle-margin);
+      background: var(--#{$prefix}toggle-switch-handle-bg);
+      border-radius: var(--#{$prefix}toggle-switch-handle-border-radius);
+
+      @include transition.basic-transition();
+    }
+  }
+
+  &__label {
+    font-size: var(--#{$prefix}toggle-label-font-size);
+    color: var(--#{$prefix}toggle-label-color);
+  }
+
+  &.is-on {
+    --#{$prefix}toggle-switch-bg: #{$toggle-switch-on-bg};
+    #{$root}__switch {
+      &::before {
+        transform: translate(
+          calc(
+            var(--#{$prefix}toggle-switch-width) -
+              (
+                var(--#{$prefix}toggle-switch-handle-width) +
+                  var(--#{$prefix}toggle-switch-handle-margin) * 2
+              )
+          )
+        );
+      }
+    }
+  }
+
+  &.is-disabled:not(.is-on) {
+    pointer-events: none;
+
+    #{$root}__switch {
+      background: var(--#{$prefix}toggle-switch-disabled-bg);
+    }
+  }
+
+  &.is-disabled.is-on {
+    pointer-events: none;
+
+    #{$root}__switch {
+      &::after {
+        content: '';
+        position: absolute;
+        inset: 0;
+        background: colors.$overlay-2;
+        border-radius: var(--#{$prefix}toggle-switch-handle-border-radius);
+      }
+    }
+  }
+}

package/src/styles/06-components/_components.tooltip.scss

@@ -0,0 +1,136 @@
+@use '../01-settings/settings.config' as *;
+@use '../01-settings/settings.tooltip' as *;
+@use '../02-tools/tools.rem' as *;
+@use '../02-tools/tools.size' as *;
+
+.c-tooltip {
+  $root: &;
+
+  --#{$prefix}tooltip-max-width: #{rem($tooltip-max-width)};
+  --#{$prefix}tooltip-padding-x: #{rem($tooltip-padding-x)};
+  --#{$prefix}tooltip-padding-y: #{rem($tooltip-padding-y)};
+  --#{$prefix}tooltip-bg: #{$tooltip-bg};
+  --#{$prefix}tooltip-font-size: #{$tooltip-font-size};
+  --#{$prefix}tooltip-font-weight: #{$tooltip-font-weight};
+  --#{$prefix}tooltip-color: #{$tooltip-color};
+  --#{$prefix}tooltip-border-radius: #{$tooltip-border-radius};
+  --#{$prefix}tooltip-border-width: #{$tooltip-border-width};
+  --#{$prefix}tooltip-border-color: #{$tooltip-border-color};
+  --#{$prefix}tooltip-box-shadow: #{$tooltip-box-shadow};
+  --#{$prefix}tooltip-arrow-size: #{rem($tooltip-arrow-size)};
+
+  position: absolute;
+  bottom: calc(100% + var(--#{$prefix}tooltip-arrow-size));
+  left: 50%;
+  width: max-content;
+  height: max-content;
+  max-width: var(--#{$prefix}tooltip-max-width);
+  transform: translateX(-50%);
+  pointer-events: none;
+  z-index: 1000;
+
+  &__content {
+    position: relative;
+    color: var(--#{$prefix}tooltip-color);
+    font-size: var(--#{$prefix}tooltip-font-size);
+    font-weight: var(--#{$prefix}tooltip-font-weight);
+    padding: var(--#{$prefix}tooltip-padding-y) var(--#{$prefix}tooltip-padding-x);
+    background-color: var(--#{$prefix}tooltip-bg);
+    border-radius: var(--#{$prefix}tooltip-border-radius);
+    z-index: 2;
+    opacity: 0;
+    transform: scale(0.95);
+    transition:
+      opacity 0.2s ease-out,
+      transform 0.2s ease-out;
+  }
+
+  &__arrow {
+    position: absolute;
+    bottom: calc(var(--#{$prefix}tooltip-arrow-size) / -2);
+    left: 50%;
+    transform: translateX(-50%) rotate(45deg);
+    @include square(var(--#{$prefix}tooltip-arrow-size));
+    background-color: var(--#{$prefix}tooltip-bg);
+    z-index: 1;
+  }
+
+  &--top-left {
+    left: auto;
+    right: calc(100% - var(--#{$prefix}tooltip-arrow-size) * 2);
+    transform: translateX(0);
+
+    #{$root}__arrow {
+      left: auto;
+      right: var(--#{$prefix}tooltip-arrow-size);
+      transform: rotate(45deg);
+    }
+  }
+
+  &--top-right {
+    left: calc(100% - var(--#{$prefix}tooltip-arrow-size) * 2);
+    transform: translateX(0);
+
+    #{$root}__arrow {
+      left: var(--#{$prefix}tooltip-arrow-size);
+      transform: rotate(45deg);
+    }
+  }
+
+  &--right {
+    left: calc(100% + var(--#{$prefix}tooltip-arrow-size));
+    top: 50%;
+    transform: translateY(-50%);
+
+    #{$root}__arrow {
+      left: calc(var(--#{$prefix}tooltip-arrow-size) / -2);
+      top: 50%;
+      bottom: auto;
+      transform: rotate(45deg) translateY(-50%);
+      transform-origin: top;
+    }
+  }
+
+  &--left {
+    left: auto;
+    right: calc(100% + var(--#{$prefix}tooltip-arrow-size));
+    top: 50%;
+    transform: translateY(-50%);
+
+    #{$root}__arrow {
+      left: auto;
+      top: 50%;
+      bottom: auto;
+      right: calc(var(--#{$prefix}tooltip-arrow-size) / -5);
+      transform: rotate(45deg) translateY(-50%);
+    }
+  }
+
+  &--bottom {
+    top: calc(100% + var(--#{$prefix}tooltip-arrow-size));
+
+    #{$root}__arrow {
+      top: calc(var(--#{$prefix}tooltip-arrow-size) / -2);
+      bottom: auto;
+    }
+  }
+
+  &--bottom-left {
+    top: calc(100% + var(--#{$prefix}tooltip-arrow-size));
+    left: 0;
+  }
+
+  &--bottom-right {
+    top: calc(100% + var(--#{$prefix}tooltip-arrow-size));
+    right: 0;
+  }
+
+  &.is-active {
+    pointer-events: auto;
+
+    .c-tooltip__content {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+}