@import '../utils/theme/variables.scss';
$size: 3em !default;
$background: $brc-cloudyGrey !default;
$checked-background: $brc-gradientAzure !default;
$border-color-focused: $brc-waterBlue !default;

.toggle {
  &.disabled {
    opacity: 0.3;

    .toggle-button {
      cursor: not-allowed;
    }
  }
}

.toggle-input {
  display: none;

  // add default box-sizing for this scope
  &,
  &::after,
  &::before,
  & *,
  & *::after,
  & *::before,
  & + .toggle-button {
    box-sizing: border-box;

    &::selection {
      background: none;
    }
  }

  + .toggle-button {
    display: block;
    position: relative;
    height: $size / 2;
    width: $size;
    outline: 0;
    cursor: pointer;
    user-select: none;

    &:focus {
      border: 1px solid $border-color-focused;
      padding: 1px;
    }

    &::after,
    &::before {
      content: '';
      display: block;
      position: relative;
      height: 100%;
      width: 50%;
    }

    &::after {
      left: 0;
    }

    &::before {
      display: none;
    }
  }

  &:checked {
    + .toggle-button {
      &::after {
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
      }
    }
  }
}

.toggle-input {
  + .toggle-button {
    padding: 2px;
    border-radius: $size / 2;
    background: $background;
    -webkit-transition: background 0.4s ease;
    transition: background 0.4s ease;

    &::after {
      border-radius: 50%;
      background: $brc-white;
      -webkit-transition: -webkit-transform 0.2s linear;
      transition: transform 0.2s linear;
    }
  }

  &:checked {
    + .toggle-button {
      background: $checked-background;

      &:focus {
        box-shadow: 0 0 2px 1px $border-color-focused;
      }
    }
  }
}
