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


.custom-control {
   position: relative;
   display: block;
   padding-left: $custom-control-gutter;
   cursor: pointer;

   &:hover .custom-control-indicator {
      border-color: darken($input-border-color, 20%);
   }

   &:hover .custom-control-input:checked:not(:disabled) ~ .custom-control-indicator {
      border-color: darken($custom-control-checked-indicator-bg, 5%);
      background-color: darken($custom-control-checked-indicator-bg, 5%);
   }
}

.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-indicator {
      color: $custom-control-checked-indicator-color;
      background-color: $custom-control-checked-indicator-bg;
      border-color: $custom-control-checked-indicator-bg;
   }

   &:focus ~ .custom-control-indicator {
      border-color: $custom-control-checked-indicator-bg;
   }

   &:active ~ .custom-control-indicator {
      border-color: $custom-control-checked-indicator-bg;
      color: $custom-control-active-indicator-color;
      background-color: $custom-control-active-indicator-bg;
   }

   &:disabled {
      ~ .custom-control-indicator {
         cursor: $custom-control-disabled-cursor;
         background-color: $custom-control-disabled-indicator-bg;
         border-color: $custom-control-disabled-indicator-bg;
      }

      ~ .custom-control-description {
         color: $custom-control-disabled-description-color;
         cursor: $custom-control-disabled-cursor;
      }
   }
}

.custom-control-indicator {
   position: absolute;
   top: .0625rem;
   left: 0;
   display: block;
   border: 1px solid darken($input-border-color, 3%);
   width: $custom-control-indicator-size;
   height: $custom-control-indicator-size;
   pointer-events: none;
   user-select: none;
   background-color: $custom-control-indicator-bg;
   background-repeat: no-repeat;
   background-position: center center;
   background-size: $custom-control-indicator-bg-size;
   @include box-shadow($custom-control-indicator-box-shadow);
}

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

   .custom-control-input:checked ~ .custom-control-indicator {
      background-image: $custom-checkbox-checked-icon;
   }
}

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

   .custom-control-input:checked ~ .custom-control-indicator {
      background-image: $custom-radio-checked-icon;
   }
}

.custom-select {
   display: inline-block;
   max-width: 100%;
   padding: $custom-select-padding-y ($custom-select-padding-x + $custom-select-indicator-padding) $custom-select-padding-y $custom-select-padding-x;
   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;
   @include border-radius($custom-select-border-radius);
   // Use vendor prefixes as `appearance` isn't part of the CSS spec.
   -moz-appearance: none;
   -webkit-appearance: none;

   &:focus {
      border-color: $custom-select-focus-border-color;
      outline: none;
      @include box-shadow($custom-select-focus-box-shadow);

      &::-ms-value {
         // For visual consistency with other platforms/browsers,
         // supress 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;
      }
   }

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

   &[readonly] {
      background-image: none;
   }
}
