@use './theme.scss' as *;

.switch {
  $parent: &;
  @include switch-theme-modifiers();

  position: relative;
  cursor: pointer;
  display: inline-flex;
  align-items: center;

  &--disabled {
    pointer-events: none;
  }

  &__track {
    background: switch-theme-color('primary-background');
    position: relative;
    width: 35px;
    height: 20px;
    border-radius: 20px;
    transition: background ease-in-out 0.1s;
    border: 1px solid transparent;

    #{$parent}:focus & {
      outline: 3px solid switch-theme-color('primary-border-focus');
    }

    #{$parent}:hover & {
      border: 1px solid switch-theme-color('primary-border-hover');
    }

    #{$parent}--disabled & {
      cursor: default;
      pointer-events: none;
      background: switch-theme-color('primary-background-disabled');
    }

    #{$parent}--checked & {
      background: switch-theme-color('primary-background-checked');
    }

    #{$parent}--checked:hover & {
      border: 1px solid switch-theme-color('primary-border-hover-checked');
    }

    #{$parent}--disabled#{$parent}--checked & {
      background: switch-theme-color('primary-background-disabled-checked');
    }
  }

  &__thumb {
    width: 20px;
    height: 20px;
    background: switch-theme-color('thumb-background');
    border: 1px solid switch-theme-color('thumb-border');
    position: absolute;
    left: -1px;
    top: -1px;
    border-radius: 50%;
    transition: left ease-in-out 0.1s, background ease-in-out 0.1s;

    #{$parent}:hover & {
      border: 1px solid switch-theme-color('thumb-border-hover');
    }

    #{$parent}--disabled & {
      background: switch-theme-color('thumb-background-disabled');
      border: 1px solid switch-theme-color('thumb-border-disabled');
    }

    #{$parent}--checked & {
      background: switch-theme-color('thumb-background-checked');
      border: 1px solid switch-theme-color('thumb-border-checked');
      left: calc(100% - 19px);
    }

    #{$parent}--checked:hover & {
      border: 1px solid switch-theme-color('thumb-border-checked-hover');
    }

    #{$parent}--disabled#{$parent}--checked & {
      background: switch-theme-color('thumb-background-disabled-checked');
      border: 1px solid switch-theme-color('thumb-border-disabled-checked');
    }
  }

  &__label-holder {
    display: inline-flex;
    align-items: center;

    &--reverse {
      flex-direction: row-reverse;
    }
  }

  &__label {
    color: switch-theme-color('label-color');

    &--right {
      margin: 0 0 0 10px;
    }

    &--left {
      margin: 0 10px 0 0;
    }
  }

  &__input {
    opacity: 0;
    border: none;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    margin: 0;
    cursor: pointer;
  }
}