.paginator {
  background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-tertiary) 100%);
  border-radius: 2em;
  display: inline-flex;

  .paginator__button {
    position: relative;
    padding: 0.6em 2em 0.72em 1em;
    border: 0;
    color: var(--color-txt--reversed);
    text-decoration: none;
    font-weight: 500;

    &::before {
      filter: var(--colorize-inverted-ink);
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      right: 0.75em;
      width: 1em;
      background: url("/assets/icons/arrow-next-7c779978.svg") center center / 1em no-repeat;
    }
  }

  .paginator__button + .paginator__button {
    padding-left: 1em;
    border-left: 1px solid rgba(0, 0, 0, 0.1);
  }

  .paginator__prev {
    padding-left: 2em;
    padding-right: 1em;

    &::before {
      right: auto;
      left: 0.75em;
      background-image: url("/assets/icons/arrow-prev-d03ab004.svg");
    }
  }
}