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

.button--magenta:where(:not(:disabled)) {
  --button-background-color: #a20067;
  --button-background-color-hover: color-mix(in oklch, #a20067 84%, white);
  --button-background-color-active: color-mix(in oklch, #a20067 76%, black);
  --button-text-color: var(--white);
  --button-text-color-hover: var(--white);
  --button-text-color-active: var(--white);
  --button-icon-fill: currentColor;
  --button-icon-fill-hover: currentColor;
  --button-icon-fill-active: currentColor;
  --button-icon-background-color: color-mix(in oklch, #a20067 82%, black);
  --button-icon-background-color-hover: color-mix(in oklch, #a20067 74%, white);
  --button-icon-background-color-active: color-mix(in oklch, #a20067 58%, black);
  --button-border-color: transparent;
  --button-border-color-hover: transparent;
  --button-border-color-active: transparent;

  background-color: var(--button-background-color);
  color: var(--button-text-color);
  border-color: 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);
    }
  }

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

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

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

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

.button--magenta:disabled {
  background-color: color-mix(in oklch, #a20067 60%, transparent);
  color: color-mix(in oklch, var(--white), transparent);
}