@import '../../style/themes/index.less';

@rich-text-box-prefix-cls: ~'@{pxx-prefix}-rich-text-box';

.@{rich-text-box-prefix-cls} {
  flex: 0 auto;
  margin: 16px;
  overflow: auto;

  &__wrapper {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    border: 1px solid rgba(26, 43, 78, 0.24);
    border-radius: 6px;
    border-top: none;
    max-height: 240px;
    overflow: hidden;

    .scrollbar(6px);

    &&--show-count:after {
      float: right;
      color: rgba(0, 0, 0, 0.451);
      white-space: nowrap;
      content: attr(data-count);
      pointer-events: none;
    }

    &&--disabled {
      border: none;
      background-color: rgba(26, 43, 78, 0.04);
      border-radius: 8px;

      .@{rich-text-box-prefix-cls} {
        &__tool-bar {
          display: none;
        }
      }
    }
  }

  &__tool-bar {
    position: relative;
    display: flex;
    align-items: center;
    padding: 16px;
    background-color: #fff;
    border-radius: 6px 6px 0 0;
    border-top: 1px solid rgba(26, 43, 78, 0.24);
    border-bottom: 1px solid rgba(26, 43, 78, 0.16);

    >*+* {
      margin-left: 14px;
    }
  }

  &__button {
    cursor: pointer;
    color: rgba(26, 43, 78, 0.40);

    &:hover {
      color: rgba(26, 43, 78, 0.60);
    }

    &&--active {
      color: rgb(26, 43, 78);
    }

    &&--disabled {
      cursor: not-allowed;
    }

    .@{iconfont-css-prefix} {
      font-size: 18px;
    }
  }
}
