/* The site footer and theme control (index.ehtml). Tokens come from the site system. */
@layer reset, tokens, base, components, templates, utilities, overrides;

@layer templates {
  .site-footer {
    border-top: 1px solid var(--rule);
    color: var(--ink-dim);
    font-family: var(--font-ui);
    font-size: var(--text-ui);
  }

  .site-footer-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3) var(--space-6);
    padding-block: var(--space-6) var(--space-8);
  }

  .site-footer-copy {
    margin: 0 auto 0 0;
  }

  .site-footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-5);
  }

  .site-footer a,
  .site-footer .button.is-text,
  .site-footer button.is-text {
    color: var(--ink-dim);
    font-size: var(--text-ui);
    text-decoration: none;
  }

  .site-footer a:hover,
  .site-footer .button.is-text:hover,
  .site-footer button.is-text:hover {
    color: var(--ink);
  }

  /* Three equal buttons in one hairline frame; the chosen one is filled. */
  .site-theme {
    display: inline-flex;
    padding: 2px;
    border: 1px solid var(--rule);
    border-radius: var(--radius-control);
  }

  .site-theme button {
    display: inline-grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: 0;
    border-radius: var(--radius-control);
    background: none;
    color: var(--ink-dim);
  }

  .site-theme button:hover {
    color: var(--ink);
  }

  .site-theme button[aria-pressed='true'] {
    background: var(--bg-muted);
    color: var(--ink);
  }
}