@import '../../../scss/styles.scss';

.paginator {
  display: flex;
  margin-bottom: $baseline;

  &__page {
    cursor: pointer;

    &--is-current {
      background: var(--theme-elevation-100);
      color: var(--theme-elevation-400);
      cursor: default;
    }

    &--is-last-page {
      margin-right: 0;
    }
  }

  .clickable-arrow,
  &__page {
    @extend %btn-reset;
    width: base(2);
    height: base(2);
    display: flex;
    justify-content: center;
    align-content: center;
    outline: 0;
    padding: base(.5);
    color: var(--theme-elevation-800);
    line-height: base(1);

    &:hover:not(.clickable-arrow--is-disabled) {
      background: var(--theme-elevation-100);
    }
  }

  &__page,
  &__separator {
    margin-right: base(.25);
  }

  &__separator {
    align-self: center;
    color: var(--theme-elevation-400);
  }
}