@import "../../style/themes/default";
@import "../../style/mixins/index";
@import '../../input/style/mixin';

@mention-prefix-cls: ~"@{c7n-prefix}-mention";

.@{mention-prefix-cls} {
  &-wrapper {
    .reset-component;
    position: relative;
    display: inline-block;
    width: 100%;
    vertical-align: middle;
  }

  &-editor {
    .input;
    min-height: @input-height-base;
    height: auto; // To override height in .input mixin
    line-height: @line-height-base;
    padding: 0;
    display: block;
    &-wrapper {
      overflow-y: auto;
      height: auto;
    }
  }
  &-active:not(.disabled) .@{mention-prefix-cls}-editor {
    .active;
  }
  &-wrapper.disabled .@{mention-prefix-cls}-editor {
    .disabled();
  }

  &-dropdown {
    .reset-component;
    margin-top: 1.5em;
    max-height: 2.5rem;
    min-width: 1.2rem;
    background-color: @component-background;
    box-shadow: @box-shadow-base;
    border-radius: @border-radius-base;
    z-index: @zindex-dropdown;
    left: -99.99rem;
    top: -99.99rem;
    position: absolute;
    outline: none;
    overflow-x: hidden;
    overflow-y: auto;

    &-placement-top {
      margin-top: -0.1em;
    }

    &-notfound&-item {
      color: @disabled-color;

      .@{iconfont-css-prefix}-loading {
        color: @primary-color;
        text-align: center;
        display: block;
      }
    }
    &-item {
      position: relative;
      display: block;
      padding: .05rem @control-padding-horizontal;
      line-height: .22rem;
      font-weight: normal;
      color: @text-color;
      white-space: nowrap;
      cursor: pointer;
      text-overflow: ellipsis;
      overflow: hidden;
      transition: background 0.3s;

      &:hover {
        background-color: @item-hover-bg;
      }

      &.focus,
      &-active {
        background-color: @item-active-bg;
      }

      &-disabled {
        color: @disabled-color;
        cursor: not-allowed;

        &:hover {
          color: @disabled-color;
          background-color: @component-background;
          cursor: not-allowed;
        }
      }

      &-selected {
        &,
        &:hover {
          background-color: @background-color-base;
          font-weight: bold;
          color: @text-color;
        }
      }

      &-divider {
        height: .01rem;
        margin: .01rem 0;
        overflow: hidden;
        background-color: @border-color-split;
        line-height: 0;
      }
    }
  }

  .public-DraftEditorPlaceholder-root {
    position: absolute;
    pointer-events: none;
    .public-DraftEditorPlaceholder-inner {
      color: @input-placeholder-color;
      opacity: 1;
      outline: none;
      white-space: pre-wrap;
      word-wrap: break-word;
      height: auto;
      padding: .05rem @control-padding-horizontal - .01rem;
    }
  }
  .DraftEditor-editorContainer .public-DraftEditor-content {
    height: auto;
    padding: .05rem @control-padding-horizontal - .01rem;
  }
}