src/components/ModularComponents/PageControls/PageControls.scss
@import '../../../constants/styles';
@import '../../../constants/overlay';

.PageControlsWrapper {
  display: flex;
  gap: 8px;
  flex-direction: row;
  justify-content: flex-start;
  flex-grow: 0;

  .total-page {
    margin: auto;
  }

  .paddingTop {
    padding-top: 4px;
  }

  .paddingLeft {
    padding-inline-start: 4px;
  }

  form {
    height: 100%;
  }

  form input {
    height: 100%;
    text-align: center;
    font-family: Lato, sans-serif;
    font-weight: 700;
    background: var(--gray-0);
    cursor: pointer;
    outline: none;
    border-radius: 3px;
    min-width: 32px;

    &:focus-within {
      outline: var(--focus-visible-outline) !important;
    }
  }
}

.page-nav-display {
  &:hover {
    form input:not(:focus) {
      color: var(--gray-0);
    }
  }

  .flyout-item-label {
    text-transform: none;
    display: flex;
    height: 25px;
    align-items: baseline;
    padding: 0 10px;

    input {
      margin: 0px 6px;
    }
  }
}

.page-controls-input-form {
  input {
    font-size: 13px !important;
    width: 17px;
    font-family: Lato, sans-serif;
    cursor: pointer;
    outline: none;
    padding: 0;
    text-align: center;
    background: transparent;
    min-width: 26px;
    min-height: 26px;
    font-weight: 700;
    border-bottom: 1px solid var(--icon-color);
    border-radius: 3px;

    &:focus {
      background: var(--gray-0);
      border: 1px solid var(--border);
    }
  }
}
