@layer utility {
  .variant--outline-can-hover {
    --outline-fg: var(--brand-bg);
    --outline-fg-hover: var(--brand-bg);
    --outline-fg-active: var(--brand-bg);
    --outline-bg: var(--color-transparent);
    --outline-bg-hover: var(--brand-bg-low);
    --outline-bg-active: var(--brand-bg-low-hover);
    --outline-border-color: var(--brand-bg);

    color: var(--outline-fg);
    background-color: var(--outline-bg);
    border: solid 1px;
    border-color: var(--outline-border-color);

    &:hover {
      background-color: var(--outline-bg-hover);
      color: var(--outline-fg-hover);
    }
  }
  .variant--outline-active {
    &:active {
      background-color: var(--outline-bg-active);
      color: var(--outline-fg-active);
    }
  }
  .variant--ghost-can-hover {
    --ghost-fg: var(--brand-bg);
    --ghost-fg-hover: var(--brand-bg);
    --ghost-fg-active: var(--brand-bg);
    --ghost-bg: var(--color-transparent);
    --ghost-bg-hover: var(--brand-bg-low);
    --ghost-bg-active: var(--brand-bg-low-hover);
    --ghost-border-color: var(--color-transparent);

    color: var(--ghost-fg);
    background-color: var(--ghost-bg);
    border-color: var(--ghost-border-color);

    &:hover {
      background-color: var(--ghost-bg-hover);
      color: var(--ghost-fg-hover);
    }
  }
  .variant--ghost-active {
    &:active {
      background-color: var(--ghost-bg-active);
      color: var(--ghost-fg-active);
    }
  }
}