src/components/Panel/Panel.scss
@import '../../constants/styles';
@import '../../constants/panel';

.ModularPanel {
  z-index: 65;
  background-color: var(--panel-background);
  display: flex;
  position: fixed;
  overflow: hidden;
  transition: transform 0.3s ease-in-out;
  max-width: calc(100% - 16px);

  h1 {
    margin: 0;
  }

  @include mobile {
    max-width: 100%;
  }

  @include panel-height-fix;

  @include tablet {
    border-inline-end: 1px solid var(--side-panel-border);
  }

  @include mobile {
    position: fixed;
    inset-block-start: 0;
    inset-inline-start: 0;
    height: 100%;
    width: 100%;
    z-index: 95;
  }

  .ModularPanel-container {
    display: flex;
    flex-direction: column;
    padding: 16px;
    overflow-y: auto;

    &.searchPanel {
      padding: 0px;
      overflow-x: hidden;

      .SearchPanel {
        padding: 16px 16px 0px 16px;

        .SearchOverlay {
          padding-inline-end: 16px;
        }

        .results .ReactVirtualized__List {
          padding-inline-end: 16px;
        }
      }
    }

    &.notesPanel {
      padding: 0px;

      .notes-panel-container {
        position: static;
        height: 100%;

        .NotesPanel {
          width: 100%;

          [data-element='notesPanelHeader'] {
            padding-inline-end: 16px;
          }

          .virtualized-notes-container,
          .normal-notes-container {
            padding-inline-end: 16px;
          }
        }
      }
    }

    &.formFieldPanel {
      padding: 0px;

      .FormFieldPanel {
        width: 100%;
      }
    }

    &.textEditingPanel {
      padding: 0px;
      overflow-y: unset;

      .text-editing-panel-heading {
        font-size: 14px;
      }
    }

    &.comparePanel {
      padding: 0px;
      overflow-y: unset;
    }

    .PortfolioPanel {
      overflow: auto;
      -webkit-overflow-scrolling: touch;
      flex: 1;
      flex-direction: column;
      padding: 0;
    }

    .documentControls {
      margin-top: 16px;
      border-top: 1.5px solid var(--border);

      .divider {
        display: none;
      }
    }

    .documentControlsInput {

      input,
      .documentControlsButton {
        height: 32px;
      }
    }

    .documentControlsInput,
    .bookmark-outline-footer {
      padding: 12px 0 20px 0;
    }

    ////////////////////////////////

    @include mobile {
      padding-top: 0px;
      width: 100%;
      min-width: 100%;

      .close-container {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        height: 64px;
        min-height: 64px;
        width: 100%;
        padding-inline-end: 5px;
        inset-block-start: 0;

        .close-icon-container {
          cursor: pointer;

          .close-icon {
            width: 24px;
            height: 24px;
          }
        }
      }
    }
  }

  &.right {
    inset-inline-end: 0;

    &.right-to-left {
      flex-direction: row-reverse;
      inset-inline-end: auto;
    }
  }

  &.left {
    inset-inline-start: 0;

    &.right-to-left {
      flex-direction: row-reverse;
      inset-inline-end: 0;
      inset-inline-start: auto;
    }
  }

  &:not(:has(.resize-bar)) {
    &.right {
      border-inline-start: 1px solid var(--side-panel-border);
    }

    &.left {
      border-inline-end: 1px solid var(--side-panel-border);
    }
  }

  &.closed {
    display: none;
  }

  &.right.closed {
    transform: translateX(100%);
    inset-inline-start: auto;
  }

  &.left.closed {
    transform: translateX(-100%);
  }

  // Specific styles for a variety of modular UI panels
  &.modular-ui-panel {
    @include tablet-and-desktop {
      &.tools-header-open {
        height: calc(100% - 96px); // minus the height of both headers;

        &.logo-bar-enabled {
          height: calc(100% - 66px - $logo-bar-height);
        }
      }
    }

    background-color: var(--gray-0);

    .resize-bar {
      border-color: var(--lighter-border);
    }

    button.Dropdown {
      border-color: var(--border);

      &:disabled {
        border-color: var(--lighter-border);

        .Icon {
          color: var(--lighter-border);
        }
      }
    }

    .bookmark-outline-footer {
      border-top: 1px solid var(--lighter-border);
    }

    .msg.msg-no-bookmark-outline {
      color: var(--gray-7);
    }

    &.ModularPanel {
      .ModularPanel-container {
        .documentControls {
          border-color: var(--lighter-border);

          .documentControlsButton button,
          .PageControlContainer button {
            &:hover {
              @extend %icon-button-hover;
            }
          }

          .PageControlContainer {
            margin-top: 16px;
          }
        }

        .thumbnail-slider-container {
          width: 100%;
          margin-bottom: 16px;

          .slider-element-container {
            margin: 0;
          }

          Button {
            width: 24px;
            height: 24px;
            padding: 4px;
            margin: 4px;

            .Icon {
              width: 16px;
              height: auto;
            }

            &:hover:not(.active) {
              @extend %icon-button-hover;
            }
          }
        }
      }

      .Thumbnail.selected .container canvas {
        background-color: rgba(43, 115, 171, 0.1);
      }

      .Thumbnail.active {
        .container .page-image {
          border: 1px solid var(--focus-border);
        }

        .thumbnailControls-overlay.modular-ui {
          padding-inline-start: 2px;

          .Button {
            &:hover:not(.active) {
              @extend %icon-button-hover;
            }

            &.active {
              @extend %icon-button-active;
            }
          }
        }
      }
    }

    .OutlinesPanel,
    .BookmarksPanel {
      padding: 0;

      .bookmark-outline-footer .multi-selection-button {
        &:hover:not(.disabled) {
          @extend %icon-button-hover;
        }
      }
    }
  }
}