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

// - text colors
//   -- disabled colors
// - field colors
//   -- radio & check colors
//   -- option group
// - error colors

//// text colors ////

@mixin form-field--primary-text-color {
  color: returnColorCSSVar('brand-secondary');

  @include bg-variants() {
    color: variant-property('bodyPrimary');
  }
}

@mixin form-field--secondary-text-color {
  color: returnColorCSSVar('brand-secondary-tint-60');

  @include bg-variants() {
    color: variant-property('formTextSecondary');
  }

  a {
    color: returnColorCSSVar('brand-secondary-tint-60');

    @include bg-variants() {
      color: variant-property('formTextSecondary');
    }
    text-decoration: underline solid currentColor;
    &:hover {
      text-decoration: underline solid transparent;
    }
  }
}

@mixin form-field-border-color {
  border: 2px solid returnColorCSSVar(gray-20);
}

// disabled
@mixin form-field--disabled-text-color {
  color: returnColorCSSVar('brand-secondary-tint-80');

  @include bg-variants() {
    color: variant-property('formTextSecondary');
  }
}

@mixin form-field--disabled-background-color {
  background-color: returnColorCSSVar('gray-20');
}

@mixin form-field--disabled-idle {
  border-color: returnColorCSSVar('gray-20');
}

@mixin form-field--disabled-checked {
  background: returnColorCSSVar('gray-20');
  border-color: returnColorCSSVar('gray-20');
}

@mixin form-field--disabled-indeterminate {
  background: returnColorCSSVar('gray-20');
}

@mixin radio-button--disabled {
  background: $color--grey-10;
  border-color: $color--grey;

  &::after {
    background: $color--grey;
  }
}

//// field colors ////

// radio & check buttons
@mixin form-field--border-interaction-color {
  border-color: returnColorCSSVar('brand-primary');

  @include bg-variants() {
    border-color: variant-property('formBorderSecondary');
  }
}

@mixin form-field--checked-field-color {
  background: returnColorCSSVar('brand-primary');
  border-color: returnColorCSSVar('brand-primary');

  @include bg-variants() {
    background: variant-property('formInputFillPrimary');
    border-color: variant-property('formInputFillPrimary');
  }
}

@mixin form-field--checked-active-color {
  outline: 2px solid returnColorCSSVar('brand-primary');
  outline-offset: 1px;

  @include bg-variants() {
    outline: 2px solid variant-property('formBorderSecondary');
  }
}

@mixin form-field--checkmark-color {
  background: returnColorCSSVar('brand-primary');

  @include bg-variants() {
    background: variant-property('formInputFillPrimary');
  }
}

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

  @include bg-variants() {
    border-color: variant-property('ghostBorderIdle');
    color: variant-property('ghostTextIdle');
  }
}

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

  @include bg-variants() {
    background: variant-property('ghostBackgroundHover');
    border-color: variant-property('ghostBackgroundHover');
    color: variant-property('ghostTextHover');
  }
}

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

  @include bg-variants() {
    background: variant-property('ghostBackgroundPressed');
    border-color: variant-property('ghostBackgroundPressed');
    color: variant-property('ghostTextPressed');
  }
}

//// error colors ////
@mixin form-field--feedback-color {
  color: returnColorCSSVar('ui-negative');

  @include bg-variants() {
    color: variant-property('negative');
  }
}

// specificity important
@mixin form-field--invalid {
  background: returnColorCSSVar('ui-negative-5');
  border-color: returnColorCSSVar('ui-negative');

  @include bg-variants() {
    background: variant-property('formErrorSecondary');
    border-color: variant-property('formErrorPrimary');
    color: variant-property('formErrorInputText');
  }
}

@mixin form-field--invalid-text-icon {
  color: returnColorCSSVar('brand-secondary');
  fill: returnColorCSSVar('brand-secondary');
}

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

  .bg-brand--dark-blue &,
  .bg-brand--blue &,
  .bg-brand--turquoise &,
  .bg-brand--yellow & {
    color: $color-brand--two;
  }

  .bg-brand--red & {
    color: $color--two-180;
  }

  @include bg-variants() {
    color: variant-property('formErrorPrimary');
  }
}

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

  .bg-brand--turquoise &,
  .bg-brand--yellow & {
    border: solid 1px $color-brand--two;
  }

  .bg-brand--red & {
    border: solid 1px $color--two-180;
  }

  @include bg-variants() {
    border: 1px solid variant-property('formBorderPrimary');
  }
}

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

  .bg-brand--turquoise &,
  .bg-brand--yellow & {
    border-color: $color-brand--two;
    box-shadow: 0 0 0 1pt $color-brand--two;
  }

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

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

  .bg-brand--dark-blue &,
  .bg-brand--blue &,
  .bg-brand--turquoise &,
  .bg-brand--yellow & {
    box-shadow: 0 0 0 1pt $color-brand--two;
  }

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