@use "sass:map";
$switch-sizes: (
  small: (
    button-size: 16px,
    container-width: 24px,
    container-height: 10px,
    translate-x: 10px,
  ),
  medium: (
    button-size: 20px,
    container-width: 32px,
    container-height: 14px,
    translate-x: 14px,
  ),
  large: (
    button-size: 24px,
    container-width: 40px,
    container-height: 16px,
    translate-x: 16px,
  ),
);

@mixin switch-size($size) {
  $button-size: map.get(map.get($switch-sizes, $size), button-size);
  $container-width: map.get(map.get($switch-sizes, $size), container-width);
  $container-height: map.get(map.get($switch-sizes, $size), container-height);
  $translate-x: map.get(map.get($switch-sizes, $size), translate-x);

  width: $container-width;
  height: $container-height;

  .ff--switch-button {
    width: $button-size;
    height: $button-size;
    transform: translateX(0);
    &.checked {
      transform: translateX($translate-x);
    }
  }
}

.ff--switch-container {
  position: relative;
  display: flex;
  align-items: center;

  .ff--switch-checkbox {
    height: 0;
    width: 0;
    display: none;

    &:checked {
      + .ff--switch-label {
        .ff--switch-button {
          right: -1px;
          border: 1px solid var(--brand-color);
          background: var(--toggle-button-bg-color);
          transition: all 0.3s;
          box-shadow: 0px 0px 2px 0px var(--toggle-strip-shadow);
          .ff-checked-icon--primary {
            svg {
              path {
                fill: var(--brand-color);
              }
            }
          }
        }

        &--primary {
          background: var(--brand-color);
          transition: all 0.3s;
        }

        &:disabled {
          cursor: default;
          color: var(--disable-color);
          background: var(--disable-color);
        }
      }
    }
    &:disabled {
      cursor: no-drop;
    }
  }

  .ff--switch-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    border-radius: 8px;
    position: relative;
    background: var(--toggle-strip-color);
    transition: all 0.3s;

    &--disabled {
      opacity: 0.5;
      cursor: no-drop;
    }

    .ff--switch-button {
      position: absolute;
      left: 0;
      border: 1px solid var(--toggle-strip-color);
      display: flex;
      background: var(--toggle-button-bg-color);
      border-radius: 50%;
      box-shadow: 0px 0px 2px 0px var(--toggle-strip-shadow);
      transition: all 0.3s;
      align-items: center;
      justify-content: center;
      box-sizing: border-box;

      .ff-unchecked-icon--primary {
        svg {
          path {
            fill: var(--toggle-disable-icon-color);
          }
        }
      }
    }
  }

  .default--small {
    @include switch-size(small);
  }
  .default--medium {
    @include switch-size(medium);
  }
  .default--large {
    @include switch-size(large);
  }
}