.q-pagination {
  --pgn-color-base: var(--color-primary-blue);
  --pgn-color-hover: var(--color-primary-black);
  --pgn-color-selected: var(--color-primary-black);
  --pgn-color-disabled: rgb(var(--color-rgb-gray) / 64%);
  --pgn-background-color-base: var(--color-tertiary-gray-light);
  --pgn-background-color-hover: var(--color-tertiary-gray);
  --pgn-background-color-selected: var(--color-tertiary-gray-ultra-light);
  --pgn-background-color-disabled: var(--color-tertiary-gray);
  --pgn-box-shadow-primary: -1px -1px 4px var(--color-tertiary-white),
    1px 1px 4px rgb(var(--color-rgb-blue) / 40%),
    4px 4px 8px rgb(var(--color-rgb-blue) / 40%),
    -4px -4px 8px rgb(var(--color-rgb-white) / 25%);
  --pgn-box-shadow-secondary: -1px -1px 3px rgb(var(--color-rgb-white) / 25%),
    1px 1px 3px rgb(var(--color-rgb-blue) / 40%);

  display: inline-grid;
  grid-gap: 8px;
  margin-top: 24px;
  white-space: nowrap;

  &__btn {
    box-sizing: border-box;
    grid-row: 1;
    min-width: 40px;
    height: 40px;
    padding: 0;
    margin: 0;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-base);
    line-height: 40px;
    color: var(--pgn-color-base);
    text-align: center;
    vertical-align: top;
    cursor: pointer;
    background-color: var(--pgn-background-color-base);
    border: none;
    border-radius: var(--border-radius-base);
    box-shadow: var(--pgn-box-shadow-primary);

    &:hover,
    &:focus {
      color: var(--pgn-color-hover);
      background-color: var(--pgn-background-color-hover);
      outline: none;
    }

    &_quick {
      font-size: 24px;

      &::before {
        line-height: 40px;
      }

      .q-pagination_disabled &,
      &:not(:focus):not(:hover) {
        &::before {
          font-size: var(--font-size-base);
          content: '...';
        }
      }
    }

    &_icon {
      font-size: 24px;
    }

    &_active:not(:hover),
    &_active:not(:focus) {
      color: var(--pgn-color-selected);
      cursor: default;
      background-color: var(--pgn-background-color-selected);
      box-shadow: var(--pgn-box-shadow-secondary);
    }

    &.q-pagination__btn_disabled,
    .q-pagination_disabled & {
      color: var(--pgn-color-disabled);
      cursor: not-allowed;
      background-color: var(--pgn-background-color-disabled);
      box-shadow: var(--pgn-box-shadow-secondary);
    }
  }
}
