.pagination {
  display: flex;
  width: 100%;
  column-gap: $spacing-sm;

  li {
    display: flex;

    a {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 41px;
      height: 45px;
      border: 1px solid $color-black20;
      border-radius: 2px;
      font-weight: $font-weight-bold;
      @include btn-hover($color-accent--hover);
    }

    &:first-child {
      justify-content: start;
      flex: 1;

      a {
        border-color: $color-black;
        @include icon('@/Images/icons/chevron-left.svg', 16px);

      }
    }

    &:last-child {
      justify-content: end;
      flex: 1;

      a {
        border-color: $color-black;
        @include icon('@/Images/icons/chevron-right.svg', 16px);
      }
    }

    &.is-active {
      pointer-events: none;

      a {
        border-color: $color-black;
      }
    }

    &.is-disabled {
      opacity: 0.2;
      pointer-events: none;
    }

    &.is-gap {
      align-items: end;
    }
  }

  @include media-down(xs) {
    column-gap: $spacing-xs;

    li {
      a {
        width: 31px;
        height: 35px;
      }
    }
  }
}