/*
 * Librarium Militaris: the buttons.
 *
 * Five of them, each named for the job it does rather than for how it looks.
 * They share this file because they are one family and differ by a handful of
 * variables; they do not yet share a .button base class, because report.css
 * still reaches for .btn-signup and .btn-submit by name. That is the join to
 * make when the report page is converted.
 */

@layer components {
  /* The archive's primary action, and the only filled button on the page: the
     masthead corner and the footer both raise the sign-up dialog with it. */
  .btn-signup {
    --btn-background: var(--color-accent);
    --btn-font-size: var(--text-13);
    --btn-padding: var(--space-8) var(--space-16);
    --btn-icon-size: var(--space-16);

    display: inline-flex;
    align-items: center;
    gap: var(--space-8);
    padding: var(--btn-padding);
    background-color: var(--btn-background);
    color: var(--color-on-accent);
    border-radius: var(--radius);
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: var(--btn-font-size);
    line-height: var(--leading-20);
    letter-spacing: var(--tracking-lg);
    text-transform: uppercase;
    white-space: nowrap;
    box-shadow: var(--shadow-signup);
    transition: background-color var(--transition-fast), box-shadow var(--transition-fast);

    &:hover {
      --btn-background: var(--color-accent-hover);

      box-shadow: var(--shadow-signup-hover);
    }

    & svg {
      width: var(--btn-icon-size);
      height: var(--btn-icon-size);
      flex: none;
    }

    &:focus-visible {
      outline: var(--focus-ring);
      outline-offset: var(--focus-ring-offset);
    }

    @media (min-width: 768px) {
      --btn-font-size: var(--text-14);
    }
  }

  /* The form's own submit, which owns the width of the dialog. */
  .btn-signup--wide {
    --btn-font-size: var(--text-14);
    --btn-padding: var(--space-12) var(--space-16);

    width: 100%;
    justify-content: center;
  }

  /* The other half of the pair, outlined so the sign-up beside it stays the
     louder of the two. */
  .btn-submit {
    --btn-color: var(--color-accent);

    display: inline-block;
    color: var(--btn-color);
    border: 1px solid var(--btn-color);
    padding: var(--space-8) var(--space-16);
    border-radius: var(--radius);
    font-family: var(--font-heading);
    font-size: var(--text-14);
    line-height: var(--leading-20);
    text-transform: uppercase;
    letter-spacing: var(--tracking-sm);
    /* Four words that break over two lines make a button twice the height of the
       one beside it, so it holds its line and the row wraps around it instead. */
    white-space: nowrap;
    transition: color var(--transition-fast), border-color var(--transition-fast);

    &:hover { --btn-color: var(--color-ink-bright); }
  }

  /* Opens the filter drawer, and stays lit while it is open. */
  .btn-filters {
    --btn-background: var(--color-surface);
    --btn-color: var(--color-ink-muted);
    --btn-border: var(--color-border);

    display: inline-flex;
    align-items: center;
    gap: var(--space-8);
    padding: var(--space-6) var(--space-12);
    color: var(--btn-color);
    background-color: var(--btn-background);
    border: 1px solid var(--btn-border);
    border-radius: var(--radius);
    font-family: var(--font-heading);
    font-size: var(--text-14);
    line-height: var(--leading-20);
    letter-spacing: var(--tracking-2xs);
    text-transform: uppercase;
    white-space: nowrap;
    transition: color var(--transition-fast), border-color var(--transition-fast),
                background-color var(--transition-fast);

    & svg {
      width: var(--space-16);
      height: var(--space-16);
    }

    &:hover {
      --btn-color: var(--color-ink-bright);
      --btn-border: var(--color-border-hover);
    }

    &.is-open {
      --btn-background: var(--color-border-strong);
      --btn-color: var(--color-ink-bright);
    }
  }

  /* The way out of an empty result set. */
  .btn-reset {
    --btn-background: var(--color-accent);

    padding: var(--space-8) var(--space-24);
    background-color: var(--btn-background);
    color: var(--color-on-accent);
    font-family: var(--font-heading);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--tracking-sm);
    border-radius: var(--radius);
    transition: background-color var(--transition-fast);

    &:hover { --btn-background: var(--color-accent-hover); }
  }

  /* The next page of results, stamped from the same plate as the masthead. */
  .btn-loadmore {
    --btn-color: var(--color-ink-muted);
    --btn-border: var(--color-border);

    display: inline-flex;
    align-items: center;
    gap: var(--space-8);
    padding: var(--space-12) var(--space-32);
    background-color: var(--color-surface);
    border: 1px solid var(--btn-border);
    border-radius: var(--radius);
    color: var(--btn-color);
    font-family: var(--font-heading);
    font-size: var(--text-14);
    line-height: var(--leading-20);
    letter-spacing: var(--tracking-xl);
    text-transform: uppercase;
    box-shadow: var(--shadow-plate);
    transition: color var(--transition-fast), border-color var(--transition-fast);

    &:hover {
      --btn-color: var(--color-accent);
      --btn-border: var(--color-accent);
    }

    & svg {
      width: var(--space-16);
      height: var(--space-16);
      transition: transform var(--transition-fast);
    }

    /* The arrow leans the way the page is about to go. */
    &:hover svg { transform: translateY(var(--space-4)); }
  }
}