src/components/RichTextPopup/RichTextPopup.scss
@import '../../constants/styles.scss';
@import '../../constants/popup';

.RichTextPopup {
  @extend %popup;
  overflow: visible;
  flex-direction: column;
  background: var(--component-background);
  border-radius: 4px;
  box-shadow: 0 0 3px 0 var(--document-box-shadow);
  width: 220px;
  padding: 6px 12px;
  align-items: flex-start;

  #FontSizeDropdown.Dropdown__wrapper {
    width: 80px;

    .Dropdown {
      width: 80px !important;
    }

    .Dropdown__items {
      width: 80px !important;
    }
  }

  &.legacy {
    padding: 0;
    width: auto;
    align-items: center;

    .ColorPalette.padding {
      padding: 4px 12px 8px;
    }

    .colorPicker {
      padding: 0px 12px 8px;
    }
  }

  .rich-text-format-legacy {
    display: flex;
    width: 100%;
    justify-content: center;
  }

  .ColorPalette.padding {
    padding: 0;
  }

  .menu-items {
    width: 100%;
    padding: 6px 4px;
  }

  .collapsible-menu {
    width: 100%;
    display: flex;
    cursor: pointer;
    align-items: center;
    justify-content: space-between;

    .menu-title {
      padding-inline-start: 4px;
      padding-top: 6px;
      padding-bottom: 6px;
      font-weight: bold;
      font-size: 14px;
    }

    .Icon {
      height: 18px;
      width: 18px;
    }
  }

  .divider {
    background-color: var(--divider);
    width: 100%;
    height: 1px;
    margin: 6px 0;
  }
}
