// @form-field--[] color schemes

// - text colors
// - field colors
// - error colors

//// text colors ////
@mixin form-field--primary-text-color {
  color: $color-brand--two;

  .bg-brand--gradient-orange & {
    color: $color-brand--white;
  }
}

@mixin form-field--secondary-text-color {
  color: $color-brand--six;

  .bg-brand--gradient-orange & {
    color: $color-brand--white;
  }
}

@mixin form-field-border-color {
  border: 2px solid $color--grey;

  .bg-brand--gradient-orange & {
    border: 2px solid $color-brand--white;
  }
}

// disabled
@mixin form-field--disabled-text-color {
  color: $color--two-80;
}

@mixin form-field--disabled-idle {
  border-color: $color-brand--six;
}

@mixin form-field--disabled-checked {
  background: $color-brand--six;
  border-color: $color-brand--six;
}

@mixin form-field--disabled-indeterminate {
  background-color: $color-brand--six;
  border-color: $color-brand--six;
}

@mixin radio-button--disabled {
  border-color: $color-brand--six;

  &::after {
    background: $color-brand--six;
  }
}

@mixin form-field--disabled-background-color {
  background-color: $color--grey-10;
}

//// field colors ////

// radio & check buttons
@mixin form-field--border-interaction-color {
  border-color: $color-brand--one;

  .bg-brand--gradient-orange & {
    border-color: $color-brand--two;
  }
}

@mixin form-field--checked-field-color {
  background: $color-brand--one;
  border-color: $color-brand--one;

  .bg-brand--gradient-orange & {
    background: $color-brand--two;
    border-color: $color-brand--two;
  }
}

@mixin form-field--checked-active-color {
  outline: 2px solid $color-brand--one;
  outline-offset: 1px;
}

@mixin form-field--checkmark-color {
  background: $color-brand--one;

  .bg-brand--gradient-orange & {
    background: $color-brand--two;
  }
}

// option group
@mixin form-field--option-group-color {
  border: 1px solid $color--grey;
  color: $color-brand--one;

  .bg-brand--gradient-orange & {
    border: 1px solid $color-brand--five;
    color: $color-brand--white;
  }
}

@mixin form-field--option-group-hover-color {
  background: $color--one-10;
  border-color: $color-brand--one;

  .bg-brand--gradient-orange & {
    background: $color-alpha--four-30;
    border-color: $color-alpha--four-50;
  }
}

@mixin form-field--option-group-active-color {
  background: $color-brand--one;
  border-color: $color-brand--one;
  color: $color-brand--white;

  .bg-brand--gradient-orange & {
    background: $color-brand--two;
    border-color: $color-brand--two;
    color: $color-brand--white;
  }
}

//// error colors ////
@mixin form-field--feedback-color {
  color: $color--negative;
  fill: $color--negative;

  .bg-brand--gradient-orange & {
    color: $color-brand--two;
    fill: $color-brand--two;
  }
}

// specificity important
@mixin form-field--invalid {
  background: $color--negative-5;
  border-color: $color--negative;

  .bg-brand--gradient-orange & {
    border-color: $color-brand--two;
  }
}

@mixin form-field--invalid-text-icon {
}

@mixin form-field--invalid-label-color {
  color: $color--negative;

  .bg-brand--gradient-orange & {
    border-color: $color-brand--two;
  }
}

@mixin form-field--currency-color {
  border: solid 1px $color--grey;

  .bg-brand--gradient-orange & {
    border: solid 1px $color--grey;
  }
}

@mixin form-field--focus {
  border-color: $color-brand--one;
  box-shadow: 0 0 0 1pt $color-brand--one;

  .bg-brand--gradient-orange & {
    border-color: $color-brand--two;
    box-shadow: 0 0 0 1pt $color-brand--two;
  }
}

@mixin form-field--invalid-box-shadow {
  box-shadow: 0 0 0 1pt $color--negative;

  .bg-brand--gradient-orange & {
    box-shadow: 0 0 0 1pt $color-brand--two;
  }
}