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

.main {
  display: flex;
  flex-direction: row;
  align-items: center;

  .arrowIcon {
    color: #828894;
    cursor: pointer;
    &:not(.disabled):hover {
      color: $button-color;
    }
  }

  .leftArrow {
    transform: rotate(-180deg);
  }

  .disabled {
    opacity: 0.5;
    cursor: default;
  }

  .pageLinkWrapper {
    column-gap: 25px;
    padding: 0 25px;

    .selectedLink {
      color: $button-color;
    }
  }

  .pageLink {
    color: #828894;
    text-decoration: none;
    font-family: $duda-title-font;
    font-size: 13px;
    align-self: center;
    user-select: none;

    &:hover {
      color: $dark-gray;
    }
  }
}