@layer components {
  .pagination__list {
    display: flex;
    align-items: center;
    gap: var(--spacing-unit-xs);
  }

  .pagination__item {
    vertical-align: middle;
    border-radius: var(--border-radius);
    padding: var(--spacing-unit-s);
    font: var(--font-button-text);
    line-height: 1;
  }

  .pagination__item--current {
    background-color: var(--color-brand-01);
    color: var(--color-utility-01);
  }

  .pagination__item--next,
  .pagination__item--previous {
    color: var(--color-brand-01);

    svg {
      width: 1.6rem;
      height: 1.6rem;
    }

    &[disabled] {
      opacity: 0.5;
      cursor: not-allowed;
    }
  }
}