react-email-builder/src/lexical/plugins/ToolbarPlugin/index.less

A simple React drag and drop email builder.

.REB-ToolbarPlugin {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  height: 36px;
  padding: 0 10px;
  gap: 2px;
  overflow: auto;

  &-icon,
  &-dropdown {
    height: 28px;
    min-width: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 4px;
    color: #000;
    flex-grow: 0;
    flex-shrink: 0;

    &:hover {
      background: var(--reb-control-hover-color);
    }

    .REB-Icon {
      display: block;
    }
  }

  &-active {
    color: rgb(49, 10, 245);
    background: rgba(0, 0, 0, 0.03);
  }

  &-dropdown {
    padding: 0 6px;
    gap: 2px;
  }

  &-open {
    background: var(--reb-control-active-color);
  }

  &-input {
    min-width: 300px;
    padding: 20px;
    box-sizing: border-box;
  }

  &-label {
    display: flex;
    margin-bottom: 4px;

    > span {
      flex-grow: 1;
    }

    > div {
      flex-grow: 0;
      flex-shrink: 0;
      color: var(--reb-link-color);

      &:hover {
        opacity: 0.8;
      }
    }
  }

  &-options {
    max-height: 320px;
    overflow: auto;
    padding: 4px 0;
  }

  &-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 20px;
    cursor: pointer;

    &:hover {
      background: #f5f5f5;
    }
  }

  &-option-text {
    max-width: calc(100vw - 40px);
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  &-selected {
    background: #eee;
    font-weight: bold;
  }
}