.button {
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  outline: none;
  border: 0;
  border-radius: var(--border-radius);
  transition: all 150ms ease;

  &:focus-visible {
    box-shadow: 0 0 0 2px var(--color-background-brand);
  }
}

.variant-primary {
  color: var(--color-content-brand);
  background: var(--color-background-brand);

  @media (hover: hover) {
    &:focus-visible,
    &:hover {
      background: oklch(from var(--color-background-brand) calc(l - 0.05) c h);
    }
  }
}

.variant-secondary {
  color: var(--color-content-primary);
  background: var(--color-background-tertiary);

  @media (hover: hover) {
    &:focus-visible,
    &:hover {
      background: oklch(
        from var(--color-background-tertiary) calc(l + 0.05) c h
      );
    }
  }
}

.size-s {
  padding: calc(var(--space-xs) / 2) var(--space-2xs);

  &:active {
    padding-block: calc(var(--space-xs) / 2 + 1px)
      calc(var(--space-xs) / 2 - 1px);
  }
}

.size-m {
  min-inline-size: 180px;
  padding: calc(var(--space-xs) / 1.25) var(--space-l);

  &:active {
    padding-block: calc(var(--space-xs) / 1.25 + 2px)
      calc(var(--space-xs) / 1.25 - 2px);
  }
}

.bordered {
  border: 1px solid var(--color-border);
}
