src/components/DocumentControls/DocumentControls.scss
@import '../../constants/styles';

.documentControls {
  display: flex;
  flex-direction: column;

  .divider {
    height: 1px;
    background: var(--divider);
    margin: 16px 0px 8px 0px;
  }

  .documentControlsInput {
    display: flex;
    flex-direction: row;
    padding-bottom: 16px;
    padding-top: 8px;

    @include mobile {
      padding-bottom: 0px;
    }

    &.customizableUI {
      padding: 8px 0px;
    }

    .pagesInput {
      width: 100%;
      height: 30px;
      border: 1px solid var(--border);
      border-radius: 4px;
      color: var(--text-color);

      padding-top: 4px;
      padding-bottom: 4px;
      padding-inline-start: 8px;
      padding-inline-end: 8px;

      @include mobile {
        font-size: 13px;
      }

      &:focus {
        outline: none;
        border: 1px solid var(--focus-border);
      }

      &::placeholder {
        color: var(--placeholder-text);
      }
    }

    .documentControlsButton {
      display: flex;
      flex-direction: row;
      padding-inline-start: 2px;

      .Button {
        height: 30px;
        padding: 0px;
        width: 30px;
        margin: 0px 4px;

        .Icon {
          height: 24px;
          width: 24px;
          color: var(--icon-color);
        }

        &:hover {
          background: var(--view-header-button-hover);
          border-radius: 4px;
        }
      }
    }
  }

  // This label only appears in the Modular UI
  .documentControlsLabel {
    margin-top: 16px;

    @include mobile {
      margin-top: 8px;
      font-size: 13px;
    }

    .multiSelectExampleLabel {
      color: var(--faded-text);
      margin-inline-start: 2px;
    }
  }
}
