@use './src/styles/vendor/variables' as vv;

/* Reset checkbox success color */
.was-validated .form-check-input:valid,
.form-check-input.is-valid {
  border-color: rgba(vv.$primary, 0.8);

  &:checked {
    background-color: vv.$primary;
    border-color: rgba(vv.$primary, 0.8);
    box-shadow: 0 0 3px 2px rgba(vv.$primary, 0.5);
  }

  &:focus {
    border-color: rgba(vv.$primary, 0.8);
    box-shadow: 0 0 3px 2px rgba(vv.$primary, 0.5);
  }

  ~ .form-check-label {
    color: initial;
  }

  &:checked ~ .form-check-label::before {
    background-color: $component-active-bg;
  }

  ~ .form-check-label::before {
    border-color: rgba(vv.$primary, 0.8);
  }

  &:focus ~ .custom-control-label::before {
    box-shadow: 0 0 3px 2px rgba(vv.$primary, 0.5);
  }

  &:focus:not(:checked) ~ .custom-control-label::before {
    border-color: rgba(vv.$primary, 0.8);
  }
}

/* Buttons */
.btn-light {
  background-color: vv.$white;
  border-color: vv.$gray-400 !important;

  &:hover {
    background-color: vv.$gray-300;
    border-color: vv.$gray-600 !important;
  }

  &:disabled {
    background-color: vv.$gray-200;
    border-color: vv.$gray-400 !important;
  }
}

.btn-primary {
  @extend .btn-accent;
}

// We have some inputs that don't have a corresponding formControlName,
// to be able to get the same styling and no JS errors we need use a different
// class name
.cd-form-control {
  @extend .form-control;
}

.btn {
  &,
  &:active,
  &.active {
    &:focus,
    &.focus {
      outline: 0;
    }
  }

  &.disabled {
    border: 0;
    box-shadow: none;
  }
}

.btn-primary .badge {
  background-color: vv.$gray-200;
  color: vv.$primary;
}

.btn-group > .btn > i.fa,
.cd-datatable-actions button.btn i.fa {
  /** Add space between icon and text */
  margin-right: 5px;
}

.card-footer button.btn:not(:first-child) {
  margin-left: 5px;
}