@use 'element-plus/theme-chalk/src/common/var.scss' as *;
@use 'element-plus/theme-chalk/src/mixins/config.scss' as *;
@use 'element-plus/theme-chalk/src/mixins/mixins.scss' as *;

$font-color: '#656e82';
$hover-bg-color: '#e1e3e6';
$hover-color: getCssVar('color', 'primary');

@include b(editor) {
  position: relative;
  min-height: 32px;
  caret-color: #{$hover-color};

  $wrapper: #{&}-wrapper;

  &--border {
    transition: getCssVar('transition-box-shadow');
    transform: translate3d(0, 0, 0);
    border-radius: getCssVar('border-radius-base');
    box-shadow: 0 0 0 1px
      var(#{getCssVarName('input-border-color')}, #{getCssVar('border-color')})
      inset;
    // hover
    &:hover {
      box-shadow: 0 0 0 1px
        var(
          #{getCssVarName('input-border-color')},
          #{getCssVar('border-color-hover')}
        )
        inset;
    }
    // focus
    &:has(#{$wrapper} > div:focus) {
      box-shadow: 0 0 0 1px
        var(
          #{getCssVarName('input-border-color')},
          #{getCssVar('color-primary')}
        )
        inset;
    }
  }

  &--resize {
    resize: vertical;
    overflow: auto;
  }

  &--disabled {
    background-color: getCssVar('disabled-bg-color');
    cursor: not-allowed;
    color: getCssVar('disabled-text-color');
  }

  &-wrapper {
    height: 100%;
    font-size: getCssVar('font-size', 'base');
    & > div {
      padding: 4px 10px;
      line-height: 24px;
      color: getCssVar('text-color-regular');
      &:focus-visible {
        outline: 0;
      }
      overflow: auto;
    }
    p {
      margin: 0;
    }
  }
  &__count {
    position: absolute;
    right: 6px;
    bottom: 7px;
    font-size: 12px;
    color: getCssVar('color-info');
    background: getCssVar('fill-color', 'blank');
  }
}

@include b(editor-mention) {
  &-wrap {
    height: 166px !important;
  }
  &-list {
    list-style: none;
    margin: 0;
    padding: 0;
    li {
      width: 148px;
      height: 30px;
      display: flex;
      align-items: center;
      color: #3d3d3d;
      font-size: 14px;
      border-radius: 4px;
      padding: 0 4px;
      margin-bottom: 4px;
      cursor: pointer;
      &.active {
        background: #e6edfe;
      }
    }
  }
  &-image {
    flex: none;
    img {
      width: 24px;
      height: 24px;
      margin-right: 4px;
      border-radius: 50%;
    }
  }
  &-text {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-left: 4px;
  }
}

@include b(editor-popup) {
  padding: 4px !important;
  border-radius: 6px;
}

@include b(editor-toolbar) {
  display: flex;
  flex-wrap: wrap;
  margin: 6px;
  &__divider {
    align-self: center;
  }
}

@include b(editor-heading) {
  .#{$namespace}-dropdown {
    height: 100%;
  }

  &--title {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  &__item1,
  &__item2,
  &__item3,
  &__item4,
  &__item5,
  &__item6 {
    padding: 4px !important;
    &:hover,
    &:focus {
      background-color: transparent !important;
    }
  }
  &__item1 {
    font-size: 30px;
    line-height: 36px;
    font-weight: 800;
  }
  &__item2 {
    font-size: 20px;
    line-height: 28px;
    font-weight: 700;
  }
  &__item3 {
    font-size: 18px;
    line-height: 28px;
    font-weight: 600;
  }
  &__item4 {
    font-size: 16px;
    line-height: 28px;
    font-weight: 600;
  }
  &__item5 {
    font-size: 14px;
    line-height: 28px;
    font-weight: 400;
  }
  &__item6 {
    font-size: 14px;
    line-height: 28px;
    font-weight: 400;
  }

  &__trigger {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #{$font-color};
    font-size: 16px;
    cursor: pointer;
    margin-right: 5px;
    border-radius: 4px;
    padding: 0 8px;
    &.active,
    &:hover {
      color: #{$hover-color};
      background-color: #{$hover-bg-color};
    }
  }
  &__item {
    width: 200px;
    display: flex;
    align-items: center;
    padding: 6px 8px;
    border-radius: 4px;
    &:hover,
    &.active {
      background-color: getCssVar('dropdown-menuItem-hover-fill');
    }
  }
}

@include b(editor-fontsize) {
  .#{$namespace}-dropdown {
    height: 100%;
  }

  &--title {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  &__item-small,
  &__item-middel,
  &__item-large {
    padding: 4px !important;
    &:hover,
    &:focus {
      background-color: transparent !important;
    }
  }

  &__trigger {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #{$font-color};
    font-size: 16px;
    cursor: pointer;
    margin-right: 5px;
    border-radius: 4px;
    padding: 0 8px;
    &.active,
    &:hover {
      color: #{$hover-color};
      background-color: #{$hover-bg-color};
    }
  }
  &__item {
    width: 110px;
    display: flex;
    align-items: center;
    padding: 6px 8px;
    border-radius: 4px;
    &:hover,
    &.active {
      color: #{$hover-color};
      background-color: getCssVar('dropdown-menuItem-hover-fill');
    }
  }
}

@include b(editor-icon) {
  padding: 6px;
  display: inline-flex;
  justify-items: center;
  align-items: center;
  cursor: pointer;
  border-radius: 4px;
  margin-right: 5px;
  i {
    color: #{$font-color};
  }
  &.active,
  &:hover {
    background-color: #{$hover-bg-color};
    i {
      color: #{$hover-color};
    }
  }
}

.tiptap-mention {
  padding-right: 4px;
}

.tiptap-placeholder:first-child::before {
  color: getCssVar('text-color-placeholder');
  content: attr(data-placeholder);
  float: left;
  height: 0;
  pointer-events: none;
}

.tiptap-extension-tag {
  display: inline-block;
  // padding-right: 6px;
}