@layer components {
  /* Index
  /* -------------------------------------------------------------------------- */

  .one-pager-panel {
    --panel-padding: 8cqi;
  }

  .one-pager-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--block-space) var(--inline-space);
    container-type: inline-size;
    letter-spacing: -0.01ch;
    outline-offset: var(--inline-space-half);

    .hide-in-one-pagers {
      display: none;
    }

    .mini-card {
      flex: 1 1 calc(33cqi - var(--inline-space));
      min-inline-size: 180px;
      max-inline-size: 33cqi;
    }

    .mini-card__content {
      aspect-ratio: 4 / 5;
      font-size: clamp(0.5rem, 5cqi, 0.8rem);
      position: relative;
    }

    .one-pager__star-btn {
      --btn-size: 2em;
      border: 0;
      color: var(--color-blue);
      inset-block-start: 0.5em;
      inset-inline-end: 0.5em;
      position: absolute;
    }
  }

  /* Toolbar
  /* ------------------------------------------------------------------------ */

  .one-pager-toolbar {
    --hover-size: 0;

    border-radius: 0.83rem;
    display: inline-grid;
    grid-template-columns: repeat(7, 1fr);
    position: relative;

    button {
      align-items: center;
      appearance: none;
      aspect-ratio: 1;
      background-color: transparent;
      block-size: 2.5em;
      border: none;
      border-radius: 1ch;
      color: var(--color-text-inverted);
      cursor: pointer;
      display: flex;
      flex-direction: column;
      flex-shrink: 0;
      font-weight: 500;
      gap: 4px;
      justify-content: center;
      line-height: 1;
      transition: background-color 150ms ease;

      &:focus-visible {
        background-color: oklch(var(--lch-ink) / 0.33);
      }

      &:active {
        background-color: oklch(var(--lch-ink) / 0.33);
      }

      @media (hover: hover) {
        &:hover {
          background-color: oklch(var(--lch-ink) / 0.33);
        }
      }
    }

    :is(img, svg) {
      -webkit-touch-callout: none;
      block-size: 1.25em;
      fill: currentColor;
      inline-size: auto;
      user-select: none;
    }

    .icon {
      font-size: 1.5em;
      user-select: none;
    }
  }

  .one-pager-toolbar--no-blocks {
    background-color: var(--color-theme);
    border-radius: 0.5em;
    justify-content: center;
    padding: 0.5rem;
    position: relative;

    /* Triangle */
    &::before {
      block-size: 0;
      border-block-end: 0.75rem solid var(--color-theme);
      border-inline: 0.75rem solid transparent;
      content: "";
      inline-size: 0;
      inset-block-start: -0.75rem;
      inset-inline-start: calc(50% - 0.75rem);
      position: absolute;
    }

    button {
      aspect-ratio: auto;
      block-size: auto;
      font-size: var(--txt-small);
      font-weight: 500;
      inline-size: 100%;
      line-height: 1;
      padding-inline: 1ch;
      text-transform: capitalize;
    }

    @media (max-width: 480px) {
      grid-template-columns: repeat(4, 1fr);
    }
  }
}