// Checkboxes and radios
//
// Base class takes care of all the key behavioral aspects.

.custom-control {
  .custom-control-input {
    &:checked {
      ~ .custom-control-label,
      ~ .custom-control-label::before { border-color: $input-focus-border-color; }
    }
    &:focus:not(:checked) ~ .custom-control-label::before { border-color: $input-border-color; }
  }
}

// Custom control indicators
//
// Build the custom controls out of pseudo-elements.

.custom-control-label {
  font-weight: $font-weight-normal;

  // Background-color and icon
  &::before, &::after { top: .3rem; }
  &::before { border: $border-width solid $border-color; }
  &::after { cursor: pointer; }
}

// Radios
//
// Tweak just a few things for radios.

.custom-radio {
  .custom-control-label::after { background-size: 45% 45%; }
}

// Select
//
// Replaces the browser default select with a custom one, mostly pulled from
// https://primer.github.io/.
//

.custom-select {
  font-weight: $btn-font-weight;
  cursor: pointer;
  box-shadow: none;
}

// File
//
// Custom file input.

.custom-file-label {
  font-weight: $font-weight-normal;
  cursor: pointer;
  border-radius: 0 $btn-border-radius $btn-border-radius 0;
  overflow: hidden;
  &::after {
    font-weight: $btn-font-weight;
    border-radius: 0 $btn-border-radius $btn-border-radius 0;
  }
}

// Block
//
// Custom control block (ex: for images)
.custom-control-block {
  padding: 0;
  .custom-control-label {
    margin-bottom: 0;
    padding: ($spacer * 1.5) $spacer ($spacer * 2);
    border: $border-width solid $border-color;
    border-radius: $border-radius;
    cursor: pointer;
    transition: $transition-base;
    &:hover { border-color: $gray-600; }
    &::before, &::after {
      top: auto;
      left: 50%;
      bottom: ($spacer * .5);
      margin-left: -9px;
    }
  }
}

// Without radio or checkbox indicator
.custom-control-block:not(.custom-radio):not(.custom-checkbox) {
  .custom-control-label {
    padding: ($spacer * .5);
    &::before, &::after { display: none; }
  }
}


// switches
//
// Tweak a few things for switches

.custom-switch {
  .custom-control-label {
    &::before {
      padding-left: 28px;
      font-size: 12px;
      line-height: 16px;
      color: $text-muted;
      font-family: "FontAwesome";
      content: "\f00d";
      background-color: $body-bg;
    }
    &::after {
      top: 0;
      left: -($custom-switch-width + $custom-control-gutter);
      background-color: $white;
      border: $border-width solid $border-color;
      border-radius: 50%;
      @include transition(transform .15s ease-in-out, $custom-forms-transition);
    }
  }

  .custom-control-input:checked ~ .custom-control-label {
    &::after {
      border-color: $input-focus-border-color;
      transform: translateX($custom-switch-width - $custom-switch-indicator-size);
    }
    &::before {
      content: "";
      background-repeat: no-repeat;
      background-size: 30%;
      background-position: 6px 1px;
      background-image: $custom-checkbox-indicator-icon-checked;
      background-color: $custom-control-indicator-checked-bg;
      border-color: $input-focus-border-color;
    }
  }
}


// Styles needed to override :valid success styles provided by bootstrap... this is for server side forms only
.custom-control-input {
  .was-validated &:valid {
    ~ .custom-control-label {
      color: inherit;
      &::before { background-color: inherit; }
    }
    &:checked {
      ~ .custom-control-label::before {
        background-color: $custom-control-indicator-checked-bg;
      }
    }
  }
}

.custom-file-input {
  .was-validated &:valid {
    ~ .custom-file-label { border-color: $custom-file-border-color; }
  }
}