@use '../../sass/abstracts/variables' as *;

#{$object-prefix}switch {
  position: relative;
  display: inline-block;
  height: 1.25rem;
  line-height: 1.25rem;

  &--label-right {
    padding-left: 2.75rem;
  }

  &--label-left {
    padding-right: 2.75rem;
  }
  // TODO: whats up with the modifiers?
  &--label-right#{&}--large {
    padding-left: 5.25rem;
  }

  &--label-left#{&}--large {
    padding-right: 5.25rem;
  }

  &--label-right &__toggle {
    left: 0;
    right: auto;
  }

  &--label-left &__toggle {
    right: 0;
    left: auto;
  }

  &--large {
    height: 2.3rem;
    line-height: 2.3rem;

    #{$object-prefix}switch__toggle {
      width: 5rem;

      &:before {
        height: 1.7rem;
        width: 1.7rem;
        bottom: 0.3rem;
      }
    }

    #{$object-prefix}switch__input:checked ~ span:before {
      transform: translateX(2.82rem);
    }
  }

  &__input {
    position: absolute;
    margin-left: -9999px;

    &:checked {
      ~ span {
        background-color: $dark-blue-50;
        &:before {
          transform: translateX(1.3rem);
        }
      }
    }

    &:focus ~ span {
      outline: 1px auto $sodra-black;
    }
  }

  &__toggle {
    width: 2.5rem;
    position: absolute;
    cursor: pointer;
    top: 0;
    bottom: 0;
    right: 0;
    background-color: $sodra-black-20;
    border-radius: 2.125rem;
    transition: all, $transition-duration-long;

    &:before {
      position: absolute;
      content: '';
      height: 0.8rem;
      width: 0.8rem;
      left: 0.22rem;
      bottom: 0.22rem;
      background-color: $white;
      border-radius: 50%;
      transition: all, $transition-duration-long;
    }
  }
}