smart-webcomponents/source/styles/default/smart.editor.css

Web Components & Custom Elements for Professional Web Applications

/* .smart-editor */
/* --- Scheduler Style Color Input --- */
.smart-editor .smart-editor-content-container .smart-editor-editable, .smart-editor .smart-editor-content-container textarea {
  width: 100%;
  height: 100%;
  outline: none;
  padding: var(--smart-editor-padding);
  background: transparent;
}

.smart-editor-toolbar-item[item-type=delimiter], .smart-editor-toolbar-item[item-type=drop-down], .smart-editor-toolbar-item[item-type=color-input], .smart-editor-toolbar-item[item-type=button], .smart-editor-toolbar-item[item-type=toggle] {
  position: relative;
  height: var(--smart-editor-toolbar-item-height);
  outline: none;
}

.smart-editor-toolbar-item[item-type=delimiter]::before, .smart-editor-toolbar-item[item-name=alignment]::before, .smart-editor-toolbar-item[item-name=clearformat]::after, .smart-editor-toolbar-item:not([item-type=drop-down])::before, .smart-editor-toolbar-item[item-type=color-input] .smart-editor-item-drop-down-button::before, .smart-editor-toolbar-item[item-type=drop-down]:after {
  font-size: var(--smart-font-size);
  font-family: var(--smart-font-family-icon);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: var(--smart-editor-addon-width);
  height: 100%;
  box-sizing: border-box;
  pointer-events: none;
}

.smart-editor-toolbar-item[item-type=color-input] .smart-editor-item-drop-down-button::before, .smart-editor-toolbar-item[item-type=drop-down]:after {
  content: var(--smart-icon-arrow-down);
  width: var(--smart-editor-addon-width);
  min-width: var(--smart-editor-addon-width);
}

.smart-editor-toolbar-item[item-type=drop-down]:before {
  font-size: var(--smart-font-size);
  font-family: var(--smart-font-family-icon);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  content: attr(item-value);
  width: calc(100% - 30px);
  padding: var(--smart-editor-label-padding);
  padding-top: initial;
  padding-right: initial;
  padding-bottom: initial;
  text-align: center;
}

[disabled].smart-editor-toolbar-item {
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  opacity: 0.55;
  cursor: default;
  pointer-events: none;
}

.smart-editor {
  display: block;
  width: var(--smart-editor-default-width);
  height: var(--smart-editor-default-height);
  min-height: var(--smart-editor-input-min-height);
  border: var(--smart-border-width) solid var(--smart-border);
  border-radius: var(--smart-border-radius);
  contain: content;
}
.smart-editor.smart-editor-iframe-body {
  margin: initial;
  border: initial;
  min-height: initial;
  border-radius: initial;
  width: 100%;
  height: 100%;
}
.smart-editor.smart-editor-iframe-body table {
  font-size: var(--smart-font-size);
  font-weight: var(--smart-font-weight);
}
.smart-editor.smart-editor-iframe-body * {
  box-sizing: border-box;
}
.smart-editor > .smart-container {
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: auto minmax(0, 1fr);
  position: relative;
  min-height: inherit;
}
.smart-editor .smart-toast-container.smart-toast-container-custom {
  position: absolute;
  top: 0;
  right: 0;
  height: auto;
  max-height: 100%;
}
.smart-editor.full-screen-mode {
  min-width: 100%;
  max-width: 100%;
  min-height: 100%;
  max-height: 100%;
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  z-index: calc(var(--smart-editor-drop-down-z-index) - 1);
}
.smart-editor[readonly] .smart-editor-toolbar-items-primary,
.smart-editor[readonly] .smart-editor-toolbar-items-secondary {
  pointer-events: none;
}
.smart-editor[toolbar-mode=singleLineRibbon] .smart-editor-toolbar[toolbar-tab-selected]:not([expanded]) .smart-editor-toolbar-toggle-button::before {
  content: var(--smart-icon-window-pin);
}
.smart-editor[toolbar-mode=singleLineRibbon] .smart-editor-toolbar-tab-selection-bar {
  position: absolute;
  bottom: 0;
  height: calc(2 * var(--smart-border-width));
  background-color: var(--smart-primary);
  transform: scaleX(1);
}
.smart-editor[toolbar-mode=singleLineRibbon] .smart-editor-toolbar-tab-selection-bar.smart-visibility-hidden {
  transform: scaleX(0);
}
.smart-editor[toolbar-mode=singleLineRibbon] .smart-editor-toolbar-items-primary {
  position: relative;
}
.smart-editor[toolbar-mode=singleLineRibbon] .smart-editor-toolbar[expanded] .smart-editor-toolbar-items-primary,
.smart-editor[toolbar-mode=singleLineRibbon] .smart-editor-toolbar[expanded] .smart-editor-toolbar-toggle-button {
  border-bottom: var(--smart-border-width) solid var(--smart-border);
}
.smart-editor[toolbar-mode=singleLineRibbon] .smart-editor-toolbar:not(.smart-tooltip) .smart-editor-toolbar-items-secondary .smart-editor-toolbar-item {
  margin-left: initial;
}
.smart-editor[toolbar-mode=singleLineRibbon] .smart-editor-toolbar-items-secondary {
  background-color: var(--smart-background);
  padding-bottom: initial;
  flex-wrap: initial;
}
.smart-editor[toolbar-mode=singleLineRibbon] .smart-editor-toolbar-items-secondary.smart-drop-down {
  border-bottom: var(--smart-border-width) solid var(--smart-border);
  box-shadow: var(--smart-elevation-4);
  overflow: hidden;
}
.smart-editor[toolbar-mode=singleLineRibbon] .smart-editor-toolbar-items-secondary .smart-editor-toolbar-item {
  margin-bottom: var(--smart-editor-toolbar-item-margin);
}
.smart-editor[toolbar-mode=singleLineRibbon] .smart-editor-toolbar-items-secondary .smart-editor-toolbar-item:not(:last-of-type) {
  margin-right: var(--smart-editor-toolbar-item-margin);
}
.smart-editor[toolbar-mode=singleLineRibbon] .smart-editor-toolbar-tab {
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  padding: var(--smart-tab-item-padding);
}
.smart-editor[toolbar-mode=singleLineRibbon] .smart-editor-toolbar-tab:not([disabled]) {
  cursor: pointer;
}
.smart-editor[toolbar-mode=singleLineRibbon] .smart-editor-toolbar .smart-editor-toolbar-tab-group {
  padding-top: initial;
}
.smart-editor[toolbar-mode=singleLineRibbon] .smart-editor-toolbar-tab-group {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  height: 100%;
  padding: var(--smart-editor-toolbar-item-margin);
  padding-bottom: initial;
}
.smart-editor[toolbar-mode=singleLineRibbon] .smart-editor-toolbar-tab-group:not(:first-of-type) {
  border-left: var(--smart-border-width) solid var(--smart-border);
}
.smart-editor[toolbar-view-mode=multiRow] .smart-editor-toolbar, .smart-editor[toolbar-view-mode=scroll] .smart-editor-toolbar {
  grid-template-areas: "primary primary" "secondary secondary ";
}
.smart-editor[toolbar-view-mode=multiRow] .smart-editor-toolbar .smart-editor-toolbar-toggle-button, .smart-editor[toolbar-view-mode=scroll] .smart-editor-toolbar .smart-editor-toolbar-toggle-button {
  display: none;
}
.smart-editor[toolbar-view-mode=multiRow] .smart-editor-toolbar-items-primary, .smart-editor[toolbar-view-mode=scroll] .smart-editor-toolbar-items-primary {
  padding: 0 5px 5px 0;
}
.smart-editor[toolbar-view-mode=multiRow] .smart-editor-toolbar-items-primary .smart-editor-toolbar-item, .smart-editor[toolbar-view-mode=scroll] .smart-editor-toolbar-items-primary .smart-editor-toolbar-item {
  margin-bottom: initial;
}
.smart-editor[toolbar-view-mode=multiRow] > .smart-container {
  grid-template-rows: auto minmax(0, 1fr);
}
.smart-editor[toolbar-view-mode=multiRow] .smart-editor-toolbar .smart-editor-toolbar-items-primary {
  height: auto;
}
.smart-editor[toolbar-view-mode=scroll] > .smart-container {
  grid-template-rows: auto minmax(0, 1fr);
}
.smart-editor[toolbar-view-mode=scroll] .smart-editor-toolbar-items-primary {
  overflow-y: auto;
}
.smart-editor:not([animation=none]) .smart-editor-toolbar-tab-selection-bar {
  transition: width 0.2s cubic-bezier(0.35, 0, 0.25, 1), left 0.2s cubic-bezier(0.35, 0, 0.25, 1), visibility 0.2s cubic-bezier(0.35, 0, 0.25, 1), transform 0.2s cubic-bezier(0.35, 0, 0.25, 1);
}
.smart-editor:not([animation=none]) .smart-editor-search-bar, .smart-editor:not([animation=none])[toolbar-mode=singleLineRibbon] .smart-editor-toolbar-items-secondary {
  animation: smart-drop-down-list-smart-animate-opening 0.2s ease-out;
  transition: animation 0.2s ease-out, opacity 0.2s ease-out, visibility 0.2s ease-out;
  -webkit-transform-origin: top;
  transform-origin: top;
}
.smart-editor:not([animation=none]) .smart-editor-search-bar.smart-visibility-hidden, .smart-editor:not([animation=none])[toolbar-mode=singleLineRibbon] .smart-editor-toolbar-items-secondary.smart-visibility-hidden {
  animation: smart-drop-down-list-smart-animate-closing 0.2s ease-in;
  transition: animation 0.2s ease-in, opacity 0.2s ease-in, visibility 0.2s ease-in;
}
.smart-editor:not([animation=none]) .smart-editor-toolbar:not(.smart-tooltip),
.smart-editor:not([animation=none]) .smart-editor-content-container {
  transition: height 0.2s ease-in-out;
}
.smart-editor:not([animation=none]) .smart-editor-toolbar-item,
.smart-editor:not([animation=none]) .smart-editor-toolbar-toggle-button {
  transition: background-color 0.2ms linear, border-color 0.2ms ease-in-out, color 0.2ms linear, box-shadow 0.2s ease-in-out;
}
.smart-editor:not([animation=none]) .smart-editor-toolbar-toggle-button::before {
  transition: transform 0.2s ease-in-out;
}
.smart-editor[edit-mode=markdown] .smart-editor-toolbar-item[item-name=alignment], .smart-editor[edit-mode=markdown] .smart-editor-toolbar-item[item-name=indent], .smart-editor[edit-mode=markdown] .smart-editor-toolbar-item[item-name=outdent], .smart-editor[edit-mode=markdown] .smart-editor-toolbar-item[item-name=lowercase], .smart-editor[edit-mode=markdown] .smart-editor-toolbar-item[item-name=uppercase], .smart-editor[edit-mode=markdown] .smart-editor-toolbar-item[item-name=removelink] {
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  opacity: 0.55;
  cursor: default;
  pointer-events: none;
}
.smart-editor.preview-mode .smart-editor-toolbar-item:not([item-name=print]):not([item-name=sourcecode]):not([item-name=fullscreen]):not([item-name=splitmode]) {
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  opacity: 0.55;
  cursor: default;
  pointer-events: none;
}
.smart-editor[hide-toolbar] > .smart-container {
  grid-template-rows: minmax(auto, 1fr);
}
.smart-editor[hide-toolbar] .smart-editor-toolbar:not(.smart-tooltip) {
  display: none;
}
.smart-editor .smart-editor-toolbar:not(.smart-tooltip) {
  width: 100%;
  height: 100%;
  border-bottom: var(--smart-border-width) solid var(--smart-border);
  background: var(--smart-surface);
  display: grid;
  grid-template-areas: "primary toggleButton" "secondary secondary ";
  grid-template-columns: minmax(0, 1fr) auto;
  overflow: hidden;
  position: relative;
}
.smart-editor .smart-editor-toolbar:not(.smart-tooltip)[expanded] .smart-editor-toolbar-toggle-button::before {
  transform: rotate(180deg);
}
.smart-editor .smart-editor-toolbar:not(.smart-tooltip) .smart-editor-toolbar-item {
  margin-left: var(--smart-editor-toolbar-item-margin);
  margin-top: var(--smart-editor-toolbar-item-margin);
}
.smart-editor[toolbar-sticky] .smart-editor-toolbar {
  position: sticky;
  top: 0;
  z-index: calc(var(--smart-editor-drop-down-z-index) - 1);
}
.smart-editor[edit-mode=markdown] .smart-editor-toolbar-item[item-name=sourcecode]::before {
  content: var(--smart-icon-visibility);
}
.smart-editor .smart-editor-toolbar-toggle-button {
  grid-area: toggleButton;
  width: var(--smart-editor-toolbar-button-width);
  height: var(--smart-editor-toolbar-height);
  position: relative;
  cursor: pointer;
}
.smart-editor .smart-editor-toolbar-toggle-button::before {
  font-size: var(--smart-font-size);
  font-family: var(--smart-font-family-icon);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  box-sizing: border-box;
  pointer-events: none;
  content: var(--smart-icon-arrow-down);
  width: var(--smart-editor-addon-width);
  min-width: var(--smart-editor-addon-width);
}
.smart-editor .smart-editor-toolbar-items-primary {
  grid-area: primary;
  height: var(--smart-editor-toolbar-height);
  overflow: hidden;
}
.smart-editor .smart-editor-toolbar-items-primary .smart-editor-toolbar-item {
  margin-bottom: var(--smart-editor-toolbar-item-margin);
}
.smart-editor .smart-editor-toolbar-items-secondary {
  grid-area: secondary;
  padding-bottom: var(--smart-editor-toolbar-item-margin);
}
.smart-editor .smart-editor-toolbar-items-secondary:empty {
  display: none;
}
.smart-editor .smart-editor-toolbar-items-primary,
.smart-editor .smart-editor-toolbar-items-secondary {
  width: 100%;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.smart-editor iframe {
  width: 100%;
  height: 100%;
  min-height: var(--smart-editor-input-min-height);
  border: initial;
}
.smart-editor .smart-editor-content-container {
  display: grid;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  outline: none;
  background: transparent;
}
.smart-editor .smart-editor-content-container[split-mode] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--smart-border-width) minmax(0, 1fr);
  grid-template-rows: 100%;
  grid-column-gap: 2px;
}
.smart-editor .smart-editor-content-container[split-mode] .smart-editor-editable {
  order: 1;
}
.smart-editor .smart-editor-content-container[split-mode]::before {
  content: "";
  width: 100%;
  height: 100%;
  background-color: var(--smart-border);
  order: 2;
}
.smart-editor .smart-editor-content-container[split-mode] textarea {
  order: 3;
}
.smart-editor .smart-editor-content-container textarea {
  resize: none;
  outline: none;
  border: initial;
  min-height: var(--smart-editor-input-min-height);
  font-size: inherit;
  font-family: inherit;
  color: inherit;
}
.smart-editor .smart-editor-content-container .smart-editor-editable {
  min-height: var(--smart-editor-input-min-height);
  overflow: auto;
}
.smart-editor .smart-editor-content-container .smart-editor-editable[show-placeholder]::before {
  content: attr(placeholder);
  width: 100%;
  height: 100%;
  position: absolute;
  pointer-events: none;
  color: var(--smart-disabled-color);
  opacity: 0.9;
  font-family: inherit;
  font-size: inherit;
}
.smart-editor .smart-editor-content-container .smart-editor-editable p:first-child {
  margin-top: 0;
}
.smart-editor .smart-editor-content-container .smart-editor-editable p:last-child {
  margin-bottom: 0;
}
.smart-editor .smart-editor-content-container .smart-editor-editable ul[checklist] li {
  list-style: none;
}
.smart-editor .smart-editor-content-container .smart-editor-editable ul[checklist] li::before {
  border-radius: 3px;
  top: 3.5px;
  width: 12px;
  height: 12px;
  display: inline-block;
  content: "";
  margin-right: 5px;
  position: relative;
  border: 2px solid rgba(0, 0, 0, 0.25);
}
.smart-editor .smart-editor-content-container .smart-editor-editable ul[checklist] li[checked]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16' style='shape-rendering: geometricprecision;'%3E%3Cpath fill-rule='evenodd' fill='white' d='M5.944 12.305a1.031 1.031 0 0 0 1.433-.009l5.272-5.181A1.483 1.483 0 0 0 12.661 5a1.468 1.468 0 0 0-2.109.025L7.008 8.701a.465.465 0 0 1-.685-.01l-.587-.641A1.42 1.42 0 0 0 3.661 8a1.473 1.473 0 0 0 .017 2.106l2.266 2.199z'%3E%3C/path%3E%3C/svg%3E");
  background-color: var(--smart-primary);
  border: 2px solid transparent;
}
.smart-editor .smart-editor-content-container .smart-editor-editable a {
  display: inline-block;
}
.smart-editor .smart-editor-content-container .smart-editor-editable [alignment=left] {
  text-align: left;
}
.smart-editor .smart-editor-content-container .smart-editor-editable [alignment=center] {
  text-align: center;
}
.smart-editor .smart-editor-content-container .smart-editor-editable [alignment=right] {
  text-align: right;
}
.smart-editor .smart-editor-content-container .smart-editor-editable [alignment=justify] {
  text-align: justify;
}
.smart-editor .smart-editor-content-container .smart-editor-editable[table-cell-resize=horizontal] {
  cursor: col-resize;
}
.smart-editor .smart-editor-content-container .smart-editor-editable[table-cell-resize=horizontal] table {
  overflow: hidden;
}
.smart-editor .smart-editor-content-container .smart-editor-editable[table-cell-resize=horizontal] th[resizing],
.smart-editor .smart-editor-content-container .smart-editor-editable[table-cell-resize=horizontal] td[resizing] {
  position: relative;
}
.smart-editor .smart-editor-content-container .smart-editor-editable[table-cell-resize=horizontal] th[resizing]::after,
.smart-editor .smart-editor-content-container .smart-editor-editable[table-cell-resize=horizontal] td[resizing]::after {
  content: "";
  position: absolute;
  right: 0;
  display: flex;
  width: var(--smart-border-width);
  height: 100%;
  transform: scaleY(100);
  background-color: var(--smart-primary);
}
.smart-editor .smart-editor-content-container .smart-editor-editable[table-cell-resize=vertical] {
  cursor: row-resize;
}
.smart-editor .smart-editor-content-container .smart-editor-editable[table-cell-resize=vertical] tr[resizing] > th,
.smart-editor .smart-editor-content-container .smart-editor-editable[table-cell-resize=vertical] tr[resizing] > td {
  border-bottom-color: var(--smart-primary);
}
.smart-editor .smart-editor-content-container .smart-editor-editable[contenteditable=true] img {
  cursor: pointer;
}
.smart-editor .smart-editor-content-container .smart-editor-editable font:empty {
  min-width: 1px;
  min-height: 1px;
  display: inline-block;
}
.smart-editor .smart-editor-content-container .smart-editor-editable font:empty::before {
  content: "a";
  opacity: 0;
}
.smart-editor .smart-editor-content-container .smart-editor-editable pre {
  padding: 10px;
  background: var(--smart-surface);
}
.smart-editor .smart-editor-content-container .smart-editor-editable blockquote {
  border-left: calc(2 * var(--smart-border-width)) solid var(--smart-border);
  padding: 20px 10px;
}
.smart-editor .smart-editor-content-container .smart-editor-editable .find-and-replace-match {
  background-color: var(--smart-editor-highlight);
  opacity: 0.75;
  color: var(--smart-editor-highlight-color);
}
.smart-editor .smart-editor-content-container .smart-editor-editable .find-and-replace-match.selected {
  background-color: var(--smart-editor-highlight);
  opacity: 1;
}
.smart-editor .smart-editor-content-container img,
.smart-editor .smart-editor-content-container .smart-editor-video-container video,
.smart-editor .smart-editor-content-container .smart-editor-video-container iframe {
  float: initial;
  vertical-align: initial;
  margin: auto;
  min-width: 10px;
  min-height: 10px;
}
.smart-editor .smart-editor-content-container img[display=block],
.smart-editor .smart-editor-content-container .smart-editor-video-container video[display=block],
.smart-editor .smart-editor-content-container .smart-editor-video-container iframe[display=block] {
  display: block;
}
.smart-editor .smart-editor-content-container img[display=block][alignment=left],
.smart-editor .smart-editor-content-container .smart-editor-video-container video[display=block][alignment=left],
.smart-editor .smart-editor-content-container .smart-editor-video-container iframe[display=block][alignment=left] {
  margin-left: 0;
}
.smart-editor .smart-editor-content-container img[display=block][alignment=right],
.smart-editor .smart-editor-content-container .smart-editor-video-container video[display=block][alignment=right],
.smart-editor .smart-editor-content-container .smart-editor-video-container iframe[display=block][alignment=right] {
  margin-right: 0;
}
.smart-editor .smart-editor-content-container img[show-resize-frame],
.smart-editor .smart-editor-content-container .smart-editor-video-container video[show-resize-frame],
.smart-editor .smart-editor-content-container .smart-editor-video-container iframe[show-resize-frame] {
  box-shadow: 0 0 0 var(--smart-border-width) var(--smart-primary);
}
.smart-editor .smart-editor-content-container img:not([display=block])[alignment=left],
.smart-editor .smart-editor-content-container .smart-editor-video-container video:not([display=block])[alignment=left],
.smart-editor .smart-editor-content-container .smart-editor-video-container iframe:not([display=block])[alignment=left] {
  float: left;
}
.smart-editor .smart-editor-content-container img:not([display=block])[alignment=right],
.smart-editor .smart-editor-content-container .smart-editor-video-container video:not([display=block])[alignment=right],
.smart-editor .smart-editor-content-container .smart-editor-video-container iframe:not([display=block])[alignment=right] {
  float: right;
}
.smart-editor .smart-editor-content-container .smart-editor-search-bar {
  position: absolute;
  top: var(--smart-editor-search-bar-offset);
  right: var(--smart-editor-search-bar-offset);
  padding: var(--smart-editor-search-bar-padding);
  display: grid;
  grid-template-columns: minmax(0, 1fr) repeat(3, auto);
  grid-column-gap: 5px;
  border: var(--smart-border-width) solid var(--smart-border);
  box-shadow: var(--smart-elevation-4);
  background: var(--smart-background);
  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);
}
.smart-editor .smart-editor-content-container .smart-editor-search-bar .smart-search-input-container {
  width: var(--smart-text-box-default-width);
  display: flex;
  align-items: center;
}
.smart-editor .smart-editor-content-container .smart-editor-search-bar .smart-search-input-container::after {
  content: attr(selected) "/" attr(matches);
  margin: 0 var(--smart-editor-search-bar-offset);
}
.smart-editor .smart-editor-content-container .smart-editor-search-bar .smart-search-input {
  height: 100%;
  outline: none;
  border: initial;
  padding: var(--smart-editor-label-padding);
}
.smart-editor .smart-editor-content-container .smart-editor-search-bar .smart-search-input:focus {
  border-color: var(--smart-outline);
}
.smart-editor .smart-editor-content-container .smart-editor-search-bar .smart-search-button {
  --smart-button-padding: 0;
  border: initial;
  height: var(--smart-editor-toolbar-button-width);
  width: var(--smart-editor-toolbar-button-width);
}
.smart-editor .smart-editor-content-container .smart-editor-search-bar .smart-search-button button::after {
  font-size: var(--smart-font-size);
  font-family: var(--smart-font-family-icon);
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  pointer-events: none;
}
.smart-editor .smart-editor-content-container .smart-editor-search-bar .smart-search-button.prev button::after {
  content: var(--smart-icon-arrow-up);
}
.smart-editor .smart-editor-content-container .smart-editor-search-bar .smart-search-button.next button::after {
  content: var(--smart-icon-arrow-down);
}
.smart-editor .smart-editor-content-container .smart-editor-search-bar .smart-search-button.close button::after {
  content: var(--smart-icon-close);
}
.smart-editor[show-char-count] .smart-editor-content-container::after {
  content: attr(char-count);
  position: absolute;
  display: flex;
  justify-content: flex-end;
  bottom: var(--smart-editor-char-counter-offset);
  right: var(--smart-editor-char-counter-offset);
  box-sizing: border-box;
  background: var(--smart-background);
  border-radius: var(--smart-border-radius);
  background-clip: content-box;
  -webkit-background-clip: content-box;
  font-family: inherit;
  font-size: inherit;
  pointer-events: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}
.smart-editor[show-char-count] .smart-editor-content-container.char-count-error::after {
  color: var(--smart-error);
}
.smart-editor[show-char-count] .smart-editor-content-container.char-count-warning::after {
  color: var(--smart-warning);
}
.smart-editor[edit-mode=markdown] .smart-editor-content-container[split-mode] .smart-editor-editable {
  order: 3;
}
.smart-editor[edit-mode=markdown] .smart-editor-content-container[split-mode] textarea {
  order: 1;
}
.smart-editor .smart-editor-resize-frame {
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  position: absolute;
}
.smart-editor .smart-editor-resize-frame span {
  cursor: pointer;
  position: absolute;
  width: 10px;
  height: 10px;
  background: var(--smart-primary);
  transform: translate(-50%, -50%);
}
.smart-editor .smart-editor-resize-frame span[position=top-left], .smart-editor .smart-editor-resize-frame span[position=bottom-right] {
  cursor: se-resize;
}
.smart-editor .smart-editor-resize-frame span[position=top-right], .smart-editor .smart-editor-resize-frame span[position=bottom-left] {
  cursor: sw-resize;
}
.smart-editor .smart-editor-resize-frame span[position=top-center], .smart-editor .smart-editor-resize-frame span[position=bottom-center] {
  cursor: ns-resize;
}
.smart-editor .smart-editor-resize-frame span[position=left-center], .smart-editor .smart-editor-resize-frame span[position=right-center] {
  cursor: ew-resize;
}
.smart-editor .smart-editor-image-container {
  display: inline-block;
}
.smart-editor .smart-editor-image-container.smart-editor-video-container {
  position: relative;
}
.smart-editor .smart-editor-image-container.smart-editor-video-container .smart-editor-video-white-space {
  position: absolute;
  opacity: 0;
}
.smart-editor .smart-editor-image-container.smart-editor-video-container[dragged]::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.smart-editor .smart-editor-image-container.smart-editor-video-container video,
.smart-editor .smart-editor-image-container.smart-editor-video-container iframe {
  width: 100%;
  height: 100%;
}
.smart-editor .smart-editor-image-container.smart-editor-video-container > br[class] {
  display: none;
}
.smart-editor .smart-editor-image-container.smart-editor-video-container::after {
  content: var(--smart-icon-menu);
  position: absolute;
  font-family: var(--smart-font-family-icon);
  font-size: var(--smart-font-size);
  width: var(--smart-editor-toolbar-item-height);
  height: var(--smart-editor-toolbar-item-height);
  top: 0;
  left: calc(50% - var(--smart-editor-toolbar-item-height) / 2);
  background: var(--smart-background);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  visibility: hidden;
  transform-origin: top;
  transform: scale(0) translateY(-100%);
  transition: transform 0.2s ease-in-out, visibility 0.2s ease-in-out;
}
.smart-editor .smart-editor-image-container.smart-editor-video-container:hover::after {
  visibility: visible;
  transform: scale(1) translateY(25%);
}
.smart-editor .smart-editor-image-container[display=block] {
  display: block;
}
.smart-editor .smart-editor-image-container[display=block][alignment=left] img {
  margin-left: 0;
}
.smart-editor .smart-editor-image-container[display=block][alignment=left] .smart-editor-image-caption {
  text-align: left;
}
.smart-editor .smart-editor-image-container[display=block][alignment=right] img {
  margin-right: 0;
}
.smart-editor .smart-editor-image-container[display=block][alignment=right] .smart-editor-image-caption {
  text-align: right;
}
.smart-editor .smart-editor-image-container:not([display=block])[alignment=left] {
  float: left;
}
.smart-editor .smart-editor-image-container:not([display=block])[alignment=right] {
  float: right;
}
.smart-editor .smart-editor-image-container .smart-editor-image-caption {
  display: block;
  text-align: center;
  outline: none;
}
.smart-editor table {
  width: 100%;
  border-collapse: collapse;
  empty-cells: show;
  border-spacing: 0;
  table-layout: fixed;
}
.smart-editor table td,
.smart-editor table th {
  border: var(--smart-border-width) solid var(--smart-border);
  width: var(--smart-editor-table-column-width);
  min-height: var(--smart-editor-table-cell-min-height);
  min-width: var(--smart-editor-table-cell-min-width);
  padding: 2px 5px;
  vertical-align: middle;
}
.smart-editor table img {
  max-width: 100%;
}
.smart-editor table table {
  width: 100%;
}
.smart-editor table th {
  background: var(--smart-surface);
}
.smart-editor table th:empty::before,
.smart-editor table td:empty::before {
  content: "A";
  visibility: hidden;
}
.smart-editor table[dashed-borders] th, .smart-editor table[dashed-borders] td {
  border-style: dashed;
}
.smart-editor table[alternation] tr:nth-child(2n) {
  background-color: var(--smart-alternation-index0-background);
}
.smart-editor table [selected] {
  box-shadow: 0 0 0 var(--smart-border-width) var(--smart-primary) inset;
}
.smart-editor[focus] .smart-editor-toolbar-item[item-type=button][checked] {
  color: var(--smart-ui-state-color-active);
  border-color: var(--smart-ui-state-border-active);
  background-color: var(--smart-ui-state-active);
}

.smart-editor-toolbar-item {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  position: relative;
  border-radius: var(--smart-editor-toolbar-item-border-radius);
  cursor: pointer;
}
.smart-editor-toolbar-item:not([item-type=custom]):hover {
  color: var(--smart-ui-state-color-hover);
  border-color: var(--smart-ui-state-border-hover);
  background-color: var(--smart-ui-state-hover);
  box-shadow: var(--smart-elevation-1);
}
.smart-editor-toolbar-item:not([item-type=custom]):not([item-type=color-input]):not([disabled]):active {
  color: var(--smart-ui-state-color-active);
  border-color: var(--smart-ui-state-border-active);
  background-color: var(--smart-ui-state-active);
}
.smart-editor-toolbar-item[item-name=bold]::before {
  content: var(--smart-icon-bold);
}
.smart-editor-toolbar-item[item-name=italic]::before {
  content: var(--smart-icon-italic);
}
.smart-editor-toolbar-item[item-name=underline]::before {
  content: var(--smart-icon-underline);
}
.smart-editor-toolbar-item[item-name=strikethrough]::before {
  content: var(--smart-icon-strike-through);
}
.smart-editor-toolbar-item[item-name=caption]::before {
  content: var(--smart-icon-format-clear);
}
.smart-editor-toolbar-item[item-name=orderedlist]::before {
  content: var(--smart-icon-list-ordered);
}
.smart-editor-toolbar-item[item-name=unorderedlist]::before {
  content: var(--smart-icon-list-unordered);
}
.smart-editor-toolbar-item[item-name=checklist]::before {
  content: var(--smart-icon-list-check);
}
.smart-editor-toolbar-item[item-name=subscript]::before {
  content: var(--smart-icon-subscript);
}
.smart-editor-toolbar-item[item-name=superscript]::before {
  content: var(--smart-icon-superscript);
}
.smart-editor-toolbar-item .smart-editor-item-action-button[item-name=backgroundcolor]::before {
  content: var(--smart-icon-color-background);
}
.smart-editor-toolbar-item .smart-editor-item-action-button[item-name=fontcolor]::before {
  content: var(--smart-icon-font);
}
.smart-editor-toolbar-item[item-name=delete]::before {
  content: var(--smart-icon-delete);
}
.smart-editor-toolbar-item[item-name=redo]::before {
  content: var(--smart-icon-reload);
}
.smart-editor-toolbar-item[item-name=undo]::before {
  content: var(--smart-icon-reload);
}
.smart-editor-toolbar-item[item-name=indent]::before {
  content: var(--smart-icon-indent-left);
}
.smart-editor-toolbar-item[item-name=outdent]::before {
  content: var(--smart-icon-indent-right);
}
.smart-editor-toolbar-item[item-name=createlink]::before {
  content: var(--smart-icon-link);
}
.smart-editor-toolbar-item[item-name=removelink]::before {
  content: var(--smart-icon-unlink);
}
.smart-editor-toolbar-item[item-name=hyperlink]::before {
  content: var(--smart-icon-link);
}
.smart-editor-toolbar-item[item-name=openlink]::before {
  content: var(--smart-icon-link-ext);
}
.smart-editor-toolbar-item[item-name=editlink]::before {
  content: var(--smart-icon-mode-edit);
}
.smart-editor-toolbar-item[item-name=image]::before {
  content: var(--smart-icon-image);
}
.smart-editor-toolbar-item[item-name=table]::before {
  content: var(--smart-icon-table);
}
.smart-editor-toolbar-item[item-name=lowercase]::before {
  content: var(--smart-icon-case-lower);
}
.smart-editor-toolbar-item[item-name=uppercase]::before {
  content: var(--smart-icon-case-upper);
}
.smart-editor-toolbar-item[item-name=print]::before {
  content: var(--smart-icon-print);
}
.smart-editor-toolbar-item[item-name=copy]::before {
  content: var(--smart-icon-copy-record);
}
.smart-editor-toolbar-item[item-name=paste]::before {
  content: var(--smart-icon-paste);
}
.smart-editor-toolbar-item[item-name=cut]::before {
  content: var(--smart-icon-cut);
  transform: rotate(-90deg);
}
.smart-editor-toolbar-item[item-name=clearformat]::before {
  content: var(--smart-icon-format-clear);
}
.smart-editor-toolbar-item[item-name=fullscreen]::before {
  content: var(--smart-icon-resize-full);
}
.smart-editor-toolbar-item[item-name=sourcecode]::before {
  content: var(--smart-icon-source-code);
}
.smart-editor-toolbar-item[item-name=preview]::before {
  content: var(--smart-icon-visibility);
}
.smart-editor-toolbar-item[item-name=splitmode]::before {
  content: var(--smart-icon-split-mode);
}
.smart-editor-toolbar-item[item-name=tableheader]::before {
  content: var(--smart-icon-header);
}
.smart-editor-toolbar-item[item-name=tablerows]::before {
  content: var(--smart-icon-row);
}
.smart-editor-toolbar-item[item-name=tablecolumns]::before {
  content: var(--smart-icon-column);
}
.smart-editor-toolbar-item[item-name=tablevalign]::before {
  content: var(--smart-icon-vertical-align);
}
.smart-editor-toolbar-item[item-name=tablestyle]::before {
  content: var(--smart-icon-styles);
}
.smart-editor-toolbar-item[item-name=findandreplace]::before {
  content: var(--smart-icon-search);
}
.smart-editor-toolbar-item[item-name=video]::before {
  content: var(--smart-icon-video);
}
.smart-editor-toolbar-item[item-name=redo]::before {
  transform: scaleX(-1);
}
.smart-editor-toolbar-item[item-name=caption]::before {
  font-weight: 600;
}
.smart-editor-toolbar-item[item-name=clearformat]::before {
  font-style: italic;
  font-weight: 600;
}
.smart-editor-toolbar-item[item-name=clearformat]::after {
  content: "-";
  position: absolute;
  top: 0;
  font-weight: 600;
  transform: scaleX(1.5);
}
.smart-editor-toolbar-item[item-name=alignment][item-value=left]::before {
  content: var(--smart-icon-align-left);
}
.smart-editor-toolbar-item[item-name=alignment][item-value=center]::before {
  content: var(--smart-icon-align-center);
}
.smart-editor-toolbar-item[item-name=alignment][item-value=right]::before {
  content: var(--smart-icon-align-right);
}
.smart-editor-toolbar-item[item-name=alignment][item-value=justify]::before {
  content: var(--smart-icon-align-justify);
}
.smart-editor-toolbar-item[item-type=toggle][checked] {
  color: var(--smart-ui-state-color-active);
  border-color: var(--smart-ui-state-border-active);
  background-color: var(--smart-ui-state-active);
}
.smart-editor-toolbar-item[item-type=button], .smart-editor-toolbar-item[item-type=toggle] {
  width: var(--smart-editor-toolbar-button-width);
}
.smart-editor-toolbar-item[item-type=drop-down], .smart-editor-toolbar-item[item-type=color-input] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: var(--smart-editor-toolbar-drop-down-width-small);
}
.smart-editor-toolbar-item[item-type=drop-down][item-name=fontname], .smart-editor-toolbar-item[item-type=drop-down][item-name=formats] {
  width: var(--smart-editor-toolbar-drop-down-width-large);
}
.smart-editor-toolbar-item[item-type=drop-down][item-name=tablerows]:before {
  transform: rotate(90deg);
  padding: var(--smart-editor-label-padding);
  padding-left: initial;
  padding-right: initial;
  padding-top: initial;
}
.smart-editor-toolbar-item[item-type=color-input] .smart-editor-item-action-button {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: calc(100% - var(--smart-editor-addon-width));
  height: 100%;
  min-width: var(--smart-editor-addon-width);
  padding: var(--smart-editor-label-padding);
  padding-top: initial;
  padding-bottom: initial;
}
.smart-editor-toolbar-item[item-type=color-input] .smart-editor-item-action-button::before {
  font-size: var(--smart-font-size);
  font-family: var(--smart-font-family-icon);
  border-bottom: calc(3 * var(--smart-border-width)) solid var(--item-value);
}
.smart-editor-toolbar-item[item-type=color-input] .smart-editor-item-drop-down-button {
  position: relative;
  height: 100%;
}
.smart-editor-toolbar-item[item-type=custom] > :first-child {
  width: 100%;
  height: var(--smart-editor-toolbar-item-height);
}
.smart-editor-toolbar-item .smart-editor-item-action-button:hover,
.smart-editor-toolbar-item .smart-editor-item-drop-down-button:hover {
  color: var(--smart-ui-state-color-hover);
  border-color: var(--smart-ui-state-border-hover);
  background-color: var(--smart-ui-state-hover);
  border-color: var(--smart-ui-state-focus);
  background-color: var(--smart-ui-state-focus);
}
.smart-editor-toolbar-item .smart-editor-item-action-button:not([disabled]):active,
.smart-editor-toolbar-item .smart-editor-item-drop-down-button:not([disabled]):active {
  color: var(--smart-ui-state-color-active);
  border-color: var(--smart-ui-state-border-active);
  background-color: var(--smart-ui-state-active);
}
.smart-editor-toolbar-item[item-type=delimiter] {
  width: var(--smart-editor-toolbar-delimiter-width);
  pointer-events: none;
}
.smart-editor-toolbar-item[item-type=delimiter]::before {
  content: attr(item-name);
  transform: scaleY(1.5);
  min-width: initial;
}
.smart-editor-toolbar-item .smart-ripple {
  background-color: var(--smart-background-color);
}
.smart-editor-toolbar-item .smart-editor-item-drop-down {
  position: absolute;
  top: 0;
  left: 0;
  visibility: hidden;
}

/* --- Editor Color Input --- */
.smart-color-input-drop-down-menu.smart-editor-color-input .grid-samples-container {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.smart-color-input-drop-down-menu.smart-editor-color-input:not([animation=none]) .default-samples-container div {
  transition: transform 0.2s ease-in-out;
}
.smart-color-input-drop-down-menu.smart-editor-color-input .default-samples-container div {
  position: relative;
  border-radius: 50%;
  border: initial;
  transform: scale(0.95);
}
.smart-color-input-drop-down-menu.smart-editor-color-input .default-samples-container div.selected {
  transform: scale(1);
}
.smart-color-input-drop-down-menu.smart-editor-color-input .default-samples-container div.selected:not(.no-color):after {
  content: var(--smart-icon-check);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: var(--smart-font-family-icon);
  color: var(--smart-secondary-color);
  border-radius: inherit;
}

.smart-editor-color-input {
  --smart-input-drop-down-menu-width: auto;
}

.smart-editor-color-input.smart-color-input-drop-down-menu .default-samples-container div.selected[value="#FFFFFF"]::after {
  border: var(--smart-border-width) solid var(--smart-border);
  color: var(--smart-ui-state-color-hover);
  box-sizing: border-box;
}

/* --- Editor Input Drop Down --- */
.smart-editor-input li .editor-icon::before {
  font-size: var(--smart-font-size);
  font-family: var(--smart-font-family-icon);
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 0;
  width: var(--smart-column-icon-size);
  line-height: 1rem;
}
.smart-editor-input li[value=left] .editor-icon::before {
  content: var(--smart-icon-align-left);
}
.smart-editor-input li[value=center] .editor-icon::before {
  content: var(--smart-icon-align-center);
}
.smart-editor-input li[value=right] .editor-icon::before {
  content: var(--smart-icon-align-right);
}
.smart-editor-input li[value=justify] .editor-icon::before {
  content: var(--smart-icon-align-justify);
}
.smart-editor-input li[value=insertRowBefore] .editor-icon::before {
  content: var(--smart-icon-row-before);
}
.smart-editor-input li[value=insertRowAfter] .editor-icon::before {
  content: var(--smart-icon-row-after);
  transform: rotate(180deg);
}
.smart-editor-input li[value=deleteRow] .editor-icon::before {
  content: var(--smart-icon-row-delete);
}
.smart-editor-input li[value=insertColumnLeft] .editor-icon::before {
  content: var(--smart-icon-column-left);
  transform: rotate(-90deg);
}
.smart-editor-input li[value=insertColumnRight] .editor-icon::before {
  content: var(--smart-icon-column-right);
  transform: rotate(90deg);
}
.smart-editor-input li[value=deleteColumn] .editor-icon::before {
  content: var(--smart-icon-column-delete);
}
.smart-editor-input li[value=h1] a {
  font-size: 1.5rem;
  font-weight: bold;
}
.smart-editor-input li[value=h2] a {
  font-size: 1.3rem;
  font-weight: bold;
}
.smart-editor-input li[value=h3] a {
  font-size: 1.1rem;
  font-weight: bold;
}
.smart-editor-input li[value=h4] a {
  font-size: 0.9rem;
  font-weight: bold;
}
.smart-editor-input li[value=segueUi] a {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.smart-editor-input li[value=arial] a {
  font-family: Arial, Helvetica, sans-serif;
}
.smart-editor-input li[value=georgia] a {
  font-family: Georgia, "Times New Roman", Times, serif;
}
.smart-editor-input li[value=impact] a {
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
}
.smart-editor-input li[value=tahoma] a {
  font-family: Tahoma, Geneva, Verdana, sans-serif;
}
.smart-editor-input li[value=timesnewRoman] a {
  font-family: "Times New Roman", Times, serif;
}
.smart-editor-input li[value=verdana] a {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

/* --- Editor Window --- */
.smart-editor-window {
  --smart-window-default-width: auto;
  --smart-window-default-height: auto;
  --smart-window-header-height: var(--smart-editor-window-header-height);
  --smart-window-footer-height: var(--smart-editor-window-footer-height);
  --smart-window-header-footer-padding: 10px;
  --smart-window-header-background: transparent;
  --smart-window-footer-padding: 10px;
  --smart-window-content-padding: 20px;
  max-width: 95vw;
  max-height: 95vh;
}
.smart-editor-window.smart-window .smart-content-container > .smart-content {
  padding: initial;
  align-items: flex-start;
}
.smart-editor-window .smart-editor-window-button {
  width: 100%;
  height: 100%;
  --smart-button-padding: 0.2rem 16px;
}
.smart-editor-window .smart-editor-window-button:not(:last-of-type) {
  margin-right: 2.5%;
}
.smart-editor-window .smart-editor-window-content-wrapper {
  grid-template-rows: auto minmax(auto, 1fr);
  padding: var(--smart-window-content-padding);
  width: 100%;
}
.smart-editor-window .smart-editor-window-content-wrapper > div {
  display: grid;
  width: var(--smart-box-width);
  grid-row-gap: 10px;
  justify-content: center;
  grid-template-columns: 100%;
}
.smart-editor-window .smart-editor-window-editor {
  display: grid;
  grid-row-gap: 5px;
  grid-column-gap: 10px;
}
.smart-editor-window .smart-editor-window-editor > .smart-input,
.smart-editor-window .smart-editor-window-editor > .smart-list-box {
  width: 100%;
}
.smart-editor-window .smart-editor-window-editor > .smart-check-box {
  width: max-content;
}
.smart-editor-window .smart-editor-window-editor[multiple] .smart-editor-window-editor {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.smart-editor-window .smart-editor-window-editor[type=results] label {
  display: flex;
  justify-content: space-between;
}
.smart-editor-window .smart-editor-window-editor[type=results] label[matches]::after {
  content: attr(selected) " of " attr(matches);
}
.smart-editor-window .smart-editor-window-editor[type=file] .smart-drop-zone {
  width: 100%;
  height: 100px;
  border: calc(2 * var(--smart-border-width)) dashed var(--smart-border);
  border-radius: var(--smart-border-radius);
}
.smart-editor-window .smart-editor-window-editor[type=file] .smart-file-upload {
  --smart-file-upload-drop-zone-height: 100px;
  width: 100%;
  order: 1;
  min-height: initial;
}
.smart-editor-window .smart-editor-window-editor[type=file] .smart-file-upload .smart-browse-button {
  margin: initial;
}
.smart-editor-window .smart-editor-window-editor[type=file] .smart-file-upload .smart-item-upload-button {
  display: none;
}
.smart-editor-window .smart-editor-window-editor[type=file] .smart-file-upload .smart-file-upload-header {
  margin-bottom: 5px;
  padding: initial;
}
.smart-editor-window .smart-editor-window-editor[type=file] .smart-file-upload .smart-file-upload-container {
  padding: initial;
}
.smart-editor-window .smart-editor-window-editor[type=file] .smart-file-upload .smart-selected-files {
  padding: initial;
}
.smart-editor-window .smart-editor-window-editor[type=file] .smart-file-upload .smart-selected-files .smart-file {
  display: flex;
  margin: initial;
  border: var(--smart-border-width) solid var(--smart-border);
  border-radius: var(--smart-border-radius);
}
.smart-editor-window .smart-editor-window-editor[type=file] .smart-file-upload .smart-selected-files .smart-item-upload-button:after,
.smart-editor-window .smart-editor-window-editor[type=file] .smart-file-upload .smart-selected-files .smart-item-pause-button:after,
.smart-editor-window .smart-editor-window-editor[type=file] .smart-file-upload .smart-selected-files .smart-item-cancel-button:after {
  position: initial;
  left: initial;
  top: initial;
  display: flex;
  align-items: center;
  justify-content: center;
}
.smart-editor-window .smart-editor-window-editor[type=file] .smart-file-upload .smart-selected-files .smart-item-name {
  width: 100%;
}

/* --- Editor Tooltip --- */
.smart-tooltip .smart-tooltip-content {
  display: flex;
  background-color: var(--smart-background);
  color: var(--smart-background-color);
  border-color: var(--smart-background);
  opacity: initial;
}
.smart-tooltip.smart-editor-context-menu:not([animation=none]) {
  transition: opacity 0.2s ease-in, visibility 0.2s ease-in, transform 0.2s ease-in;
}
.smart-tooltip.smart-editor-toolbar {
  --smart-tooltip-padding: 5px;
  --smart-tooltip-arrow-color: var(--smart-surface);
}
.smart-tooltip.smart-editor-toolbar .smart-tooltip-content {
  background-color: var(--smart-surface);
  color: var(--smart-surface-color);
  border-color: var(--smart-surface);
}
.smart-tooltip.smart-editor-toolbar.smart-editor-inline-toolbar .smart-tooltip-content {
  max-width: var(--smart-editor-inline-toolbar-max-width);
  flex-wrap: wrap;
}
.smart-tooltip.smart-editor-toolbar:not([animation=none]) .smart-editor-toolbar-item {
  transition: background-color 0.2ms linear, border-color 0.2ms ease-in-out, color 0.2ms linear, box-shadow 0.2s ease-in-out;
}
.smart-tooltip.smart-editor-toolbar:not(.smart-editor-drop-down-toolbar) .smart-editor-toolbar-item:not(:first-of-type) {
  margin-left: var(--smart-editor-toolbar-item-margin);
}
.smart-tooltip.smart-editor-context-menu {
  opacity: 0.2;
  transform: scale(0);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}
.smart-tooltip.smart-editor-context-menu[visible] {
  opacity: 1;
  transform: scale(1);
}
.smart-tooltip .smart-editor-context-menu-item-container {
  width: 100%;
  height: 100%;
  display: grid;
  align-items: center;
  justify-content: flex-start;
}
.smart-tooltip .smart-editor-context-menu-item-container .smart-editor-context-menu-item {
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  height: var(--smart-list-item-height);
  padding: var(--smart-list-item-padding);
  border-top-left-radius: var(--smart-item-border-top-left-radius);
  border-top-right-radius: var(--smart-item-border-top-right-radius);
  border-bottom-left-radius: var(--smart-item-border-bottom-left-radius);
  border-bottom-right-radius: var(--smart-item-border-bottom-right-radius);
  white-space: nowrap;
  text-overflow: ellipsis;
  background: var(--smart-background);
  color: var(--smart-background-color);
  display: flex;
  align-items: center;
  position: relative;
  padding-left: var(--smart-column-icon-size);
}
.smart-tooltip .smart-editor-context-menu-item-container .smart-editor-context-menu-item::before {
  font-size: var(--smart-font-size);
  font-family: var(--smart-font-family-icon);
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 0;
  width: var(--smart-column-icon-size);
  line-height: 1rem;
}
.smart-tooltip .smart-editor-context-menu-item-container .smart-editor-context-menu-item[value=insertRowBefore]::before {
  content: var(--smart-icon-row-before);
}
.smart-tooltip .smart-editor-context-menu-item-container .smart-editor-context-menu-item[value=insertRowAfter]::before {
  content: var(--smart-icon-row-after);
  transform: rotate(180deg);
}
.smart-tooltip .smart-editor-context-menu-item-container .smart-editor-context-menu-item[value=deleteRow]::before {
  content: var(--smart-icon-row-delete);
}
.smart-tooltip .smart-editor-context-menu-item-container .smart-editor-context-menu-item[value=insertColumnLeft]::before {
  content: var(--smart-icon-column-left);
  transform: rotate(-90deg);
}
.smart-tooltip .smart-editor-context-menu-item-container .smart-editor-context-menu-item[value=insertColumnRight]::before {
  content: var(--smart-icon-column-right);
  transform: rotate(90deg);
}
.smart-tooltip .smart-editor-context-menu-item-container .smart-editor-context-menu-item[value=deleteColumn]::before {
  content: var(--smart-icon-column-delete)