// 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;
}

div:not(.search-global) > .form-group {
  margin-bottom: $spacer * 2;
  position: relative;
  .input-group,
  .input-password-toggle-container {
    position: initial;
  }
  small {
    font-size: x-small;
    margin-right: 3px;
  }
  .custom-radio + small {
    text-align: left;
  }
  label + div > small {
    position: absolute;
    right: 10px;
    top: 0;
    margin-right: 0;
    @include media-breakpoint-down(sm) { 
      top: -25px;
    }
  }
  .form-control,
  .input-group-prepend,
  .input-group-text,
  .custom-select {
    margin: -28px 0 0 0;
    padding-top: 28px;
    height: 56px;
    &:focus {
      z-index: unset;
      position: initial;
    }
  }
  .custom-select {
    background-color: $gray-5;
    border: none;
  }
  .custom-select:disabled,
  .form-control:disabled {
    position: initial;
  }
  .form-control:disabled:hover {
    background-color: #cccccc;
  }
  .input-group-text {
    border: none;
    background-color: $gray-5;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
  .input-group-prepend {
    position: absolute;
    & .input-group-text {
      background-color: transparent;
    }
  }
  .input-group-prepend + input {
    padding-left: 65px;
    position: initial;
  }
  .btn-datepicker {
    top: 12px;
  }
  .input-action-btn {
    top: 12px;
  }
  label {
    position: relative;
    color: $text-tretiatry;
    margin-left: 10px;
    margin-bottom: $spacer / 4;
    span {
      display: block;
    }
  }
}

.custom-select,
.form-control,
.input-group-text {
  border-radius: $border-radius;
  background-color: $white;
}

.custom-select,
.form-control {
  &:disabled {
    background-color: gray("400");
    color: gray("600");
  }
  &::placeholder {
    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;
}

.form-control {
  color: $text-secondary;
  border-radius: $border-radius;
  border: none;
  background-color: $gray-5;
  font-size: 0.875rem;
  &:focus {
    color: $text-secondary;
  }
  &:hover {
    background-color: $gray-5-hover;
  }
}

// Inverted form colors
.form-background {
  background-color: none;
  padding: 0 !important;
  width: 100%;
  .custom-select,
  .form-control {
    color: #0c1c29e6;
    border-radius: $border-radius;
    border: none;
    background-color: $gray-5;
    &:hover {
      background-color: $gray-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;
  &.absolute {
    position: absolute;
    z-index: 1;
    margin-top: 0;
  }
}

.custom-select {
  background-image: url("~@/assets/images/_sila/chevron-down.svg");
  background-size: 18px;
}

.custom-control-label > span {
  vertical-align: sub;
}

.custom-radio,
.custom-checkbox {
  .custom-control-label::before,
  .custom-control-label::after {
    margin-top: -5px;
  }
}

.custom-checkbox {
  padding-left: $spacer;
  .custom-control-label::before,
  .custom-control-label::after {
    border-radius: $border-radius / 2;
    background-color: #fff;
    border: 2px solid $on-surface-secondary;
    box-shadow: none;
  }
}

.custom-radio {
  .custom-control-input:checked ~ .custom-control-label::after {
    background-image: none;
  }
  .custom-control-input:checked ~ .custom-control-label::before {
    box-shadow: 0px 0px 0px 3px $white inset;
  }
}

.custom-switch {
  width: 28px;
  height: 16px;
  .custom-control-input ~ .custom-control-label::after {
    border: 1px solid $gray-20;
    background: $white;
  }
  .custom-control-input ~ .custom-control-label::before {
    border: 1px solid $gray-20;
    background: rgba(4, 10, 15, 0.3);
  }
}

.custom-control-input:checked ~ .custom-control-label::before,
.custom-checkbox .custom-control-input:checked ~ .custom-control-label::after,
.custom-checkbox
  .custom-control-input:indeterminate
  ~ .custom-control-label::before {
  border: 1px solid $red !important;
  background-color: $red !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-control-input:focus:not(:checked) ~ .custom-control-label::before {
  border-color: $gray-20;
}

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

.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%;
  }
}
// For invisible label of fields
.invisible {
  height: 0;
  margin-bottom: 0;
}
// Global style progress bar
.progress {
  height: 8px;
  background-color: $gray-10;
}

.progress-bar {
  background-color: $red;
}

.progress_bar_percent {
  color: $red;
}

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

@media (min-width: 1200px) {
  .search-block-1200 {
    position: absolute;
    top: 4.3rem;
    right: $spacer;
    justify-content: end;
  }
}

@media (min-width: 768px) {
  .search-block {
    position: absolute;
    top: 4.3rem;
    right: $spacer;
    justify-content: end;
  }
}
@media (max-width: 768px) {
  .date-filter {
    display: flex;
    flex-direction: column;
  }
}