/*
 * .btn works on <a>, <button> and the <button> rendered by button_to.
 * Kids buttons have a pressable bottom edge (--button-edge); backoffice buttons are flat.
 */
@layer components {
  [data-theme] .btn {
    --btn-bg: var(--color-surface);
    --btn-fg: var(--color-text);
    --btn-border: var(--color-border-strong);
    --btn-edge: var(--color-border-strong);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: var(--control-height);
    margin: 0 0 var(--button-edge);
    padding: var(--space-2) var(--control-padding);
    border: var(--border-width) solid var(--btn-border);
    border-radius: var(--radius-button);
    background: var(--btn-bg);
    box-shadow: 0 var(--button-edge) 0 var(--btn-edge);
    color: var(--btn-fg);
    font-family: var(--font-display);
    font-size: var(--text-control);
    font-weight: var(--weight-display);
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition:
      transform var(--duration-fast) var(--press-ease),
      box-shadow var(--duration-fast) var(--press-ease),
      background-color var(--duration-fast) var(--ease-out);

    &:hover {
      background: color-mix(in srgb, var(--btn-bg) 92%, var(--btn-fg));
      color: var(--btn-fg);
    }

    &:active {
      transform: translateY(var(--button-edge));
      box-shadow: 0 0 0 var(--btn-edge);
    }

    &:disabled,
    &[aria-disabled="true"] {
      opacity: 0.5;
      cursor: not-allowed;
      transform: none;
      box-shadow: 0 var(--button-edge) 0 var(--btn-edge);
    }
  }

  [data-theme] {
    .btn--primary {
      --btn-bg: var(--color-brand);
      --btn-fg: var(--color-on-brand);
      --btn-border: var(--color-brand);
      --btn-edge: var(--color-brand-strong);
    }

    .btn--reward {
      --btn-bg: var(--color-reward);
      --btn-fg: var(--color-on-reward);
      --btn-border: var(--color-reward);
      --btn-edge: var(--color-reward-strong);
    }

    .btn--danger {
      --btn-bg: var(--color-danger);
      --btn-fg: #ffffff;
      --btn-border: var(--color-danger);
      --btn-edge: var(--color-danger-strong);
    }

    .btn--ghost {
      --btn-bg: transparent;
      --btn-fg: var(--color-brand);
      --btn-border: transparent;
      --btn-edge: transparent;

      &:hover {
        --btn-fg: var(--color-brand-strong);
        background: var(--color-brand-soft);
      }
    }

    .btn--sm {
      min-height: var(--control-height-sm);
      padding-inline: var(--space-4);
      font-size: var(--text-sm);
    }

    .btn--lg {
      min-height: calc(var(--control-height) + var(--space-3));
      padding-inline: var(--space-6);
      font-size: var(--text-xl);
    }

    .btn--block {
      display: flex;
      width: 100%;
    }
  }
}