@use "sass:math";

.custom-control {
  display: block;
  min-height: ($font-size-base * $line-height-base);
  padding-left: ($selection-control-indicator-size + $selection-control-spacer-x);
  position: relative;

  + .custom-control {
    margin-top: $selection-control-spacer-y;
  }
}

.custom-control-inline {
  display: inline-flex;
  margin-right: ($selection-control-spacer-x * 2);

  + .custom-control-inline {
    margin-top: 0;
  }
}

// Base styles for custom control indicators

.custom-control-label {
  font-size: $textfield-font-size;
  line-height: inherit;
  margin-bottom: 0;

  &::after {
    position: absolute;
    top: (($font-size-base * $line-height-base - $selection-control-indicator-size) * 0.5);
    left: 0;
  }

  &::before {
    @include transition-standard(background-color, opacity, transform);

    background-color: currentColor;
    border-radius: 50%;
    content: '';
    display: block;
    height: ($selection-control-indicator-size * 2);
    margin-top: (($font-size-base * $line-height-base - $selection-control-indicator-size) * 0.5 + math.div($selection-control-indicator-size, -2));
    margin-left: math.div($selection-control-indicator-size, -2);
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    transform: scale(0.87, 0.87) translateZ(0);
    width: ($selection-control-indicator-size * 2);
  }
}

.custom-control-input {
  opacity: 0;
  position: absolute;
  z-index: -1;

  &.focus,
  &:active {
    ~ .custom-control-label::before {
      opacity: $selection-control-radial-opacity;
      transform: scale(1, 1) translateZ(0);
    }
  }

  &:disabled ~ {
    .custom-control-label {
      &::before {
        display: none;
      }
    }
  }
}

// Switch

.custom-switch {
  padding-left: ($selection-control-track-width + $selection-control-spacer-x);

  .custom-control-label {
    @include transition-standard(background-color);

    &::after {
      @include transition-standard(background-color, transform);

      border-radius: 50%;
      box-shadow: $selection-control-thumb-shadow;
      content: '';
      display: block;
      height: $selection-control-indicator-size;
      position: absolute;
      width: $selection-control-indicator-size;
    }
  }

  .custom-control-input {
    &:checked {
      ~ .custom-control-label {
        // scss-lint:disable NestingDepth
        &::after,
        &::before {
          transform: translateX($selection-control-track-width - $selection-control-indicator-size);
        }
        // scss-lint:enable
      }
    }
  }

  .custom-control-track {
    @include transition-standard(background-color);

    background-clip: content-box;
    border: (($selection-control-indicator-size - $selection-control-track-height) * 0.5) solid transparent;
    border-radius: $selection-control-track-height;
    content: '';
    display: block;
    height: $selection-control-indicator-size;
    position: absolute;
    top: (($font-size-base * $line-height-base - $selection-control-indicator-size) * 0.5);
    left: 0;
    width: $selection-control-track-width;
  }
}
