// Custom Modus Controls

.custom-control {
  height: $custom-control-height;

  .custom-control-label {
    line-height: 2.5;
  }

  &[class*="-sm"] {
    height: $custom-control-height-sm;

    .custom-control-label {
      font-size: $rem-12px;
      line-height: 2.1;
    }
  }
}

.custom-control-input {
  @include sr-only;
}

.custom-control-input:focus ~ .custom-control-label::before {
  box-shadow: 0 0 0 .2rem rgba(33, 124, 187, 0.34);
}

.custom-control-input:disabled {
  & ~ .custom-control-label {
    opacity: 0.3;
  }

  & ~ .custom-control-label::before,
  & ~ .custom-control-label::after {
    cursor: default !important;
  }
}

.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before {
  background-color: $control-checked-color !important;
  border-color: $control-checked-color;
}

.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::after {
  background-size: 70%,
}

@mixin switch-before($switch-size, $control-height) {
  height: $switch-size;
  top: calc((#{$control-height} - #{$switch-size}) / 2);
  background-color: $control-bg-color;
  border-color: $control-bg-color;
  border-radius: calc(#{$switch-size} / 2);
}

@mixin switch-after($control-height, $switch-width, $gutter, $indicator-size) {
  top: calc((#{$control-height} - #{$indicator-size}) / 2 + 2px);
  background-color: $control-surface-color;
  left: calc(#{-($switch-width + $gutter)} + 2px);
  transition: transform .1s ease-in-out, background-color .1s ease-in-out, border-color .1s ease-in-out, box-shadow .1s ease-in-out;
}

.custom-switch {
  .custom-control-input~.custom-control-label {
    &::before {
      @include switch-before($custom-switch-height, $custom-control-height);

      cursor: pointer;
    }

    @include hover {
      &::before {
        border-color: $control-hover-color;
      }
    }

    &::after {
      @include switch-after($custom-control-height, $custom-switch-width, $custom-control-gutter,$custom-control-indicator-size);

      cursor: pointer;
    }

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

    &:focus::before {
      background-color: $control-checked-color;
      border-color: $control-checked-color;
    }
  }

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

    &::after {
      background-color: $control-surface-color;
      transform: translateX($custom-switch-width - $custom-control-indicator-size);
    }
  }

  .custom-control-input:disabled {
    &:checked ~ .custom-control-label::before {
      background-color: $control-checked-color !important;
      cursor: default;
    }

    &:checked ~ .custom-control-label:hover::before {
      border-color: $control-checked-color;
    }

    &~.custom-control-label:hover::before {
      border-color: $control-bg-color;
    }
  }
}

// Custom Radio

.custom-radio {
  .custom-control-label::before,
  .custom-control-label::after {
    cursor: pointer;
  }

  .custom-control-label {
    &::before {
      top: (($custom-control-height - $custom-control-indicator-size) * .5 );
      border-color: $control-bg-color;
      border-width: $rem-2px;
      background-color: #fff;
    }
    @include hover {
      &::before {
        border-color: $control-hover-color;
      }
    }
  }

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

  .custom-control-input:checked ~ .custom-control-label {
    &::before {
      border-color: $control-checked-color;
      border-width: $rem-2px;
      background-color: #fff;
      cursor: pointer;
    }

    &::after {
      top: (($custom-control-height - $custom-control-indicator-size) * .5 );
      background-image: initial;
      border-radius: $custom-radio-indicator-border-radius;
      background-color: $control-checked-color;
      margin: ($rem-10px * .5);
      height: ($custom-control-indicator-size - $rem-10px);
      width: ($custom-control-indicator-size - $rem-10px);
    }
  }

  .custom-control-input ~ .custom-control-label {
    &::after {
      top: .4375rem;
    }
  }

  .custom-control-input:disabled:checked {
    &:checked~.custom-control-label::before {
      background-color: #fff;
      border-color: $control-checked-color;
      cursor: default;
    }
  }

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

// Custom Checkbox

.custom-checkbox {
  // padding-left: 1.75rem;

  .custom-control-label::before,
  .custom-control-label::after {
    top: (($custom-control-height - $custom-control-indicator-size) * .5 );
    cursor: pointer;
  }

  .custom-control-label {
    &::before {
      border-color: $control-bg-color;
      background-color: #fff;
    }
    @include hover {
      &::before {
        border-color: $control-hover-color;
      }
    }
  }

  .custom-control-label::after {
    background-image: $custom-checkbox-indicator-icon-checked;
    background-size: 0%;
    background-position: center center;
    transition: background-size 0.2s;
  }

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

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

    &::after {
      background-size: 70%;
    }
  }

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

    &:checked~.custom-control-label:hover::before {
      border-color: $control-checked-color;
    }

    &~.custom-control-label:hover::before {
      border-color: $control-bg-color;
    }
  }
}

// Custom Select

.custom-select {
  font-size: $input-btn-font-size;
  background: $custom-select-indicator no-repeat right $custom-select-padding-x center / 11px 6.26px;
  background-color: $input-bg;
  @include form-control-focus();

  &::before,
  &::after {
    content: "";
  }

  &:focus,
  &.focus {
    box-shadow: none;
  }

  &:invalid,
  &.is-invalid {
    border-bottom-width: 2px;
  }

  &:valid,
  &.is-valid {
    border-bottom-width: 2px;
  }

  &.form-control-lg {
    font-size: $input-btn-font-size-lg;
  }
}

.custom-control-inline:last-child {
  margin-right: 0;
}

// Custom Slider
.custom-range {
  forced-color-adjust: none;

  &::-webkit-slider-thumb {
    &:hover {
      background-color: $control-checked-color;
    }
  }

  &::-moz-range-thumb {
    &:hover {
      background-color: $control-checked-color;
    }
  }

  &::-ms-thumb {
    width: $custom-range-thumb-width * .9;
    height: $custom-range-thumb-width * .9;

    &:hover {
      background-color: $control-checked-color;
    }
  }

  // Experimental lower progess styles (Only works in Firefox)
  &::-moz-range-progress {
    background-color: $control-checked-color;
    height: $custom-range-track-height;
    @include border-radius($custom-range-thumb-border-radius);
  }
  // Experimental lower progess styles (Only works in IE and Edge Legacy)
  &::-ms-fill-lower {
    background-color: $control-checked-color;
    height: $custom-range-track-height;
    @include border-radius($custom-range-thumb-border-radius);
  }

  &:disabled {
    opacity: $disabled-opacity;

    &::-webkit-slider-thumb {
      border-color: $custom-range-thumb-disabled-border-color;
      background-color: $custom-range-thumb-disabled-bg;
    }

    &::-webkit-slider-runnable-track {
      background-color: $custom-range-thumb-disabled-bg;
      cursor: default;
    }

    &::-moz-range-thumb {
      border-color: $custom-range-thumb-disabled-border-color;
      background-color: $custom-range-thumb-disabled-bg;
    }

    &::-moz-range-track {
      background-color: $custom-range-thumb-disabled-bg;
      cursor: default;
    }

    &::-ms-thumb {
      border-color: $custom-range-thumb-disabled-border-color;
      background-color: $custom-range-thumb-disabled-bg;
    }
  }
}