/* Button: one shape for every action.
   data-variant  primary   the one filled action on a view
                 secondary everything else (the default)
                 ghost     sits in running text and toolbars
   data-size     large | small
   data-shape    icon      a square icon-only button (give it an aria-label)
   data-width    full */
.button {
  --button-bg: var(--color-surface-2);
  --button-bg-hover: var(--color-surface-3);
  --button-fg: var(--color-text);
  --button-pad-block: var(--space-2xs);
  --button-pad-inline: var(--space-s);

  align-items: center;
  appearance: none;
  background: var(--button-bg);
  border: 0;
  border-radius: var(--radius-pill);
  color: var(--button-fg);
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-size: var(--step--1);
  font-weight: var(--weight-semibold);
  gap: var(--space-2xs);
  justify-content: center;
  line-height: var(--leading-snug);
  padding: var(--button-pad-block) var(--button-pad-inline);
  text-decoration: none;
  transition:
    background-color var(--duration-fast) var(--ease-out),
    filter var(--duration-fast) var(--ease-out),
    scale var(--duration-fast) var(--ease-out);
  white-space: nowrap;

  &:hover {
    background: var(--button-bg-hover);
  }

  &:active {
    scale: 0.98;
  }

  &:disabled,
  &[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: 0.45;
    scale: 1;
  }

  .icon {
    --icon-size: 1.15em;
  }
}

.button[data-variant="primary"] {
  --button-bg: var(--color-accent-fill);
  --button-bg-hover: var(--color-accent-fill);
  --button-fg: var(--color-on-accent);

  &:hover:not(:disabled) {
    filter: brightness(1.08) saturate(1.05);
  }
}

.button[data-variant="ghost"] {
  --button-bg: transparent;
  --button-bg-hover: var(--color-surface-2);
}

.button[data-size="large"] {
  --button-pad-block: var(--space-xs);
  --button-pad-inline: var(--space-m);

  font-size: var(--step-0);
}

.button[data-size="small"] {
  --button-pad-block: var(--space-3xs);
  --button-pad-inline: var(--space-xs);

  font-size: var(--step--2);
}

.button[data-shape="icon"] {
  aspect-ratio: 1;
  padding: var(--button-pad-block);
}

.button[data-width="full"] {
  width: 100%;
}