@use '../variables/variables-colors' as bf-v-color;
@use '../variables/variables-texts' as bf-v-text;
@use '../variables/variables-spacing' as bf-v-space;
@use '../variables/variables-breakpoints' as bf-v-bp;
@use 'sass:color';

.bf-focused {
  transition:
    border 0.2s,
    background-color 0.2s,
    box-shadow 0.2s !important;
  border-color: bf-v-color.$bf-blue !important;
  box-shadow: 0 0 0 3px rgb(0 86 179 / 25%) !important;
}

.bf-disabled,
.bf-disabled:hover,
.bf-disabled:active,
.bf-disabled:focus,
.bf-disabled::after,
.bf-disabled::before,
.bf-disabled:invalid,
.bf-disabled:checked {
  cursor: default !important; // IE8-10 fallback
  cursor: not-allowed !important;
  pointer-events: none !important;
  user-select: none !important;
  box-shadow: none !important;
  opacity: 0.5 !important;

  background-color: bf-v-color.$bf-white;
  border-color: bf-v-color.$bf-gray;
}

label.bf-disabled {
  background-color: transparent;
  border-color: transparent;
}

button.bf-disabled,
[type='button'].bf-disabled,
[type='reset'].bf-disabled,
[type='submit'].bf-disabled,
.bf-btn.bf-disabled {
  cursor: default;
  cursor: not-allowed;
  pointer-events: none;
  user-select: none;
  box-shadow: none;
  opacity: 0.5;

  color: bf-v-color.$bf-dark;
  background: bf-v-color.$bf-gray-light;

  &:hover,
  &:active,
  &:focus {
    box-shadow: none;
    color: bf-v-color.$bf-dark;
    background: bf-v-color.$bf-gray-light;
  }
}

.bf-btn--primary.bf-disabled {
  cursor: default;
  cursor: not-allowed;
  pointer-events: none;
  user-select: none;
  box-shadow: none;
  opacity: 0.5;

  color: bf-v-color.$bf-white;
  background: bf-v-color.$bf-blue;

  &:hover,
  &:active,
  &:focus {
    box-shadow: none;
    color: bf-v-color.$bf-white;
    background: bf-v-color.$bf-blue;
  }
}

.bf-invalid,
.bf-invalid:focus {
  color: bf-v-color.$bf-red !important;
  border-color: bf-v-color.$bf-red !important;
  box-shadow: 0 0 0 3px rgb(255 0 0 / 25%) !important;
}