@import '../../../styles/core.scss';

.ToggleWrapper {
  align-items: center;
  display: flex;
}

.Toggle {
  $b: &;
  $pop: get(color 'blue');
  $red: #e95f6a;
  $disabledChecked: scale-color($pop, $lightness: +40%);
  $disabledUnchecked: scale-color(get('color' chalk), $lightness: +40%);
  $size: 20px;
  $edgeWidth: 2px;
  $edge: $edgeWidth solid get('color' chalk);

  // toggle only
  $toggleOffset: 5px;
  $toggleSm: 14px;
  $toggleSmOffset: 2px; // gets us to 20px to match checkbox + radio size

  align-items: center;
  display: inline-flex;
  justify-content: center;
  position: relative;

  &-input {
    opacity: 0;
    position: absolute;

    &:invalid + .Toggle-display {
      border-color: $red;
    }

    &:invalid:focus + .Toggle-display {
      box-shadow: 0 0 0 3px rgba($red, 0.4);
    }

    &:invalid:checked + .Toggle-display {
      background: red;
    }

    &:checked + .Toggle-display {
      background: $pop;
      border-color: $pop;
    }

    &:disabled + .Toggle-display {
      background: $disabledUnchecked;
      border-color: $disabledUnchecked;
      cursor: not-allowed;
    }

    &:focus {
      + .Toggle-display {
        box-shadow: 0 0 0 3px rgba(get('color' chalk), 0.4);
      }

      &:checked + .Toggle-display {
        border-color: $pop;
        box-shadow: 0 0 0 3px rgba($pop, 0.3);
      }
    }
  }

  &-display {
    align-items: center;
    box-sizing: border-box;
    cursor: pointer;
    display: flex;
    flex: 0 0 auto;
    justify-content: center;
    position: relative;
    transition: box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);

    .fa {
      color: #fff;
      font-size: 12px;
      opacity: 0;
      pointer-events: none;
      transform: scale(0.5);
      transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }
  }

  &-label {
    flex: 1 1 auto;
    font-weight: 600;
    margin-left: 10px;
  }

  &_checkbox .Toggle-display,
  &_radio .Toggle-display {
    background: #fff;
    border: $edge;
    height: $size;
    width: $size;
  }

  &_toggle,
  &_radio {
    .Toggle-display {
      &::after {
        background-color: #fff;
        border: 0;
        content: '';
        display: block;
        transition: transform .2s cubic-bezier(0.16, 1, 0.3, 1);
      }

      .fa {
        display: none;
      }
    }
  }

  &_checkbox {
    .Toggle-display {
      border-radius: 3px;

      .fa {
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
      }
    }

    .Toggle-input:checked + .Toggle-display .fa {
      opacity: 1;
      transform: scale(1);
    }
  }

  &_toggle {
    .Toggle-input:disabled + .Toggle-display {
      background: $disabledUnchecked;
      border-color: $disabledUnchecked;
      cursor: not-allowed;
    }

    .Toggle-input:disabled:checked + .Toggle-display {
      background: $disabledChecked;
      border-color: $disabledChecked;
    }

    .Toggle-display {
      background: get('color' chalk);
      border: $edge;
      display: inline-flex;
      justify-content: flex-start;
      padding: $edgeWidth;

      &::after {
        border-radius: $size;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
      }
    }

    &_lg {
      .Toggle-display {
        border-radius: $size;
        width: $size * 2 + $toggleOffset;

        &::after {
          border-radius: $size;
          height: $size;
          width: $size;
        }
      }

      .Toggle-input:checked + .Toggle-display::after {
        transform: translateX($size + $toggleOffset - ($edgeWidth * 4));
      }
    }

    &_md {

      .Toggle-display {
        border-radius: $toggleSm;
        width: $toggleSm * 2 + $toggleSmOffset;

        &::after {
          border-radius: $toggleSm - $toggleSmOffset;
          height: $toggleSm - $toggleSmOffset;
          width: $toggleSm - $toggleSmOffset;
        }
      }

      .Toggle-input:checked + .Toggle-display::after {
        transform: translateX($toggleSm + $toggleOffset - ($edgeWidth * 4));
      }
    }
  }

  &_radio {
    .Toggle-input:checked + .Toggle-display::after {
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    }

    .Toggle-input:disabled:not(:checked) + .Toggle-display::after {
      background: $disabledUnchecked;
    }

    .Toggle-display {
      border-radius: $size;

      &::after {
        border-radius: $size/2;
        height: $size/2;
        width: $size/2;
      }
    }
  }
}