/* The language switch (SK | CZ | EN) of the public pages: a pill of links, the
   current language filled in. On the marketing header it stands in the
   middle of the bar; on an auth card it sits in the card's top corner
   (`--card`). */

@layer components {
  .lang-switch {
    --lang-switch-background: var(--color-canvas);
    --lang-switch-border: 1.5px solid var(--color-pill-edge);
    --lang-switch-ink: var(--color-ink-secondary);
    --lang-switch-active-background: var(--color-brand-fill);
    --lang-switch-active-ink: var(--color-ink-inverted);
    --lang-switch-active-shadow: none;

    align-items: center;
    background: var(--lang-switch-background);
    border: var(--lang-switch-border);
    border-radius: var(--radius-pill);
    display: inline-flex;
    gap: 0.125rem;
    padding: 0.1875rem;
  }

  .lang-switch__link {
    border-radius: var(--radius-pill);
    color: var(--lang-switch-ink);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    padding: 0.3125rem 0.5rem;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
  }

  .lang-switch__link:hover {
    color: var(--color-brand);
  }

  .lang-switch__link--active,
  .lang-switch__link--active:hover {
    background: var(--lang-switch-active-background);
    box-shadow: var(--lang-switch-active-shadow);
    color: var(--lang-switch-active-ink);
  }

  /* After a language switch (the page carries `?locale=`) the active language
     pops into place with a bounce. */
  .lang-switch--switched .lang-switch__link--active {
    animation: lang-switch-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  }

  @keyframes lang-switch-pop {
    0% {
      opacity: 0.5;
      transform: scale(0.55);
    }
    60% {
      transform: scale(1.15);
    }
    100% {
      opacity: 1;
      transform: scale(1);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .lang-switch--switched .lang-switch__link--active {
      animation: none;
    }
  }

  /* The auth card's corner: quieter, on the card's tint, the current language
     lifted off it. */
  .lang-switch--card {
    --lang-switch-background: var(--color-surface-tint);
    --lang-switch-border: none;
    --lang-switch-ink: var(--color-ink-muted);
    --lang-switch-active-background: var(--color-surface);
    --lang-switch-active-ink: var(--color-brand);
    --lang-switch-active-shadow: 0 1px 3px oklch(from var(--color-brand) l c h / 12%);

    inset-block-start: 1rem;
    inset-inline-end: 1rem;
    position: absolute;
  }
}