// @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: $color-brand--two;

  .bg-brand--dark-blue &,
  .bg-brand--blue & {
    color: $color-brand--four;
  }
}

@mixin form-field--secondary-text-color {
  color: $color--two-60;

  .bg-brand--off-white & {
    color: $color--two-80;
  }

  .bg-brand--blue &,
  .bg-brand--dark-blue & {
    color: $color-alpha--four-50;
  }

  .bg-brand--turquoise &,
  .bg-brand--yellow & {
    color: $color-alpha--two-70;
  }

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

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

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

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

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

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

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

@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: $color-brand--one;

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

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

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

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

  .bg-brand--blue &,
  .bg-brand--turquoise &,
  .bg-brand--yellow &,
  .bg-brand--red & {
    background: $color-brand--four;
  }
}

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

  .bg-brand--dark-blue &,
  .bg-brand--blue &,
  .bg-brand--turquoise &,
  .bg-brand--red & {
    border: 1px solid $color-alpha--four-50;
    color: $color-brand--four;
  }

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

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

  .bg-brand--dark-blue &,
  .bg-brand--blue &,
  .bg-brand--turquoise &,
  .bg-brand--red & {
    background: $color-alpha--four-30;
    border-color: $color-alpha--four-50;
  }

  .bg-brand--yellow & {
    background: $color-alpha--two-10;
    border-color: $color-alpha--two-30;
  }
}

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

  .bg-brand--blue &,
  .bg-brand--turquoise &,
  .bg-brand--yellow &,
  .bg-brand--red & {
    background: $color-brand--two;
    border-color: $color-brand--two;
    color: $color-brand--four;
  }
}

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

  .bg-brand--blue & {
    color: $color-brand--six;
    fill: $color-brand--six;
  }

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

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

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

  .bg-brand--blue & {
    border-color: $color-brand--six;
  }

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

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

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

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

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