/* 0 specificity. Safari doesn't like :where(:host()) so we need a separate rule. */
:where(.wa-filled, .wa-plain, .wa-accent, .wa-outlined),
:host {
  --border-color: transparent;
  --outlined-border-color: initial;
  --outlined-border-color-hover: initial;
  --outlined-text-color: initial;
  --outlined-text-color-hover: initial;
}

.wa-outlined,
:where(.wa-callout),
:host([appearance~='outlined']) {
  --background-color: var(--outlined-background-color, transparent);
  --background-color-hover: var(--outlined-background-color-hover, var(--wa-color-fill-quiet));
  --background-color-active: var(
    --outlined-background-color-active,
    color-mix(in oklab, var(--background-color-hover), transparent 20%)
  );

  --border-color: var(--outlined-border-color, var(--wa-color-border-loud));
  --border-color-hover: var(--outlined-border-color-hover, var(--wa-color-border-loud));

  --text-color: var(--outlined-text-color, var(--wa-color-on-quiet));
  --text-color-hover: var(--outlined-text-color-hover, var(--text-color));
}

.wa-accent,
:host([appearance~='accent']) {
  --background-color: var(--wa-color-fill-loud);
  --background-color-hover: color-mix(in oklab, var(--background-color), var(--wa-color-mix-hover));
  --background-color-active: color-mix(in oklab, var(--background-color), var(--wa-color-mix-active));

  --outlined-border-color: color-mix(in oklab, var(--wa-color-fill-loud), oklab(0% none none / none) 20%);

  --text-color: var(--wa-color-on-loud, var(--wa-color-neutral-on-loud));
}

.wa-filled,
:where(.wa-callout),
:host([appearance~='filled']) {
  --background-color: var(--wa-color-fill-quiet, var(--wa-color-neutral-fill-quiet));
  --background-color-hover: var(--wa-color-fill-normal, var(--wa-color-neutral-fill-normal));
  --background-color-active: color-mix(in oklab, var(--background-color), transparent 20%);

  --outlined-border-color: var(--wa-color-border-normal);

  --text-color: var(--wa-color-on-normal, var(--wa-color-neutral-on-normal));
}

.wa-plain,
:host([appearance~='plain']) {
  --background-color: transparent;
  --background-color-hover: var(--wa-color-fill-quiet);
  --background-color-active: color-mix(in oklab, var(--background-color-hover), transparent 20%);

  --text-color: var(--wa-color-on-quiet);
}
