@layer ds-sections {
  /* #region MARK:pager */
  .ds-pager {
    --ds-pager-box: 44px;
    --ds-pager-glyph: 16px;
    --ds-pager-ink: rgba(62, 58, 57, 0.58);
    --ds-pager-ink-hover: rgba(62, 58, 57, 0.75);
    --ds-pager-ink-off: rgba(62, 58, 57, 0.2);
    --ds-pager-halo: rgba(255, 255, 255, 0.6);
    position: fixed;
    right: calc(max(4px, (var(--ds-gutter) - var(--ds-pager-box)) / 2) + env(safe-area-inset-right, 0px));
    bottom: calc(clamp(12px, 3vh, 32px) + var(--ds-pager-lift, 0px) + env(safe-area-inset-bottom, 0px));
    z-index: 9;
    display: grid;
    opacity: 0;
    transition: opacity 0.8s var(--ds-ease);
  }

  .ds-pager[hidden] {
    display: none;
  }

  .ds-pager.is-ready {
    opacity: 1;
  }

  .ds-pager__btn {
    position: relative;
    display: grid;
    place-items: center;
    width: var(--ds-pager-box);
    height: var(--ds-pager-box);
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--ds-pager-ink);
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.3s var(--ds-ease);
  }

  .ds-pager__btn::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(circle, rgba(10, 14, 23, 0.64) 17px, transparent 18px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s var(--ds-ease);
  }

  .ds-pager__btn[aria-disabled="true"] {
    color: var(--ds-pager-ink-off);
    cursor: default;
  }

  .ds-pager__btn:focus-visible {
    outline-offset: calc(var(--ds-focus-width) * -1);
    box-shadow: inset 0 0 0 calc(var(--ds-focus-width) * 2) var(--ds-focus-inner);
  }

  .ds-pager__icon {
    width: var(--ds-pager-glyph);
    height: calc(var(--ds-pager-glyph) / 2);
    overflow: visible;
    fill: none;
    stroke: currentColor;
    stroke-width: 1;
    filter: drop-shadow(0 0 1px var(--ds-pager-halo)) drop-shadow(0 0 3px var(--ds-pager-halo));
  }

  .is-header-on-dark .ds-pager,
  .ds-pager.is-on-dark {
    --ds-pager-ink: rgba(255, 255, 255, 0.6);
    --ds-pager-ink-hover: rgba(255, 255, 255, 0.8);
    --ds-pager-ink-off: rgba(255, 255, 255, 0.24);
    --ds-pager-halo: rgba(10, 14, 23, 0.55);
    --ds-focus-outer: var(--ds-white);
    --ds-focus-inner: var(--ds-navy-deep);
  }

  .is-motion .ds-pager.is-on-dark .ds-pager__btn::before {
    opacity: 1;
  }

  @media (min-width: 640px) {
    .ds-pager {
      --ds-pager-glyph: 20px;
    }
  }

  @media (hover: hover) and (pointer: fine) {
    .ds-pager__btn:not([aria-disabled="true"]):hover {
      color: var(--ds-pager-ink-hover);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .ds-pager,
    .ds-pager__btn,
    .ds-pager__btn::before {
      transition: none;
    }
  }

  @media (forced-colors: active) {
    .ds-pager__icon {
      filter: none;
    }

    .ds-pager__btn::before {
      display: none;
    }
  }

  @media print {
    .ds-pager {
      display: none;
    }
  }
  /* #endregion */
}