.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 {
  color: inherit;
  font-size: $font-size-base;
  line-height: inherit;
  margin-bottom: 0;

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

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

    background-color: currentColor;
    border-radius: 50%;
    color: $selection-control-color;
    content: '';
    display: block;
    height: ($selection-control-indicator-size * 2);
    margin-top: (($font-size-base * $line-height-base - $selection-control-indicator-size) / 2 + $selection-control-indicator-size / -2);
    margin-left: ($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);
    }
  }

  &:checked ~ {
    .custom-control-label {
      &::after {
        color: $selection-control-color-active;
      }

      &::before {
        background-color: $selection-control-color-active;
      }
    }
  }

  &:disabled ~ {
    .custom-control-label {
      color: $selection-control-color-disabled;

      &::after {
        color: $selection-control-color-disabled;
      }

      &::before {
        display: none;
      }
    }
  }
}

// Checkbox

.custom-checkbox {
  .custom-control-label::after {
    @include set-material-icons;

    content: $selection-control-checkbox-icon;
    line-height: 1;
    vertical-align: middle;
  }

  .custom-control-input {
    &:checked ~ .custom-control-label::after {
      content: $selection-control-checkbox-icon-checked;
    }

    &:indeterminate ~ .custom-control-label::after {
      content: $selection-control-checkbox-icon-indeterminate;
    }
  }
}

// Radio button

.custom-radio {
  .custom-control-label::after {
    @include set-material-icons;

    content: $selection-control-radio-icon;
    line-height: 1;
    vertical-align: middle;
  }

  .custom-control-input {
    &:checked ~ .custom-control-label::after {
      content: $selection-control-radio-icon-checked;
    }
  }
}

// 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);

      background-color: $selection-control-thumb-bg;
      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);
        }

        &::after {
          background-color: $selection-control-color-active;
        }
        // scss-lint:enable
      }

      ~ .custom-control-track {
        background-color: rgba($selection-control-color-active, $selection-control-track-opacity);
      }
    }

    &:disabled {
      ~ .custom-control-label::after {
        background-color: $selection-control-thumb-bg-disabled;
      }

      ~ .custom-control-track {
        background-color: $selection-control-track-bg-disabled;
      }
    }
  }

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

    background-clip: content-box;
    background-color: $selection-control-track-bg;
    border: (($selection-control-indicator-size - $selection-control-track-height) / 2) 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) / 2);
    left: 0;
    width: $selection-control-track-width;
  }
}