@import '~styles/mixins';

.pages {
  display: flex;
  justify-content: center;
  margin-top: 30px;
  > * {
    margin: 0 5px;
    display: block;
    a {
      display: block;
      text-align: center;
      border: 1px solid $color_border;
      padding: 4px 10px;
      min-width: 34px;
      border-radius: 4px;
    }
    &.active,
    &:hover:not(.disabled) {
      a {
        background-color: $color_primary;
        color: white;
      }
    }
    &.disabled {
      opacity: 0.7;
      a {
        cursor: not-allowed;
      }
    }
  }
}
