smart-text-area {
  --smart-outline: var(--smart-primary);
  display: inline-block;
  width: var(--smart-text-box-default-width);
  overflow: visible;
  background: var(--smart-background);
  border: 1px solid var(--smart-border);
  border-top-left-radius: var(--smart-border-top-left-radius);
  border-top-right-radius: var(--smart-border-top-right-radius);
  border-bottom-left-radius: var(--smart-border-bottom-left-radius);
  border-bottom-right-radius: var(--smart-border-bottom-right-radius);
  height: calc(1.5 * var(--smart-text-box-default-height));

  textarea {
    margin: 0;
    resize: none;

    &.smart-input {
      border: none;
      text-overflow: ellipsis;
    }
  }
}

.smart-text-area {
  .smart-container {
    width: 100%;
    height: 100%;
    color: inherit;
    font-family: inherit;
    position: relative;
    overflow: visible;
  }

  textarea {
    &.smart-input {
      border-width: var(--smart-border-width);
      font-family: var(--smart-font-family);
      font-size: var(--smart-font-size);
      background: var(--smart-background);
      border-color: var(--smart-border);
      color: var(--smart-background-color);
      border-top-left-radius: var(--smart-border-top-left-radius);
      border-top-right-radius: var(--smart-border-top-right-radius);
      border-bottom-left-radius: var(--smart-border-bottom-left-radius);
      border-bottom-right-radius: var(--smart-border-bottom-right-radius);
      padding-left: var(--smart-editor-label-padding);
      padding-right: var(--smart-editor-label-padding);
      padding-top: 0px;
      padding-bottom: 0px;
      padding: var(--smart-editor-label-padding);
      outline: none;
      text-align: var(--smart-text-box-text-align);
      box-sizing: border-box;
      border: none;
      height: 100%;
      width: 100%;
    }
  }
}

.smart-text-area-mention-menu {
  padding: 2px;
  margin: var(--smart-list-item-vertical-offset) var(--smart-list-item-horizontal-offset);
  color: var(--smart-background-color);
  background-color: var(--smart-background);
  border: 1px solid var(--smart-border);
  border-top-left-radius: var(--smart-border-top-left-radius);
  border-top-right-radius: var(--smart-border-top-right-radius);
  border-bottom-left-radius: var(--smart-border-bottom-left-radius);
  border-bottom-right-radius: var(--smart-border-bottom-right-radius);
  box-shadow: var(--smart-elevation-8);
  font-size: var(--smart-font-size);
  font-family: var(--smart-font-family);
  position: absolute;
  z-index: 999999;

  .smart-text-area-mention-menu-item {
    padding: 5px;

    &:hover,
    &.selected {
      cursor: pointer;
      color: var(--smart-ui-state-color-hover);
      background: var(--smart-ui-state-hover);
    }
  }
}

.smart-mention-trigger {
  font-size: 12px;
  opacity: 0.8;
}

.smart-rich-textarea {
  position: absolute;
  top: 0px;
  height: 100%;
  width: 100%;
  background: var(--smart-background);
}

.smart-rich-textarea .smart-container[toolbar-on-focus] {
  display: block;
}

.smart-editor-toolbar-float.show {
  opacity: 1;
}

.smart-editor-toolbar-float {
  display: flex;
  background: var(--smart-surface);
  width: auto;
  position: absolute;
  border: 1px solid var(--smart-border);
  border-radius: var(--smart-border-radius);
  height: auto;
  min-height: 0px;
  padding: 0;
  box-shadow: var(--smart-elevation-4);
  z-index: 999;
  margin-top: 3px;
  opacity: 0;
  transition: opacity ease-in-out 0.2s;
}

.smart-rich-textarea ul,
.smart-rich-textarea ol {
  padding-inline-start: 1em;
  margin-top: 0px;
}

.smart-rich-textarea ul[checklist] {
  position: relative;
  left: -10px;
}

.smart-rich-textarea a.ctrl {
  cursor: pointer;
}

.smart-rich-textarea .smart-editor-editable {
  padding: 10px 5px !important;
}

.smart-editor-toolbar-item-center {
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto !important;
  min-width: 24px;
}

.smart-editor-tooltip {
  font-family: var(--smart-font-family);
  position: absolute;
  cursor: default;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease-in-out;
  z-index: 999999;

  &.open {
    visibility: visible;
    opacity: 0.9
  }

  &::before {
    content: attr(hover-tooltip);
    font-size: 13px;
    text-align: center;
    position: absolute;
    display: block;
    left: 50%;
    min-width: 50px;
    max-width: 150px;
    bottom: calc(100% + 10px);
    transform: translate(-50%);
    animation: fade-in 300ms ease;
    background: rgba(39, 39, 39, 1);
    border-radius: 4px;
    padding: 6px;
    color: #ffffff;
    z-index: 1;
  }

  &[tooltip-position="bottom"] {
    &::before {
      bottom: auto;
      top: calc(100% + 10px);
    }

  }
}