// Custom form controls

// Checkboxes and radios

.custom-control {
  min-height: (1rem * $line-height-base);
  padding-left: $custom-control-gutter;

  &:hover {
    cursor: pointer;
  }

  .custom-control-label::before {
    pointer-events: all;
  }
  .custom-control-label::after {
    content: none;
  }
}

.custom-control-inline {
  margin-right: $custom-control-spacer-x;
}

.custom-control-input {
  display: none;
  &:checked ~ .custom-control-label::before {
    color: $custom-control-indicator-checked-color;
    border-color: transparent;
    @include gradient-bg($custom-control-indicator-checked-bg);
    @include box-shadow($custom-control-indicator-checked-box-shadow);
  }

  &:focus ~ .custom-control-label::before {
    // the mixin is not used here to make sure there is feedback
    box-shadow: $custom-control-indicator-focus-box-shadow;
  }

  &:active ~ .custom-control-label::before {
    color: $custom-control-indicator-active-color;
    background-color: $custom-control-indicator-active-bg;
    @include box-shadow($custom-control-indicator-active-box-shadow);
  }

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

      &:hover {
        cursor: not-allowed;
      }

      &::before {
        background-color: $custom-control-indicator-disabled-bg;
      }
    }

  }
}

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

.custom-control-label {
  position: static;

  &:hover {
    cursor: pointer;
  }

  // Background-color and (when enabled) gradient
  &::before {
    top: (($line-height-base - $custom-control-indicator-size) / 2);
    left: 0;
    width: $custom-control-indicator-size;
    height: $custom-control-indicator-size;
    background-color: $custom-control-indicator-bg;
    border: $custom-control-indicator-border;
    transition: all 250ms cubic-bezier(.27,.01,.38,1.06);
    @include box-shadow($custom-control-indicator-box-shadow);
  }
}

// Custom Switches (core)
//
// Adjustments for the default Bootstrap custom switches.

.custom-switch {
  padding-left: $custom-switch-padding-left;

  .custom-control-label {
    position: relative;
  }
}

// Checkboxes
//
// Tweak just a few things for checkboxes.

.custom-checkbox {
  .custom-control-label::before {
    @include border-radius($custom-checkbox-indicator-border-radius);
  }

  .custom-control-input:checked ~ .custom-control-label {
    &::before {
      // https://icons.getbootstrap.com/icons/check/
      background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22white%22%3E%3Cpath%20d%3D%22M10.97%204.97a.75.75%200%200%201%201.07%201.05l-3.99%204.99a.75.75%200%200%201-1.08.02L4.324%208.384a.75.75%200%201%201%201.06-1.06l2.094%202.093%203.473-4.425a.267.267%200%200%201%20.02-.022z%22%2F%3E%3C%2Fsvg%3E");
    }
  }

  .custom-control-input:indeterminate ~ .custom-control-label {
    &::before {
      border: none;
      @include gradient-bg($custom-checkbox-indicator-indeterminate-bg);
      @include box-shadow($custom-checkbox-indicator-indeterminate-box-shadow);
    }
  }

  .custom-control-input:disabled:checked ~ .custom-control-label {
    &::before {
      background: $custom-control-indicator-disabled-bg;
      border-color: $border-color;
    }

    &::after {
      border-color: $border-color;
    }
  }
}

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

.custom-radio {
  .custom-control-label::before {
    border-radius: $custom-radio-indicator-border-radius;
  }

  .custom-control-input:checked ~ .custom-control-label {
    &::before {
      @include gradient-bg($custom-control-indicator-checked-bg);
      background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22white%22%3E%3Ccircle%20cx%3D%228%22%20cy%3D%228%22%20r%3D%223%22%2F%3E%3C%2Fsvg%3E");
    }
  }
}

// Select
//
// Replaces the browser default select with a custom one

.custom-select {
  height: $custom-select-height;
  padding: $custom-select-padding-y ($custom-select-padding-x + $custom-select-indicator-padding) $custom-select-padding-y $custom-select-padding-x;
  line-height: $custom-select-line-height;
  color: $custom-select-color;
  background: $custom-select-bg $custom-select-indicator no-repeat right $custom-select-padding-x center;
  background-size: $custom-select-bg-size;
  border: $custom-select-border-width solid $custom-select-border-color;
  font-weight: $font-weight-normal;
  font-size: $input-font-size;

  @include transition($input-transition);

  @if $enable-rounded {
    border-radius: $custom-select-border-radius;
  } @else {
    border-radius: 0;
  }

  &:focus {
    border-color: $custom-select-focus-border-color;
    box-shadow: $custom-select-focus-box-shadow;

    &::-ms-value {
      // For visual consistency with other platforms/browsers,
      // suppress the default white text on blue background highlight given to
      // the selected option text when the (still closed) <select> receives focus
      // in IE and (under certain conditions) Edge.
      // See https://github.com/twbs/bootstrap/issues/19398.
      color: $input-color;
      background-color: $input-bg;
    }
  }

  &:hover:not(:focus):not(:disabled) {
    cursor: pointer;
    border-color: $input-hover-border-color;
  }

  &[multiple],
  &[size]:not([size="1"]) {
    padding-right: $custom-select-padding-x;
  }

  &:disabled {
    color: $custom-select-disabled-color;
    background-color: $custom-select-disabled-bg;
  }
}

.custom-select-sm {
  height: $custom-select-height-sm;
  padding-top: $custom-select-padding-y;
  padding-bottom: $custom-select-padding-y;
  font-size: $custom-select-font-size-sm;
}

.custom-select-lg {
  height: $custom-select-height-lg;
  font-size: $custom-select-font-size-lg;
  padding-top: $custom-select-padding-y;
  padding-bottom: $custom-select-padding-y;
}

// File
//
// Custom file input.

.custom-file {
  height: $custom-file-height;
  font-size: $input-font-size;

  @include transition($input-transition);
}

.custom-file-input {
  min-width: $custom-file-width;
  height: $custom-file-height;

  &:focus ~ .custom-file-label {
    border-color: $custom-file-focus-border-color;
    color: $input-focus-color;
    box-shadow: $custom-file-focus-box-shadow;

    &::after {
      border-color: $custom-file-focus-border-color;
      color: theme-color("primary");
      background: lighten($custom-file-focus-border-color, 45);
    }

    &:hover {
      border-color: $custom-file-focus-border-color;
    }
  }

  @each $lang, $value in $custom-file-text {
    &:lang(#{$lang}) ~ .custom-file-label::after {
      content: $value;
    }
  }

  &:not(:disabled):hover {
    cursor: pointer;

    & ~ .custom-file-label,
    & ~ .custom-file-label:before {
      border-color: $input-hover-border-color;
    }
  }

  &:disabled + .custom-file-label {
    color: $custom-select-disabled-color;
    background-color: lighten($custom-select-disabled-bg, 5%);
  }
}

.custom-file-label {
  height: $custom-file-height;
  padding: $custom-file-padding-x $custom-file-padding-y;
  line-height: $custom-file-line-height;
  color: $custom-file-color;
  background-color: $custom-file-bg;
  border: $custom-file-border-width solid $custom-file-border-color;
  font-weight: $font-weight-normal;
  box-shadow: $custom-file-box-shadow;

  @include transition(box-shadow $transition-duration $ease-in-out-circ, border-color $transition-duration $ease-in-out-circ);
  @include border-radius($custom-file-border-radius);

  &::after {
    padding: $custom-file-padding-x $custom-file-padding-y;
    height: calc(#{$custom-file-height} - #{$custom-file-border-width} * 2);
    line-height: $custom-file-line-height;
    color: $custom-file-button-color;
    border-left: $custom-file-border-width solid $custom-file-border-color;

    @include gradient-bg($custom-file-button-bg);
    @include border-radius(0 $custom-file-border-radius $custom-file-border-radius 0);
  }
}

// Custom toggle
.custom-toggle {
  position: relative;
  padding-left: ($custom-toggle-width + 0.625rem);

  .custom-control-label {
    // Background
    &::before {
      position: absolute;
      top: 0;
      left: 0;
      display: block;
      width: $custom-toggle-width;
      height: $custom-toggle-height;
      background: $custom-toggle-background-color;
      border-radius: $custom-toggle-border-radius;
      border: $custom-toggle-border;
    }

    // Knob
    &::after {
      content: '';
      position: absolute;
      top: 0.25rem;
      left: 0.25rem;
      width: $custom-toggle-knob-width;
      height: $custom-toggle-knob-height;
      background: $input-border-color;
      border-radius: $custom-toggle-knob-border-radius;
      transition: 350ms;
    }
  }

  // Checked state
  .custom-control-input:checked ~ .custom-control-label {
    // Background
    &::before {
      background: $custom-toggle-checked-background;
      border-color: $custom-toggle-checked-border-color;
    }

    // Knob
    &::after {
      left: $custom-toggle-width - $custom-toggle-border-width - 0.1875rem;
      transform: translateX(-100%);
      background: $custom-toggle-checked-knob-background;
    }
  }

  // Disabled and checked state
  .custom-control-input:checked:disabled ~ .custom-control-label {
    &::before {
      background: $custom-control-indicator-disabled-bg;
      border-color: $border-color;
    }

    &::after {
      background: $border-color;
    }
  }

  // Active state
  .custom-control-input:active:not(:disabled) ~ .custom-control-label {
    // Knob
    &::after {
      width: $custom-toggle-knob-active-width;
    }
  }

  // Active, but not checked.
  .custom-control-input:active:not(:checked) ~ .custom-control-label {
    &::before {
      background-color: $custom-toggle-background-color;
    }
  }

  // Disabled and active.
  .custom-control-input:disabled:active ~ .custom-control-label {
    &::before {
      background-color: $custom-control-indicator-disabled-bg;
    }
  }

  // Focus state
  .custom-control-input:focus {
    & ~ .custom-control-label {
      &::before {
        box-shadow: $custom-toggle-focus-box-shadow;
      }
    }

    &:not(:checked) ~ .custom-control-label {
      &::before {
        box-shadow: $input-focus-box-shadow;
      }
    }
  }

  &.custom-toggle-sm {
    padding-left: 2.625rem;

    .custom-control-label {
      // Background
      &::before {
        top: .1875rem;
        position: absolute;
        display: block;
        width: $custom-toggle-width-sm;
        height: $custom-toggle-height-sm;
        background: $custom-toggle-background-color;
        border-radius: $custom-toggle-border-radius;
        border: $custom-toggle-border;
      }

      // Knob
      &::after {
        content: '';
        position: absolute;
        top: .375rem;
        left: 0.1875rem;
        width: $custom-toggle-knob-width-sm;
        height: $custom-toggle-knob-height-sm;
      }
    }

    // Checked state
    .custom-control-input:checked ~ .custom-control-label {
      // Knob
      &::after {
        left: $custom-toggle-width-sm - $custom-toggle-border-width - 0.1875rem;
      }
    }

    // Active state
    .custom-control-input:active:not(:disabled) ~ .custom-control-label {
      // Knob
      &::after {
        width: $custom-toggle-knob-active-width-sm;
      }
    }
  }
}