@use 'Foundation/scss/typography-chains' as chains;

$d20: #333850;
$d30: #595d70;
$d40: #868aa5;
$d80: #ffffff;
$d10-30: rgba(0, 6, 36, 0.3);
$b05: #0f62e6;
$b20: #5999ff;
$r10: #ee4437;
$r30: #f69891;
$y30: #ffd16e;
$br10: #000000;
$br20: #333853;
$br30: #b5b5b5;
$br40: #c0c2ce;

.theme-brand {
  @layer wds.composition {
    &:is(div) .button.button--skin-dark.button--priority-primary {
      background-color: $br10;
    }

    @media (hover: hover) {
      &:is(div) .button.button--skin-dark.button--priority-primary:hover {
        background-color: $br20;
      }
    }

    &:is(div) .button.button--skin-dark.button--priority-primary.button--disabled {
      background-color: $br30;
    }

    &:is(div) .button.button--skin-dark.button--priority-secondary {
      /* stylelint-disable-next-line plugin/use-baseline */
      outline: solid 1px $br10;
      color: $br10;
    }

    @media (hover: hover) {
      &:is(div) .button.button--skin-dark.button--priority-secondary:hover {
        color: $d80;
        background-color: $br20;
        /* stylelint-disable-next-line plugin/use-baseline */
        outline-color: $br20;
      }
    }

    &:is(div) .button.button--skin-dark.button--priority-secondary:active {
      color: $d80;
      background-color: $br10;
      /* stylelint-disable-next-line plugin/use-baseline */
      outline-color: $br10;
    }

    &:is(div) .button.button--skin-dark.button--priority-secondary.button--disabled {
      color: $br30;
      /* stylelint-disable-next-line plugin/use-baseline */
      outline-color: $br30;
    }
  }

  div:where(&) .heading.heading--appearance-h1,
  div:where(&) .heading.heading--size-extra-large {
    font-family: chains.$font-family-display;
    font-size: var(--wds-font-size-heading-1, var(--wsr-heading-font-size-h1, 32px));
    font-weight: var(--wds-font-weight-heading-1, var(--wsr-font-weight-bold, 700));
    line-height: var(--wds-font-line-height-heading-1, var(--wsr-heading-line-height-h1, 42px));
    letter-spacing: var(--wds-font-letter-spacing-heading-1, unset);
  }

  div:where(&) .heading.heading--appearance-h2,
  div:where(&) .heading.heading--size-large {
    font-family: chains.$font-family-display;
    font-size: var(--wds-font-size-heading-2, var(--wsr-heading-font-size-h2, 24px));
    font-weight: var(--wds-font-weight-heading-2, var(--wsr-font-weight-bold, 700));
    line-height: var(--wds-font-line-height-heading-2, var(--wsr-heading-line-height-h2, 30px));
    letter-spacing: var(--wds-font-letter-spacing-heading-2, unset);
  }

  div:where(&) .text.text--skin-standard.text--secondary {
    color: $d30;
  }

  div:where(&) .text.text--skin-standard.text--secondary > a {
    color: $d30;
    text-decoration: underline;
  }

  @media (hover: hover) {
    div:where(&) .text.text--skin-standard.text--secondary > a:hover {
      color: $d20;
    }
  }

  div:where(&) .input-with-label {
    border: solid 1px $d40;
  }

  div:where(&) .input-with-label.input--has-focus {
    border-color: $b05;
    border-width: 2px;
    box-shadow: none;
  }

  div:where(&) .input-with-label.input--force-hover.input--border-standard,
  div:where(&) .input-with-label.input--force-hover.input--border-round {
    border-color: $b20;
    background-color: $d80;
  }

  @media (hover: hover) {
    div:where(&) .input-with-label:hover:not(.input--has-focus):not(.input--disabled).input--border-standard,
    div:where(&) .input-with-label:hover:not(.input--has-focus):not(.input--disabled).input--border-round {
      border-color: $b20;
      background-color: $d80;
    }
  }

  div:where(&) .input-with-label.input--disabled {
    border-color: $br40;
    background-color: $d80;
    color: $d10-30;
  }

  div:where(&) .input-with-label.input--force-hover.input--border-standard.input--status-error,
  div:where(&) .input-with-label.input--force-hover.input--border-round.input--status-error {
    border-color: $r30;
    background-color: $d80;
  }

  @media (hover: hover) {
    div:where(&) .input-with-label:hover:not(.input--has-focus):not(.input--disabled).input--border-standard.input--status-error,
    div:where(&) .input-with-label:hover:not(.input--has-focus):not(.input--disabled).input--border-round.input--status-error {
      border-color: $r30;
      background-color: $d80;
    }
  }

  div:where(&) .input-with-label:not(.input--disabled).input--status-error.input--border-standard.input--has-focus,
  div:where(&) .input-with-label:not(.input--disabled).input--status-error.input--border-round.input--has-focus {
    border-color: $r10;
    border-width: 2px;
    box-shadow: none;
  }

  div:where(&) .input-with-label.input--force-hover.input--border-standard.input--status-warning,
  div:where(&) .input-with-label.input--force-hover.input--border-round.input--status-warning {
    border-color: $y30;
    background-color: $d80;
  }

  @media (hover: hover) {
    div:where(&) .input-with-label:hover:not(.input--has-focus):not(.input--disabled).input--border-standard.input--status-warning,
    div:where(&) .input-with-label:hover:not(.input--has-focus):not(.input--disabled).input--border-round.input--status-warning {
      border-color: $y30;
      background-color: $d80;
    }
  }

  div:where(&) .input-with-label:not(.input--disabled).input--status-warning.input--border-standard.input--has-focus,
  div:where(&) .input-with-label:not(.input--disabled).input--status-warning.input--border-round.input--has-focus {
    border-color: $y30;
    border-width: 2px;
    box-shadow: none;
  }

  div:where(&) .labelled-element:disabled .labelled-element__label .labelled-element__label-text {
    color: $d10-30;
  }
}