---
import EditionLayout from "./EditionLayout.astro";

const {
  title,
  version,
  stickyMode = "default",
} = Astro.props;
---

<EditionLayout
  title={title}
  editionLabel="Glossaire"
  editionKey="glossaire"
  statusLabel="Référentiel"
  statusKey="referentiel"
  level={1}
  version={version}
  stickyMode={stickyMode}
>
  <Fragment slot="aside">
    <slot name="aside" />
  </Fragment>

  <slot />
</EditionLayout>

<style is:global>
  body[data-edition-key="glossaire"][data-sticky-mode="glossary-entry"]{
    --entry-hero-pad-top: 18px;
    --entry-hero-pad-x: 18px;
    --entry-hero-pad-bottom: 18px;
    --entry-hero-gap: 14px;

    --entry-hero-h1-size: clamp(2.2rem, 4vw, 3.15rem);

    --entry-hero-dek-size: 1.04rem;
    --entry-hero-dek-lh: 1.55;
    --entry-hero-dek-maxw: 76ch;

    --entry-hero-meta-max-h: 12rem;
    --entry-hero-meta-opacity: 1;
  }

  body[data-edition-key="glossaire"][data-sticky-mode="glossary-entry"].glossary-entry-follow-on{
    --entry-hero-pad-top: 8px;
    --entry-hero-pad-x: 14px;
    --entry-hero-pad-bottom: 6px;
    --entry-hero-gap: 6px;

    --entry-hero-h1-size: clamp(1.45rem, 2.4vw, 1.9rem);

    --entry-hero-dek-size: .90rem;
    --entry-hero-dek-lh: 1.32;
    --entry-hero-dek-maxw: 56ch;

    --entry-hero-meta-max-h: 0px;
    --entry-hero-meta-opacity: 0;
  }

  body[data-edition-key="glossaire"][data-sticky-mode="glossary-portal"]{
    --portal-hero-pad-top: 18px;
    --portal-hero-pad-x: 18px;
    --portal-hero-pad-bottom: 20px;
    --portal-hero-gap: 14px;

    --portal-hero-h1-size: clamp(2.2rem, 4vw, 3.15rem);

    --portal-hero-intro-size: 1.04rem;
    --portal-hero-intro-lh: 1.55;
    --portal-hero-intro-maxw: 76ch;

    --portal-hero-secondary-max-h: 20em;
    --portal-hero-secondary-opacity: .94;
  }

  body[data-edition-key="glossaire"][data-sticky-mode="glossary-portal"].glossary-follow-on{
    --portal-hero-pad-top: 12px;
    --portal-hero-pad-x: 16px;
    --portal-hero-pad-bottom: 14px;
    --portal-hero-gap: 8px;

    --portal-hero-h1-size: clamp(1.95rem, 3.3vw, 2.6rem);

    --portal-hero-intro-size: .98rem;
    --portal-hero-intro-lh: 1.46;
    --portal-hero-intro-maxw: 68ch;

    --portal-hero-secondary-max-h: 4.6em;
    --portal-hero-secondary-opacity: .82;
  }

  body[data-edition-key="glossaire"][data-sticky-mode="glossary-portal"] .scene-hero,
  body[data-edition-key="glossaire"][data-sticky-mode="glossary-portal"] .glossary-portal-hero,
  body[data-edition-key="glossaire"][data-sticky-mode="glossary-portal"] .glossary-page-hero{
    transition:
      border-radius 180ms ease,
      padding 180ms ease,
      row-gap 180ms ease,
      margin-bottom 180ms ease;
  }

  body[data-edition-key="glossaire"][data-sticky-mode="glossary-portal"].glossary-follow-on .scene-hero,
  body[data-edition-key="glossaire"][data-sticky-mode="glossary-portal"].glossary-follow-on .glossary-portal-hero,
  body[data-edition-key="glossaire"][data-sticky-mode="glossary-portal"].glossary-follow-on .glossary-page-hero{
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
  }

  body[data-edition-key="glossaire"][data-sticky-mode="glossary-portal"].glossary-follow-on #reading-follow .reading-follow__inner{
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
</style>