// Helper text
.form-text {
  font-size: $form-label-font-size;
  line-height: $form-line-height;
  margin-top: -$spacer / 4;
  margin-bottom: $spacer / 2;
  color: gray("700")!important;
}

// Legend label
.col-form-label {
  color: gray("800");
  font-size: $form-label-font-size;
  line-height: $form-line-height;
}

.custom-select,
.form-control,
.input-group-text {
  // border-color: gray("500") !important;
  background-color: gray("100");
}

.custom-select,
.form-control {
  // &:active {
    // border: 1px solid $primary!important;
  // }
  // &:focus {
    // color: theme-color("dark");
    // background-color: gray("100");
    // box-shadow: inset 0 0 0 3px gray("100"), inset 0 0 0 5px $primary !important;
  // }
  &:disabled {
    background-color: gray("400");
    color: gray("600");
  }
  &.is-invalid,
  &:invalid {
    border: 1px solid theme-color("danger") !important;
  }
}

.form-control::-webkit-outer-spin-button,
.form-control::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.form-control[type='number'] {
  -moz-appearance: textfield;
}

// .custom-select,
// .custom-control-label,
.form-control {
  border-radius: 8px;
  border: none;
  background-color: $faint-secondary-primary-5;
  &:hover {
    background-color: $faint-secondary-primary-5-hover;
  }
}

// Inverted form colors
.form-background {
  background-color: none;
  .custom-select,
  .form-control {
    border-radius: 8px;
    border: none;
    background-color: $faint-secondary-primary-5;
    &:hover {
      // opacity: 0.1;
      background-color: $faint-secondary-primary-5-hover;
    }
    &:focus {
      border: 1px solid gray("400");
    }
    &:disabled {
      background-color: gray("400");
      color: gray("600");
    }
    &.is-valid {
      border: 1px solid gray("400");
    }
  }
}

.invalid-feedback {
  font-size: $form-label-font-size;
  line-height: $form-line-height;
}

.custom-checkbox ::before {
  box-shadow: none !important;
  border: 2px solid $on-surface-secondary;
  background-color: #fff;
  border-radius: 3px;
}

.custom-checkbox .custom-control-input:checked ~ .custom-control-label::after,
.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before,
.custom-control-input:checked ~ .custom-control-label::before  {
  border-radius: 3px;
  background-color: $red-brand-primary;
  border-color: $red-brand-primary;
  cursor: pointer;
  &:focus {
    box-shadow: none !important;
  }
}

.custom-control {
  .custom-control-input[disabled=disabled] {
    & + .custom-control-label {
      // Disabled label for checkbox, radio,
      // switch bootstrap form components
      color: gray("600")!important;
    }
  }
}

.custom-switch {
  width: 28px;
  height: 16px;
  margin: -4px 0 -4px auto;
}

.custom-switch
.custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: none;
}

.custom-switch
.custom-control-input ~ .custom-control-label::after {
  border: 1px solid $faint-secondary-primary-20;
  background: $white;
}

.custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
  border-color: $faint-secondary-primary-20;
}

.custom-control-input:not(:disabled):active ~ .custom-control-label::before {
  background-color: rgba(4, 10, 15, 0.3);
  border-color: $faint-secondary-primary-20;
}

.custom-switch
.custom-control-input ~ .custom-control-label::before {
  border: 1px solid $faint-secondary-primary-20;
  background: rgba(4, 10, 15, 0.3);
}

.custom-switch
.custom-control-input:checked ~ .custom-control-label::before {
  background: $red-brand-primary;
  border: 1px solid $faint-secondary-primary-20;
  border-radius: 8px;
}

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

.b-form-tag-remove {
  // X button to remove tag
  font-weight: normal;
}

.b-form-tags-button {
  // Add button inside input field
  white-space: nowrap;
  margin-right: -$spacer;
  &.btn-link-primary {
    color: theme-color("primary");
    fill: currentColor;
  }
}

// Form validation icon
  .form-control.is-invalid,
  .form-control.is-valid {
    background-position: right 1rem bottom 50%;
  }

// Form validation icon with datepicker or password toggle icon
.form-control-with-button {
  &.is-invalid,
  &.is-valid {
    background-position: right 3rem bottom 50%;
  }
}

// Global style progress bar
.progress {
  width: 120px;
  height: 8px;
  border-radius: 4px;
  background-color: $faint-secondary-primary-10;
}

.progress-bar {
  background-color: $red-brand-primary;
  border-radius: 4px;
}

.progress_bar_percent {
  color: $red-brand-primary;
}

.cb label{
  padding-top: 4px;
}
.system-control__radio label {
  padding-top: 4px;
}

//radio buttons global style
  .custom-radio ::before {
    border: 1px solid $red-brand-primary;
  background-color: #fff;
  border-radius: 100%;
}

.custom-radio 
.custom-control-input:checked
~ .custom-control-label::before {
  border: 2px solid $red-brand-primary;
  background-color: $red-brand-primary;
  box-shadow: 0px 0px 0px 2.5px $white inset;
  border-radius: 100%;
}

  .custom-radio
  .custom-control-input:hover
  ~ .custom-control-label::before {
  background-color: $red-brand-primary-hover !important;
  box-shadow: 0px 0px 0px 2.5px $white inset;
  border-color: $red-brand-primary-hover;
}

.custom-radio
.custom-control-input:checked
~ .custom-control-label::after {
  background-image: none !important;
  border-radius: 100%;
}

.custom-radio
.custom-control-input:active
~ .custom-control-label::before {
  background-color: $red-brand-primary-active !important;
  box-shadow: 0px 0px 0px 2.5px $white inset;
  border-color: $red-brand-primary-active;
}