@import "../../assets/scss/main.scss";

.pagination {
  display: flex;
  align-items: center;
  @include small-block {
    width: 100%;
  }

  &::v-deep {
    .buttonComponent {
      min-width: 32px;

      &__title {
        @include text;
        font-weight: $regular;
      }

      &__wrapper {
        padding-left: 0;
        padding-right: 0;
        margin: 0 2px;

        &.active {
          min-width: 32px;
          min-height: 32px;
        }

        &:not(.arrow) {
          .buttonComponent {
            padding-left: 8px;
            padding-right: 8px;
          }
        }

        &.arrow {
          padding-left: 0;
          padding-right: 0;

          .buttonComponent {
            padding-left: 0;
            padding-right: 0;
          }
        }

      }
    }
  }

  span {
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 4px;
    white-space: nowrap;
  }

  .disabled {
    &__icon {
      pointer-events: none;

      &::v-deep {
        svg {
          * {
            &[stroke] {
              &[stroke] {
                stroke: $gray60 !important;
              }
            }

            &[fill] {
              &[fill] {
                fill: $gray60 !important;
              }
            }
          }
        }
      }
    }
  }

}