// Embedded icons from Open Iconic.
// Released under MIT and copyright 2014 Waybury.
// https://useiconic.com/open

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

.custom-control
  position: relative
  display: block
  min-height: 1rem * $line-height-base
  padding-left: $custom-control-gutter

.custom-control-inline
  display: inline-flex
  margin-right: $custom-control-spacer-x

.custom-control-input
  position: absolute
  z-index: -1

  // Put the input behind the label so it doesn't overlay text
  opacity: 0

  &:checked ~ .custom-control-label::before
    color: $custom-control-indicator-checked-color

    +gradient-bg($custom-control-indicator-checked-bg)
    +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

    +box-shadow($custom-control-indicator-active-box-shadow)

  &:disabled
    ~ .custom-control-label
      color: $custom-control-label-disabled-color

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

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

.custom-control-label
  position: relative
  margin-bottom: 0

  // Background-color and (when enabled) gradient
  &::before
    position: absolute
    top: ($line-height-base - $custom-control-indicator-size) / 2
    left: -$custom-control-gutter
    display: block
    width: $custom-control-indicator-size
    height: $custom-control-indicator-size
    pointer-events: none
    content: ""
    user-select: none
    background-color: $custom-control-indicator-bg

    +box-shadow($custom-control-indicator-box-shadow)

  // Foreground (icon)
  &::after
    position: absolute
    top: ($line-height-base - $custom-control-indicator-size) / 2
    left: -$custom-control-gutter
    display: block
    width: $custom-control-indicator-size
    height: $custom-control-indicator-size
    content: ""
    background-repeat: no-repeat
    background-position: center center
    background-size: $custom-control-indicator-bg-size

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

.custom-checkbox
  .custom-control-label::before
    +border-radius($custom-checkbox-indicator-border-radius)

  .custom-control-input:checked ~ .custom-control-label
    &::before
      +gradient-bg($custom-control-indicator-checked-bg)

    &::after
      background-image: $custom-checkbox-indicator-icon-checked

  .custom-control-input:indeterminate ~ .custom-control-label
    &::before
      +gradient-bg($custom-checkbox-indicator-indeterminate-bg)
      +box-shadow($custom-checkbox-indicator-indeterminate-box-shadow)

    &::after
      background-image: $custom-checkbox-indicator-icon-indeterminate

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

    &:indeterminate ~ .custom-control-label::before
      background-color: $custom-control-indicator-checked-disabled-bg

// 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
      +gradient-bg($custom-control-indicator-checked-bg)

    &::after
      background-image: $custom-radio-indicator-icon-checked

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

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

.custom-select
  display: inline-block
  width: 100%
  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
  vertical-align: middle
  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

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

  +box-shadow($custom-select-box-shadow)

  appearance: none

  &:focus
    border-color: $custom-select-focus-border-color
    outline: 0

    @if $enable-shadows
      box-shadow: $custom-select-box-shadow, $custom-select-focus-box-shadow
    @else
      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

  &[multiple],
  &[size]:not([size="1"])
    height: auto
    padding-right: $custom-select-padding-x
    background-image: none

  &:disabled
    color: $custom-select-disabled-color
    background-color: $custom-select-disabled-bg

  // Hides the default caret in IE11
  &::-ms-expand
    opacity: 0

.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
  padding-top: $custom-select-padding-y
  padding-bottom: $custom-select-padding-y
  font-size: $custom-select-font-size-lg

// File
//
// Custom file input.

.custom-file
  position: relative
  display: inline-block
  width: 100%
  height: $custom-file-height
  margin-bottom: 0

.custom-file-input
  position: relative
  z-index: 2
  width: 100%
  height: $custom-file-height
  margin: 0
  opacity: 0

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

    &::after
      border-color: $custom-file-focus-border-color

  &:disabled ~ .custom-file-label
    background-color: $custom-file-disabled-bg

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

.custom-file-label
  position: absolute
  top: 0
  right: 0
  left: 0
  z-index: 1
  height: $custom-file-height
  padding: $custom-file-padding-y $custom-file-padding-x
  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

  +border-radius($custom-file-border-radius)
  +box-shadow($custom-file-box-shadow)

  &::after
    position: absolute
    top: 0
    right: 0
    bottom: 0
    z-index: 3
    display: block
    height: $custom-file-height-inner
    padding: $custom-file-padding-y $custom-file-padding-x
    line-height: $custom-file-line-height
    color: $custom-file-button-color
    content: "Browse"

    +gradient-bg($custom-file-button-bg)

    border-left: $custom-file-border-width solid $custom-file-border-color

    +border-radius(0 $custom-file-border-radius $custom-file-border-radius 0)

// Range
//
// Style range inputs the same across browsers. Vendor-specific rules for pseudo
// elements cannot be mixed. As such, there are no shared styles for focus or
// active states on prefixed selectors.

.custom-range
  width: 100%
  padding-left: 0

  // Firefox specific
  background-color: transparent
  appearance: none

  &:focus
    outline: none

  &::-moz-focus-outer
    border: 0

  &::-webkit-slider-thumb
    width: $custom-range-thumb-width
    height: $custom-range-thumb-height
    margin-top: -($custom-range-thumb-width * 0.25)

    // Webkit specific?
    +gradient-bg($custom-range-thumb-bg)

    border: $custom-range-thumb-border

    +border-radius($custom-range-thumb-border-radius)
    +box-shadow($custom-range-thumb-box-shadow)
    +transition($custom-forms-transition)

    appearance: none

    &:focus
      outline: none
      box-shadow: $custom-range-thumb-focus-box-shadow

      // No mixin for focus accessibility

    &:active
      +gradient-bg($custom-range-thumb-active-bg)

  &::-webkit-slider-runnable-track
    width: $custom-range-track-width
    height: $custom-range-track-height
    color: transparent

    // Why?
    cursor: $custom-range-track-cursor
    background-color: $custom-range-track-bg
    border-color: transparent

    +border-radius($custom-range-track-border-radius)
    +box-shadow($custom-range-track-box-shadow)

  &::-moz-range-thumb
    width: $custom-range-thumb-width
    height: $custom-range-thumb-height

    +gradient-bg($custom-range-thumb-bg)

    border: $custom-range-thumb-border

    +border-radius($custom-range-thumb-border-radius)
    +box-shadow($custom-range-thumb-box-shadow)
    +transition($custom-forms-transition)

    appearance: none

    &:focus
      outline: none
      box-shadow: $custom-range-thumb-focus-box-shadow

      // No mixin for focus accessibility

    &:active
      +gradient-bg($custom-range-thumb-active-bg)

  &::-moz-range-track
    width: $custom-range-track-width
    height: $custom-range-track-height
    color: transparent
    cursor: $custom-range-track-cursor
    background-color: $custom-range-track-bg
    border-color: transparent

    // Firefox specific?
    +border-radius($custom-range-track-border-radius)
    +box-shadow($custom-range-track-box-shadow)

  &::-ms-thumb
    width: $custom-range-thumb-width
    height: $custom-range-thumb-height

    +gradient-bg($custom-range-thumb-bg)

    border: $custom-range-thumb-border

    +border-radius($custom-range-thumb-border-radius)
    +box-shadow($custom-range-thumb-box-shadow)
    +transition($custom-forms-transition)

    appearance: none

    &:focus
      outline: none
      box-shadow: $custom-range-thumb-focus-box-shadow

      // No mixin for focus accessibility

    &:active
      +gradient-bg($custom-range-thumb-active-bg)

  &::-ms-track
    width: $custom-range-track-width
    height: $custom-range-track-height
    color: transparent
    cursor: $custom-range-track-cursor
    background-color: transparent
    border-color: transparent
    border-width: $custom-range-thumb-height * 0.5

    +box-shadow($custom-range-track-box-shadow)

  &::-ms-fill-lower
    background-color: $custom-range-track-bg

    +border-radius($custom-range-track-border-radius)

  &::-ms-fill-upper
    margin-right: 15px

    // arbitrary?
    background-color: $custom-range-track-bg

    +border-radius($custom-range-track-border-radius)

.custom-control-label::before,
.custom-file-label,
.custom-select
  +transition($custom-forms-transition)