/* Buttons. BEM-lite (block__element, block--modifier). Layer order in _global.css. */

@layer components {
  .btn {
    --btn-bg: var(--color-primary);
    --btn-bg-hover: var(--color-primary-press);
    --btn-fg: var(--color-on-primary);
    --btn-border: transparent;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: var(--tap);
    padding-inline: var(--inline-space-double);
    background: var(--btn-bg);
    color: var(--btn-fg);
    border: 1px solid var(--btn-border);
    border-radius: var(--radius-md);
    font-size: var(--text-normal);
    font-weight: 600;
    text-align: center;

    @media (any-hover: hover) {
      &:hover {
        background: var(--btn-bg-hover);
        color: var(--btn-fg);
        text-decoration: none;
      }
    }

    &:visited {
      color: var(--btn-fg);
    }

    &.btn--ghost {
      --btn-bg: var(--color-canvas);
      --btn-bg-hover: var(--color-surface-sunken);
      --btn-fg: var(--color-ink);
      --btn-border: var(--color-border);
    }

    &.btn--sm {
      min-block-size: var(--component-sm);
      padding-inline: 1.5ch;
      font-size: var(--text-x-small);
    }

    &.btn--block {
      inline-size: 100%;
    }
  }
}