@import '../../styles/common/colors';

.editor-component {
  position: relative;
  border: 2px solid $neutral-1;
  border-radius: 3px;
  padding: 10px;
  position: relative;

  &.editor-disabled {
    .overlay {
      display: block;
    }
  }

  .overlay {
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba($neutral-3, 0.6);
    cursor: not-allowed;
  }

  $list-item-color: #444444;
  $list-item-hover-color: #0066CC;
  $dropdown-color: #CCCCCC;
  .merge-tags {
    div[class*='ql-picker'] {
      width: 112px;
      span[class*='ql-picker-label'] {
        display: flex;
        align-items: center;
        border: 1px solid transparent;
      }
      &[class*='is-opened'] span[class*='ql-picker-label'] {
        color: $dropdown-color;
        border: 1px solid $neutral-3;
        border-radius: 3px 3px 0 0;
        [class^='ql-stroke'] {
          stroke: $dropdown-color;
        }
      }
    }
    div[class*='dropdown-wrapper'] {
      padding: 4px 8px;
      border: 1px solid $neutral-3;
      border-radius: 0 0 3px 3px;
      box-shadow: none;
      margin-top: -1px;
      ul {
        min-width: 94px;
      }
      li {
        padding: 5px 0;
        min-height: 0;
        color: $list-item-color;
        font-size: 14px;
        font-weight: 500;
        &:hover {
          color: $list-item-hover-color;
          background-color: transparent;
        }
      }
    }
  }
}