src/components/OutlinesPanel/OutlinesPanel.scss
@import '../../constants/panel';

.OutlinesPanel {
  @include mobile {
    margin: 16px;
    padding: 0px;
    overflow-y: auto;
  }

  .bookmark-outline-single-container {
    &:not(.editing) {
      height: fit-content;
    }
  }

  .bookmark-outline-row {
    padding-top: 6px;
  }

  .msg-no-bookmark-outline {
    margin-top: 6px;
  }

  .spinner {
    align-self: center;
  }

  .small-outlines-list {
    height: calc(100% - 154px) !important; // 154px is the height of the add outline content
  }

  &.modular-ui-panel {
    .bookmark-outline-single-container {
      .panel-list-label-header {
        .Button {
          width: fit-content;
          height: 100%;
          padding: 0px 8px 0px 8px;
          justify-content: start;

          &:hover {
            cursor: pointer;
            border: none;
            border-radius: 4px;
            box-shadow: inset 0 0 0 1px var(--blue-6);
            color: var(--blue-6);
            background-color: var(--faded-component-background);
          }

          &:focus {
            border-radius: 4px;
            box-shadow: inset 0 0 0 1px var(--blue-6);
            color: var(--blue-6);
            background-color: var(--faded-component-background);
          }
        }
      }

      .bookmark-outline-more-button.active {
        display: flex;

        .Icon {
          color: var(--blue-5);
        }
      }

      &.default:hover:not(.selected),
      &.default.hover:not(.selected) {
        background: none;
      }

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

      .bookmark-outline-input {
        @include mobile {
          font-size: 13px;
        }
      }

      .bookmark-outline-input:active {
        border-color: var(--focus-border);
      }
    }
  }

  .bookmark-outline-control-button,
  .bookmark-outline-save-button,
  .bookmark-outline-cancel-button {
    @include mobile {
      font-size: 13px;
    }
  }
}

.Panel.OutlinesPanel {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  flex: 1;
  flex-direction: column;
}
