$page-item-size: rem-calc(36);
$page-item-border: solid 1px #bbbbbb;
%page-theme {
  @extend .grid-x,
  .align-center,
  .align-middle;
  @include box($page-item-size, $page-item-size);
  background-color: $lighter-gray;
  color: $primary-light-color;
  border-top: $page-item-border;
  border-bottom: $page-item-border;
}

.page-text-button {
  height: $page-item-size;
  border: $page-item-border;
  padding: rem-calc(0 15);
}

.page-arrow-button {
  @extend %page-theme;
  font-size: $large-font-size-global;
  &--right {
    border-right: $page-item-border;
    border-radius: 0px 4px 4px 0px;
  }
  &--left {
    border-left: $page-item-border;
    border-radius: 4px 0px 0px 4px;
  }
}

.page-viewer {
  @include menu-base();
  &__page-item {
    @extend %page-theme;
    cursor: pointer;
    &--active {
      cursor: default;
      border-width: 2px;
      background-color: $light-gray;
      font-weight: bold;
      a {
        margin: 0;
        padding: 0;
        width: 100%;
        outline: none;
        text-align: center;
        color: $dark-gray;
      }
    }
    a {
      outline: none;
      padding: 0;
      display: flex;
      height: 100%;
      width: 100%;
      justify-content: center;
      align-items: center;
    }
  }
}