/**
 * @file
 * Button magenta outline variant.
 */

.button--magenta-outline:where(:not(:disabled)) {
  --button-background-color: var(--white);
  --button-background-color-hover: #a20067;
  --button-background-color-active: var(--white);
  --button-text-color: var(--neutral-1000);
  --button-text-color-hover: var(--white);
  --button-text-color-active: var(--neutral-1000);
  --button-icon-fill: currentColor;
  --button-icon-fill-hover: currentColor;
  --button-icon-fill-active: currentColor;
  --button-icon-background-color: transparent;
  --button-icon-background-color-hover: transparent;
  --button-icon-background-color-active: transparent;
  --button-border-color: #a20067;
  --button-border-color-hover: #a20067;
  --button-border-color-active: #a20067;

  background-color: var(--button-background-color);
  color: var(--button-text-color);
  border: solid 2px var(--button-border-color);

  &:hover {
    background-color: var(--button-background-color-hover);
    border-color: var(--button-border-color-hover);
    color: var(--button-text-color-hover);
  }

  &:active {
    background-color: var(--button-background-color-active);
    border-color: var(--button-border-color-active);
    color: var(--button-text-color-active);
  }

  .button__prefix,
  .button__suffix {
    background-color: var(--button-icon-background-color);

    svg,
    path {
      fill: var(--button-icon-fill);
      color: var(--button-icon-fill);
    }
  }
}

.button--magenta-outline:disabled {
  background-color: var(--white);
  color: color-mix(in oklch, var(--neutral-1000), transparent);
  border-color: color-mix(in oklch, #a20067, transparent);
}