@layer component {
  .pagination {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 4px;
    margin-block-start: 32px;
    font-size: calc(18 / 16 * 1rem);

    @media (width >= calc(768 / 16 * 1rem)) {
      margin-block-start: 48px;
      font-size: calc(20 / 16 * 1rem);
    }

    .pagination__control {
      display: flex;
      align-items: center;
      gap: 4px;
      padding: 4px 8px;
      border-radius: 100vmax;

      &.previous {
        justify-self: start;
      }

      &.next {
        justify-self: end;
      }

      &:hover,
      &:focus-visible {
        background-color: hsl(var(--hue-primary), 35%, 92%);
      }

      @media (width >= calc(600 / 16 * 1rem)) {
        padding-inline: 12px;
      }
    }

    .pagination__control-text {
      display: none;

      @media (width >= calc(600 / 16 * 1rem)) {
        display: revert;
      }
    }

    .pagination__control--disabled {
      opacity: 0.4;
      pointer-events: none;
    }

    .pagination__pages {
      justify-self: center;
      display: flex;
      align-items: baseline;
      gap: 4px;
      list-style: none;
      padding: 0;
      margin: 0;

      @media (width >= calc(600 / 16 * 1rem)) {
        gap: 8px;
      }
    }

    .pagination__page {
      display: grid;
      place-content: center;
      min-width: calc(32 / 16 * 1rem);
      height: calc(32 / 16 * 1rem);
      border-radius: 100vmax;

      &:not(.pagination__page--current):hover,
      &:not(.pagination__page--current):focus-visible {
        background-color: hsl(var(--hue-primary), 35%, 92%);
      }
    }

    .pagination__page--current {
      background: var(--c-gray-dark);
      color: white;
      font-weight: 600;
    }

    .pagination__ellipsis {
      padding-inline: 0.25rem;
      opacity: 0.6;
    }
  }
}