@layer components {
  @scope (.scope.pagination) to (.scope) {
    :scope {
      display: flex;
      gap: calc(40 * var(--px-to-rem));
      justify-content: center;
    }

    ._link a {
      --_background-color: var(--color-accent);
      --_border-color: transparent;
      --_text-color: var(--color-white);
      align-items: center;
      background: var(--_background-color);
      border: 1px solid var(--_border-color);
      border-radius: 9999px;
      color: var(--_text-color);
      display: block;
      font-size: var(--font-size-200);
      font-weight: var(--font-weight-medium);
      line-height: 1;
      padding: calc(16 * var(--px-to-rem)) calc(40 * var(--px-to-rem));
      text-decoration: none;
      transition-duration: var(--duration-default);
      transition-property: background, border-color, color, scale;
      transition-timing-function: var(--ease-custom);
      width: max-content;
    }

    ._link:where([data-direction='prev']) a {
      --_background-color: transparent;
      --_border-color: currentColor;
      --_text-color: var(--color-accent);
    }

    ._link a:active {
      scale: 0.95;
    }

    @media (hover: hover) and (pointer: fine) {
      ._link a:hover {
        opacity: 1;
      }

      ._link:not([data-direction='prev']) a:hover {
        --_background-color: transparent;
        --_border-color: currentColor;
        --_text-color: var(--color-accent);
      }

      ._link:where([data-direction='prev']) a:hover {
        --_background-color: var(--color-accent);
        --_border-color: var(--color-accent);
        --_text-color: var(--color-white);
      }
    }

    @media (width <= 767px) {
      :scope {
        gap: calc(24 * var(--px-to-rem));
      }

      ._link a {
        font-size: var(--font-size-100);
        padding: calc(12 * var(--px-to-rem)) calc(24 * var(--px-to-rem));
      }
    }
  }
}