.pagination {
  display: flex;
  gap: var(--spacing-2);
  padding-block: var(--spacing-10) var(--spacing-4);
  padding-inline: var(--spacing-2);
  .page {
    display: inline-flex;
    border-radius: var(--radius-4);
    overflow: hidden;
    transition: 0.2s;
    min-width: 36px;
    height: 36px;
    &:hover,
    &:focus {
      background: var(--color-surface-primary-light);
    }
    &.current {
      background: var(--color-surface-primary);
      color: var(--color-text-inverse-high);
      min-width: 36px;
      height: 36px;
      padding: var(--spacing-2) var(--spacing-3);
      align-items: center;
      justify-content: center;
      font-size: var(--font-size-6);
      line-height: var(--line-height-0);
      font-weight: 400;
      &:hover {
        background: var(--color-surface-primary);
      }
      a {
        color: var(--color-text-inverse-high);
      }
    }
    &.next,
    &.prev,
    &.first,
    &.last {
      a {
        width: 36px;
        svg {
          fill: var(--color-text-primary);
          width: 18px;
          height: 18px;
        }
      }
    }
    a {
      padding: var(--spacing-2) var(--spacing-3);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 36px;
      height: 36px;
      font-size: var(--font-size-6);
      line-height: var(--line-height-0);
      font-weight: 400;
      color: var(--color-text-primary);
      text-decoration: none;
    }
  }
}