.base {
  --bg: transparent;
  --bg-hover: color-mix(in srgb, var(--bg) 90%, var(--fg));
  --fg: var(--color-text-primary);

  background-color: var(--bg);
  border-radius: var(--radius-round);
  color: var(--fg);
  transition:
    background-color 200ms,
    color 200ms;
  border: 0;
  appearance: none;
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: var(--fs-sm);
  line-height: 1;
  box-sizing: border-box;

  &:hover:not(:active) {
    background-color: var(--bg-hover);
  }

  &:focus-visible,
  &:focus-within {
    outline: 2px solid var(--color-bg-brand-base);
    outline-offset: 2px;
  }

  &:disabled,
  &:hover:disabled {
    cursor: auto;
  }
}

// Override default anchor styles
a.base {
  &:focus {
    border-radius: var(--radius-round);
  }

  &:hover {
    text-decoration: inherit;
  }
}

// Sizes

.xs {
  padding: var(--space-3xs) var(--space-2xs);
  font-size: var(--fs-2xs);
  min-height: 20px;
}

.sm {
  padding: var(--space-xs);
  min-height: 32px;
}

.md {
  padding: var(--space-xs) var(--space-sm);
  min-height: 40px;
}

.lg {
  padding: var(--space-sm) var(--space-md);
  min-height: 48px;
}

// Solid variant

.solid {
  --bg: var(--color-bg-inverted);
  --fg: var(--color-text-inverted);

  &.accent {
    --bg: var(--color-bg-brand-base);
    --bg-hover: var(--color-bg-brand-base-hover);
  }

  .neutral {
    // This technically is a duplicate, but it's added so TS realizes this class is an option.
    --bg: var(--color-bg-inverted);
    --fg: var(--color-text-inverted);
  }

  &.tonal:not(:active) {
    --bg: var(--color-bg-highlight);
    --fg: var(--color-text-primary);
  }

  &.destructive {
    --bg: var(--color-bg-error-base);
    --bg-hover: var(--color-bg-error-base-hover);
  }

  &.solid:disabled {
    --bg: var(--color-bg-disabled);
    --bg-hover: var(--bg);
    --fg: var(--color-text-on-disabled);
  }
}

// Ghost

.ghost {
  &:active {
    --bg: var(--color-bg-inverted);
    --fg: var(--color-text-inverted);
  }

  &.accent {
    --fg: var(--color-text-brand);

    &:active {
      --bg: var(--color-bg-brand-base);
      --fg: var(--color-text-on-brand-base);
    }
  }

  &.destructive {
    --fg: var(--color-text-error);

    &:active {
      --fg: var(--color-text-on-error-base);
      --bg: var(--color-bg-error-base);
    }
  }

  &:disabled,
  &:hover:disabled {
    --fg: var(--color-text-disabled);
    --bg: transparent;
    --bg-hover: transparent;
  }
}

// Helper classes

.icon {
  width: 1em;
  height: 1em;
}

// Adds padding to the text label. This is supposed to be there even if there is no icon.
.content {
  display: inline-block;
  margin: 0 var(--space-2xs);

  .xs & {
    margin: 0 var(--space-3xs);
  }
}

.iconOnly {
  aspect-ratio: 1;
}

.loading {
  color: inherit;
  height: 0.8em;
  width: 0.8em;

  .iconOnly & {
    height: 1em;
    width: 1em;
  }
}