/* .smart-editor */
//Use the Scheduler SASS placeholder for the ColorInput styling
@import 'scheduler/color_input';

//Toolbar item values that correspond to the icons in smart.variables.css
$iconTypes: 'bold''bold',
'italic''italic',
'underline''underline',
'strikethrough''strike-through',
'caption''format-clear',
'orderedlist''list-ordered',
'unorderedlist''list-unordered',
'checklist''list-check',
'subscript''subscript',
'superscript''superscript',
'backgroundcolor''color-background',
'fontcolor''font',
'delete''delete',
'redo''reload',
'undo''reload',
'indent''indent-left',
'outdent''indent-right',
'createlink''link',
'removelink''unlink',
'hyperlink''link',
'openlink''link-ext',
'editlink''mode-edit',
'image''image',
'table''table',
'lowercase''case-lower',
'uppercase''case-upper',
'print''print',
'copy''copy-record',
'paste''paste',
'cut''cut',
'clearformat''format-clear',
'fullscreen''resize-full',
'sourcecode''source-code',
'preview''visibility',
'splitmode''split-mode',
'tableheader''header',
'tablerows''row',
'tablecolumns''column',
'tablevalign''vertical-align',
'tablestyle''styles',
'findandreplace''search',
'file''up',
'ai''ai',
'video''video';
$tableActions: 'insertRowBefore''row-before',
'insertRowAfter''row-after',
'deleteRow''row-delete',
'insertColumnLeft''column-left',
'insertColumnRight''column-right',
'deleteColumn''column-delete';
$contextMenuActions: 'tableProperties''table',
'imageProperties''image',
'linkProperties''link',
'videoProperties''link',
'deleteTable''delete',
'copyImage''copy-record',
'copyVideo''copy-record',
'cutImage''cut',
'cutVideo''cut',
'deleteImage''delete',
'deleteVideo''delete',
'deleteLink''delete',
'createLink''link',
'deleteLink''unlink',
'caption''format-clear',
'selectAll''group',
'date''calendar',
'rewrite''edit',
'continue_writing''arrow-right',
'fix_spelling_grammar''mode-edit',
'summarize''file',
'make_shorter''resize-small',
'make_longer''resize-full',
'explain''help-circled',
'concise''ai',
'professional''ai',
'casual''ai',
'funny''ai',
'translate_english''docs',
'translate_spanish''docs',
'translate_portuguese''docs',
'translate_italian''docs',
'translate_dutch''docs',
'translate_chinese''docs',
'translate_korean''docs',
'translate_japanese''docs',
'translate_russian''docs',
'h1''header',
'h2''header',
'h3''header',
'h4''header',
'h5''header',
'h6''header',
'cut''cut',
'copy''copy-record',
'table''table',
'text''font',
'togglelist' 'arrow-right',
'image''image',
'video''video',
'file''file',
'hyperlink''link',
'strikethrough''strike-through',
'caption''format-clear',
'orderedlist''list-ordered',
'unorderedlist''list-unordered',
'checklist''list-check',
'callout''attention-circled',
'blockquote''blockquote',
'divider''divider',
'ai''ai',
'twoColumns''column',
'threeColumns''column',
'fourColumns''column',
'emoji''emoji',
'user''user',
'page''link',
'pageLink''link',
'task''check',
'deleteTab''delete',
'paste''paste';
$alignment: 'left''align-left',
'center''align-center',
'right''align-right',
'justify''align-justify';
$border: var(--smart-border-width) solid var(--smart-border);
$headings: 'h1'1.5rem,
'h2'1.3rem,
'h3'1.1rem,
'h4'0.9rem,
'h5'0.8rem,
'h6'0.7rem;

$fonts: 'segueUi''"Segoe UI", Tahoma, Geneva, Verdana, sans-serif',
'arial''Arial, Helvetica, sans-serif',
'georgia''Georgia, "Times New Roman", Times, serif',
'impact''Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif',
'tahoma''Tahoma, Geneva, Verdana, sans-serif',
'timesnewRoman''"Times New Roman", Times, serif',
'verdana''Verdana, Geneva, Tahoma, sans-serif';

//hover, focus, active states
@mixin itemState($state) {
  color: var(--smart-ui-state-color-#{$state});
  border-color: var(--smart-ui-state-border-#{$state});
  background-color: var(--smart-ui-state-#{$state});
}

@mixin userSelect {
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}

//Input common styles
%input {
  width: 100%;
  height: 100%;
  outline: none;
  padding: var(--smart-editor-padding);
  background: transparent;
}

//Toolbar item common styles
%toolbarItem {
  position: relative;
  height: var(--smart-editor-toolbar-item-height);
  outline: none;
}

//Ellipsis
@mixin ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@mixin iconFont {
  font-size: var(--smart-font-size);
  font-family: var(--smart-font-family-icon);
}

@mixin flexCenter {
  display: flex;
  align-items: center;
  justify-content: center;
}

@mixin disabledState {
  @include userSelect;
  opacity: 0.55;
  cursor: default;
  pointer-events: none;
}

//A toolbar item pserudo element for the icons
%toolbarIconPseudo {
  @include iconFont;
  @include flexCenter;
  width: 100%;
  min-width: var(--smart-editor-addon-width);
  height: 100%;
  box-sizing: border-box;
  pointer-events: none;
}

//A toolbar item pseudo element for drop down icon
%toolbarItemDropDownPseudo {
  @extend %toolbarIconPseudo;
  content: var(--smart-icon-arrow-down);
  width: var(--smart-editor-addon-width);
  min-width: var(--smart-editor-addon-width);
}

%toolbarItemDropDownLabelPseudo {
  @include iconFont;
  @include ellipsis;
  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 state
%disabledState[disabled] {
  @include disabledState;
}

.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: $border;
  border-radius: var(--smart-border-radius);
  contain: content;

  //When inside an iframe
  &.smart-editor-iframe-body {
    margin: initial;
    border: initial;
    min-height: initial;
    border-radius: initial;
    width: 100%;
    height: 100%;

    table {
      font-size: var(--smart-font-size);
      font-weight: var(--smart-font-weight);
    }

    * {
      box-sizing: border-box;
    }
  }

  &>.smart-container {
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: auto minmax(0, 1fr);
    position: relative;
    min-height: inherit;
  }

  .smart-toast-container.smart-toast-container-custom {
    position: absolute;
    top: 0;
    right: 0;
    height: auto;
    max-height: 100%;
  }

  &.full-screen-mode {
    min-width: 100%;
    max-width: 100%;
    min-height: 100%;
    max-height: 100%;
    //The use of !important is needed to make sure that no inline style will interfere with full screen mode
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    z-index: calc(var(--smart-editor-drop-down-z-index) - 1);
  }

  &[readonly] {

    .smart-editor-toolbar-items-primary,
    .smart-editor-toolbar-items-secondary {
      pointer-events: none;
    }
  }

  &[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-tab-selection-bar {
      position: absolute;
      bottom: 0;
      height: calc(2* var(--smart-border-width));
      background-color: var(--smart-primary);
      transform: scaleX(1);

      &.smart-visibility-hidden {
        transform: scaleX(0);
      }
    }

    .smart-editor-toolbar-items-primary {
      position: relative;
    }

    .smart-editor-toolbar {
      &[expanded] {

        .smart-editor-toolbar-items-primary,
        .smart-editor-toolbar-toggle-button {
          border-bottom: var(--smart-border-width) solid var(--smart-border);
        }
      }
    }

    .smart-editor-toolbar:not(.smart-tooltip) .smart-editor-toolbar-items-secondary .smart-editor-toolbar-item {
      margin-left: initial;
    }

    .smart-editor-toolbar-items-secondary {
      background-color: var(--smart-background);
      padding-bottom: initial;
      flex-wrap: initial;

      &.smart-drop-down {
        border-bottom: var(--smart-border-width) solid var(--smart-border);
        box-shadow: var(--smart-elevation-4);
        overflow: hidden;
      }

      .smart-editor-toolbar-item {
        margin-bottom: var(--smart-editor-toolbar-item-margin);

        &:not(:last-of-type) {
          margin-right: var(--smart-editor-toolbar-item-margin);
        }
      }
    }

    .smart-editor-toolbar-tab {
      @include userSelect;
      padding: var(--smart-tab-item-padding);

      &:not([disabled]) {
        cursor: pointer;
      }
    }

    .smart-editor-toolbar .smart-editor-toolbar-tab-group {
      padding-top: initial;
    }

    .smart-editor-toolbar-tab-group {
      position: relative;
      display: flex;
      // justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      height: 100%;
      padding: var(--smart-editor-toolbar-item-margin);
      padding-bottom: initial;

      &:not(:first-of-type) {
        border-left: var(--smart-border-width) solid var(--smart-border);
      }
    }
  }

  //Toolbar Scroll Mode
  &[toolbar-view-mode="multiRow"],
  &[toolbar-view-mode="scroll"] {

    .smart-editor-toolbar {
      grid-template-areas:
        'primary primary'
        'secondary secondary ';

      .smart-editor-toolbar-toggle-button {
        display: none;
      }
    }

    .smart-editor-toolbar-items-primary {
      padding: 0 5px 5px 0;

      .smart-editor-toolbar-item {
        margin-bottom: initial;
      }
    }
  }

  &[toolbar-view-mode="multiRow"] {

    >.smart-container {
      grid-template-rows: auto minmax(0, 1fr);
    }

    .smart-editor-toolbar .smart-editor-toolbar-items-primary {
      height: auto;
    }
  }

  &[toolbar-view-mode="scroll"] {

    &>.smart-container {
      grid-template-rows: auto minmax(0, 1fr);
    }

    .smart-editor-toolbar-items-primary {
      overflow-y: auto;
    }
  }

  //Animations
  &: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-search-bar,
    &[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-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-toolbar:not(.smart-tooltip),
    .smart-editor-content-container {
      transition: height 0.2s ease-in-out;
    }

    .smart-editor-toolbar-item,
    .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-toolbar-toggle-button::before {
      transition: transform 0.2s ease-in-out;
    }
  }

  //Toolbar Items that are disabled in 'markdown' mode
  &[edit-mode="markdown"] .smart-editor-toolbar-item {

    &[item-name="alignment"],
    &[item-name="indent"],
    &[item-name="outdent"],
    &[item-name="lowercase"],
    &[item-name="uppercase"],
    &[item-name="removelink"] {
      @include disabledState;
    }
  }

  &.preview-mode .smart-editor-toolbar-item {
    &:not([item-name="print"]):not([item-name="sourcecode"]):not([item-name="fullscreen"]):not([item-name="splitmode"]) {
      @include disabledState;
    }
  }

  &[hide-toolbar] {
    &>.smart-container {
      grid-template-rows: minmax(auto, 1fr);
    }

    .smart-editor-toolbar:not(.smart-tooltip) {
      display: none;
    }
  }

  .smart-editor-toolbar:not(.smart-tooltip) {
    width: 100%;
    height: 100%;
    border-bottom: $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;

    &[expanded] {
      .smart-editor-toolbar-toggle-button::before {
        transform: rotate(180deg);
      }
    }

    .smart-editor-toolbar-item {
      margin-left: var(--smart-editor-toolbar-item-margin);
      margin-top: var(--smart-editor-toolbar-item-margin);
    }
  }

  &[toolbar-sticky] .smart-editor-toolbar {
    position: sticky;
    top: 0;
    z-index: calc(var(--smart-editor-drop-down-z-index) - 1);
  }

  &[edit-mode="markdown"] .smart-editor-toolbar-item[item-name="sourcecode"]::before {
    content: var(--smart-icon-visibility);
  }

  .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;

    &::before {
      @include iconFont;
      @include flexCenter;
      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-toolbar-items-primary {
    grid-area: primary;
    height: var(--smart-editor-toolbar-height);
    overflow: hidden;

    .smart-editor-toolbar-item {
      margin-bottom: var(--smart-editor-toolbar-item-margin);
    }
  }

  .smart-editor-toolbar-items-secondary {
    grid-area: secondary;
    padding-bottom: var(--smart-editor-toolbar-item-margin);

    &:empty {
      display: none;
    }
  }

  .smart-editor-toolbar-items-primary,
  .smart-editor-toolbar-items-secondary {
    width: 100%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
  }

  iframe {
    width: 100%;
    height: 100%;
    min-height: var(--smart-editor-input-min-height);
    border: initial;
  }

  .smart-editor-content-container {
    display: grid;
    grid-template-rows: 1fr auto;
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    outline: none;
    background: transparent;

    &[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-editable {
        order: 1;
      }

      &::before {
        content: '';
        width: 100%;
        height: 100%;
        background-color: var(--smart-border);
        order: 2;
      }

      textarea {
        order: 3;
      }
    }

    textarea {
      @extend %input;
      resize: none;
      outline: none;
      border: initial;
      min-height: var(--smart-editor-input-min-height);
      font-size: inherit;
      font-family: inherit;
      color: inherit;
    }

    .smart-editor-editable {
      @extend %input;
      min-height: var(--smart-editor-input-min-height);
      overflow: auto;

      &[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;
      }

      p:first-child {
        margin-top: 0;
      }

      p:last-child {
        margin-bottom: 0;
      }

      ul[checklist] {
        li {
          list-style: none;
        }
        li::before {
          border-radius: 3px;
          top: 3.5px;
          width: 16px;
          height: 16px;
          box-sizing: border-box;
          display: inline-block;
          content:'';
          margin-right: 5px;
          position: relative;
          border: 2px solid rgba(0, 0, 0, 0.25);
          cursor: pointer;
        }
        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;
          }
          text-decoration: line-through;
          color: var(--smart-disabled-color);
        }
      }

      a {
        display: inline-block;
      }

      [alignment="left"] {
        text-align: left;
      }

      [alignment="center"] {
        text-align: center;
      }

      [alignment="right"] {
        text-align: right;
      }

      [alignment="justify"] {
        text-align: justify;
      }

      &[table-cell-resize="horizontal"] {
        cursor: col-resize;

        table {
          overflow: hidden;
        }

        th[resizing],
        td[resizing] {
          position: relative;

          &::after {
            content: '';
            position: absolute;
            right: 0;
            display: flex;
            width: var(--smart-border-width);
            height: 100%;
            transform: scaleY(100);
            background-color: var(--smart-primary);
          }
        }
      }

      &[table-cell-resize="vertical"] {
        cursor: row-resize;

        tr[resizing]>th,
        tr[resizing]>td {
          border-bottom-color: var(--smart-primary);
        }
      }

      &[contenteditable="true"] img {
        cursor: pointer;
      }

      font:empty {
        min-width: 1px;
        min-height: 1px;
        display: inline-block;

        &::before {
          content: 'a';
          opacity: 0;
        }
      }

      pre {
        padding: 10px;
        background: var(--smart-surface);
      }

      blockquote {
        border-left: calc(2 * var(--smart-border-width)) solid var(--smart-border);
        padding: 20px 10px;
      }

      .find-and-replace-match {
        background-color: var(--smart-editor-highlight);
        opacity: 0.75;
        color: var(--smart-editor-highlight-color);

        &.selected {
          background-color: var(--smart-editor-highlight);
          opacity: 1;
        }
      }
    }

    img,
    .smart-editor-video-container video,
    .smart-editor-video-container iframe {
      float: initial;
      vertical-align: initial;
      margin: auto;
      min-width: 10px;
      min-height: 10px;

      &[display="block"] {
        display: block;

        &[alignment="left"] {
          margin-left: 0;
        }

        &[alignment="right"] {
          margin-right: 0;
        }
      }

      &[show-resize-frame] {
        box-shadow: 0 0 0 var(--smart-border-width) var(--smart-primary);
      }

      &:not([display="block"]) {
        &[alignment="left"] {
          float: left;
        }

        &[alignment="right"] {
          float: right;
        }
      }
    }

    .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-search-input-container {
        width: var(--smart-text-box-default-width);
        display: flex;
        align-items: center;

        &::after {
          content: attr(selected)"/"attr(matches);
          margin: 0 var(--smart-editor-search-bar-offset);
        }
      }

      .smart-search-input {
        height: 100%;
        outline: none;
        // border: var(--smart-border-width) solid var(--smart-border);
        border: initial;
        padding: var(--smart-editor-label-padding);
      }

      .smart-search-input:focus {
        border-color: var(--smart-outline);
      }

      .smart-search-button {
        --smart-button-padding: 0;
        border: initial;
        height: var(--smart-editor-toolbar-button-width);
        width: var(--smart-editor-toolbar-button-width);

        button::after {
          @include iconFont();
          @include flexCenter;
          box-sizing: border-box;
          pointer-events: none;
        }

        &.prev button::after {
          content: var(--smart-icon-arrow-up);
        }

        &.next button::after {
          content: var(--smart-icon-arrow-down);
        }

        &.close button::after {
          content: var(--smart-icon-close);
        }
      }
    }
  }

  &[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;
      @include userSelect;
    }

    &.char-count-error::after {
      color: var(--smart-error);
    }

    &.char-count-warning::after {
      color: var(--smart-warning);
    }
  }

  &[edit-mode="markdown"] .smart-editor-content-container[split-mode] {

    .smart-editor-editable {
      order: 3;
    }

    textarea {
      order: 1;
    }
  }

  .smart-editor-resize-frame {
    @include userSelect;
    position: absolute;

    span {
      cursor: pointer;
      position: absolute;
      width: 10px;
      height: 10px;
      background: var(--smart-primary);
      transform: translate(-50%, -50%);

      &[position="top-left"],
      &[position="bottom-right"] {
        cursor: se-resize;
      }

      &[position="top-right"],
      &[position="bottom-left"] {
        cursor: sw-resize;
      }

      &[position="top-center"],
      &[position="bottom-center"] {
        cursor: ns-resize;
      }

      &[position="left-center"],
      &[position="right-center"] {
        cursor: ew-resize;
      }
    }
  }

  .smart-editor-image-container {
    display: inline-block;

    &.smart-editor-video-container {
      position: relative;

      .smart-editor-video-white-space {
        position: absolute;
        opacity: 0;
      }

      &[dragged]::before {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0
      }

      video,
      iframe {
        width: 100%;
        height: 100%;
      }

      >br[class] {
        display: none;
      }

      &::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;
      }

      &:hover::after {
        visibility: visible;
        transform: scale(1) translateY(25%);
      }
    }

    &[display="block"] {
      display: block;

      &[alignment="left"] {
        img {
          margin-left: 0;
        }

        .smart-editor-image-caption {
          text-align: left;
        }
      }

      &[alignment="right"] {
        img {
          margin-right: 0;
        }

        .smart-editor-image-caption {
          text-align: right;
        }
      }
    }

    &:not([display="block"]) {
      &[alignment="left"] {
        float: left;
      }

      &[alignment="right"] {
        float: right;
      }
    }

    .smart-editor-image-caption {
      display: block;
      text-align: center;
      outline: none;
    }
  }

  table {
    width: 100%;
    // min-width: 0;
    border-collapse: collapse;
    empty-cells: show;
    border-spacing: 0;
    table-layout: fixed;

    td,
    th {
      border: $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;
    }

    img {
      max-width: 100%;
    }

    table {
      width: 100%;
    }

    th {
      background: var(--smart-surface);
    }

    //Note: Workaround for the Webkit Browser bug with user-modify CSS proeprty of contenteditable elements
    th:empty::before,
    td:empty::before {
      content: 'A';
      visibility: hidden;
    }

    &[dashed-borders] th,
    &[dashed-borders] td {
      border-style: dashed;
    }

    &[alternation] {
      tr:nth-child(2n) {
        background-color: var(--smart-alternation-index0-background);
      }
    }

    [selected] {
      box-shadow: 0 0 0 var(--smart-border-width) var(--smart-primary) inset;
    }
  }

  &[focus] .smart-editor-toolbar-item[item-type="button"][checked] {
    @include itemState(active);
  }
}

.smart-editor-toolbar-item {
  @include ellipsis;
  @extend %disabledState;
  position: relative;
  border-radius: var(--smart-editor-toolbar-item-border-radius);
  cursor: pointer;

  &[item-type="button"][checked] {
    @include itemState(active);
  }

  &:not([item-type="custom"]) {
    &:hover {
      @include itemState(hover);
      box-shadow: var(--smart-elevation-1);
    }

    &:not([item-type="color-input"]):not([disabled]):active {
      @include itemState(active);
    }
  }

  &:not([item-type="drop-down"])::before {
    @extend %toolbarIconPseudo;
  }

  @each $iconType,
  $iconName in $iconTypes {
    @if (str-index($iconType, "color")) {
      .smart-editor-item-action-button[item-name="#{$iconType}"]::before {
        content: var(--smart-icon-#{$iconName});
      }
    }
    @else {
      &[item-name="#{$iconType}"]::before {
        content: var(--smart-icon-#{$iconName});

        @if ($iconName=='cut') {
          transform: rotate(-90deg);
        }

        @if ($iconName=='ai') {
          content: url('data:image/svg+xml,%3Csvg%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M16.3333%207.33333C16.3333%207.33333%2016.1328%205.44793%2015.3411%204.65887C14.5469%203.8724%2012.6667%203.66667%2012.6667%203.66667C12.6667%203.66667%2014.5521%203.46615%2015.3411%202.67447C16.1276%201.8802%2016.3333%200%2016.3333%200C16.3333%200%2016.5339%201.8854%2017.3255%202.67447C18.112%203.46093%2020%203.66667%2020%203.66667C20%203.66667%2018.1146%203.86719%2017.3255%204.65887C16.5391%205.44533%2016.3333%207.33333%2016.3333%207.33333ZM7.5%205C7.5%205%207.08594%208.8594%205.47393%2010.4739C3.85933%2012.0885%200%2012.5%200%2012.5C0%2012.5%203.8594%2012.9141%205.47393%2014.5261C7.08853%2016.1407%207.5%2020%207.5%2020C7.5%2020%207.91406%2016.1406%209.52607%2014.5261C11.1407%2012.9115%2015%2012.5%2015%2012.5C15%2012.5%2011.1406%2012.0859%209.52607%2010.4739C7.91147%208.85933%207.5%205%207.5%205ZM17.1667%2016.6667C16.7057%2016.6667%2016.3333%2017.0391%2016.3333%2017.5C16.3333%2017.9609%2016.7057%2018.3333%2017.1667%2018.3333C17.6276%2018.3333%2018%2017.9609%2018%2017.5C18%2017.0391%2017.6276%2016.6667%2017.1667%2016.6667ZM2.5%204C2.96094%204%203.33333%203.62761%203.33333%203.16667C3.33333%202.70573%202.96094%202.33333%202.5%202.33333C2.03906%202.33333%201.66667%202.70573%201.66667%203.16667C1.66667%203.62761%202.03906%204%202.5%204Z%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E');
        }
      }
    }
  }
  &[item-name="ai"]:active {
    &::before {
      content: url('data:image/svg+xml,%3Csvg%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M16.3333%207.33333C16.3333%207.33333%2016.1328%205.44793%2015.3411%204.65887C14.5469%203.8724%2012.6667%203.66667%2012.6667%203.66667C12.6667%203.66667%2014.5521%203.46615%2015.3411%202.67447C16.1276%201.8802%2016.3333%200%2016.3333%200C16.3333%200%2016.5339%201.8854%2017.3255%202.67447C18.112%203.46093%2020%203.66667%2020%203.66667C20%203.66667%2018.1146%203.86719%2017.3255%204.65887C16.5391%205.44533%2016.3333%207.33333%2016.3333%207.33333ZM7.5%205C7.5%205%207.08594%208.8594%205.47393%2010.4739C3.85933%2012.0885%200%2012.5%200%2012.5C0%2012.5%203.8594%2012.9141%205.47393%2014.5261C7.08853%2016.1407%207.5%2020%207.5%2020C7.5%2020%207.91406%2016.1406%209.52607%2014.5261C11.1407%2012.9115%2015%2012.5%2015%2012.5C15%2012.5%2011.1406%2012.0859%209.52607%2010.4739C7.91147%208.85933%207.5%205%207.5%205ZM17.1667%2016.6667C16.7057%2016.6667%2016.3333%2017.0391%2016.3333%2017.5C16.3333%2017.9609%2016.7057%2018.3333%2017.1667%2018.3333C17.6276%2018.3333%2018%2017.9609%2018%2017.5C18%2017.0391%2017.6276%2016.6667%2017.1667%2016.6667ZM2.5%204C2.96094%204%203.33333%203.62761%203.33333%203.16667C3.33333%202.70573%202.96094%202.33333%202.5%202.33333C2.03906%202.33333%201.66667%202.70573%201.66667%203.16667C1.66667%203.62761%202.03906%204%202.5%204Z%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E');
    }
  }
  &[item-name="redo"]::before {
    transform: scaleX(-1);
  }

  &[item-name="caption"]::before {
    font-weight: 600;
  }

  &[item-name="clearformat"]::before {
    font-style: italic;
    font-weight: 600;
  }

  &[item-name="clearformat"]::after {
    @extend %toolbarIconPseudo;
    content: '-';
    position: absolute;
    top: 0;
    font-weight: 600;
    transform: scaleX(1.5);
  }

  &[item-name="alignment"]::before {
    @extend %toolbarIconPseudo;
  }

  @each $alignmentName,
  $alignmentIcon in $alignment {
    &[item-name="alignment"][item-value="#{$alignmentName}"]::before {
      content: var(--smart-icon-#{$alignmentIcon});
    }
  }

  &[item-type="toggle"][checked] {
    @include itemState(active);
  }

  &[item-type="button"],
  &[item-type="toggle"] {
    @extend %toolbarItem;
    width: var(--smart-editor-toolbar-button-width);
  }

  &[item-type="drop-down"],
  &[item-type="color-input"] {
    @extend %toolbarItem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: var(--smart-editor-toolbar-drop-down-width-small);
  }

  &[item-type="drop-down"] {

    &[item-name="fontname"],
    &[item-name="formats"] {
      width: var(--smart-editor-toolbar-drop-down-width-large);
    }

    &[item-name="tablerows"]:before {
      transform: rotate(90deg);
      padding: var(--smart-editor-label-padding);
      padding-left: initial;
      padding-right: initial;
      padding-top: initial;
    }

    &:after {
      @extend %toolbarItemDropDownPseudo;
    }

    &:before {
      @extend %toolbarItemDropDownLabelPseudo;
    }
  }

  &[item-type="color-input"] {

    .smart-editor-item-action-button {
      @include flexCenter;
      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;

      &::before {
        @include iconFont;
        border-bottom: calc(3 * var(--smart-border-width)) solid var(--item-value);
      }
    }

    .smart-editor-item-drop-down-button {
      position: relative;
      height: 100%;

      &::before {
        @extend %toolbarItemDropDownPseudo;
      }
    }
  }

  &[item-type="custom"] {
    > :first-child {
      width: 100%;
      height: var(--smart-editor-toolbar-item-height);
    }
  }

  .smart-editor-item-action-button,
  .smart-editor-item-drop-down-button {

    &:hover {
      @include itemState(hover);
      border-color: var(--smart-ui-state-focus);
      background-color: var(--smart-ui-state-focus);
    }

    &:not([disabled]):active {
      @include itemState(active);
    }
  }

  &[item-type="delimiter"] {
    @extend %toolbarItem;
    width: var(--smart-editor-toolbar-delimiter-width);
    pointer-events: none;

    &::before {
      @extend %toolbarIconPseudo;
      content: attr(item-name);
      transform: scaleY(1.5);
      min-width: initial;
    }
  }

  .smart-ripple {
    background-color: var(--smart-background-color);
  }

  .smart-editor-item-drop-down {
    position: absolute;
    top: 0;
    left: 0;
    visibility: hidden;
  }
}

/* --- Editor Color Input --- */
@include color-input-mixin(editor);

.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;
}

.smart-editor-color-input {
  --smart-input-drop-down-menu-width {
    width: 98px;
  }
  .default-samples-container {
    display: flex;
  }
}


/* --- Editor Input Drop Down --- */
.smart-editor-input {
  li {
    .editor-icon::before {
      @include iconFont;
      @include flexCenter;
      position: absolute;
      left: 0;
      width: var(--smart-column-icon-size);
      line-height: 1rem;
    }

    //Alignment Drop Down Items
    @each $alignmentName,
    $alignmentIcon in $alignment {
      &[value="#{$alignmentName}"] .editor-icon::before {
        content: var(--smart-icon-#{$alignmentIcon});
      }
    }

    //Table Action Items
    @each $actionName,
    $actionIcon in $tableActions {
      &[value="#{$actionName}"] .editor-icon::before {
        content: var(--smart-icon-#{$actionIcon});

        @if ($actionName=='insertRowAfter') {
          transform: rotate(180deg);
        }

        @else if($actionName=='insertColumnLeft') {
          transform: rotate(-90deg);
        }

        @else if($actionName=='insertColumnRight') {
          transform: rotate(90deg);
        }
      }
    }

    //Formats Drop Down Items
    @each $heading,
    $headingSize in $headings {

      &[value="#{$heading}"] a {
        font-size: $headingSize;
        font-weight: bold;
      }
    }

    //Font Drop Down Items
    @each $fontName,
    $fontFamily in $fonts {
      &[value="#{$fontName}"] a {
        font-family: #{$fontFamily};
      }
    }
  }
}

/* --- Editor Window --- */

.smart-editor-page-label { 
  cursor: pointer;
  text-decoration: underline;
  color: var(--smart-primary);
}

.smart-editor {
  .smart-editor-page {
    display: none;
  }
}

.smart-editor-page-window {
  padding: 0px;
  box-shadow: none !important;
  border-color: transparent;

  .smart-editor {
  border-color: transparent;
  }
  .smart-content {
    padding: 0px !important;
  }
  .smart-header-section {
    cursor: default !important;
  }
  &[active] {
    border: none;
    cursor:default;
  }
}
.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-window .smart-content-container>.smart-content {
    padding: initial;
    align-items: flex-start;
  }

  .smart-editor-window-button {
    width: 100%;
    height: 100%;
    --smart-button-padding: 0.2rem 16px;

    &:not(:last-of-type) {
      margin-right: 2.5%;
    }
  }

  .smart-editor-window-content-wrapper {
    grid-template-rows: auto minmax(auto, 1fr);
    padding: var(--smart-window-content-padding);
    width: 100%;

    >div {
      display: grid;
      width: var(--smart-box-width);
      grid-row-gap: 10px;
      justify-content: center;
      grid-template-columns: 100%;
    }
  }

  .smart-editor-window-editor {
    display: grid;
    grid-row-gap: 5px;
    grid-column-gap: 10px;

    >.smart-input,
    >.smart-list-box {
      width: 100%;
    }

    >.smart-check-box {
      width: max-content;
    }

    &[multiple] .smart-editor-window-editor {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    &[type="results"] label {
      display: flex;
      justify-content: space-between;

      &[matches]::after {
        content: attr(selected) ' of 'attr(matches);
      }
    }

    &[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);
      }

      //File Upload Styles
      .smart-file-upload {
        --smart-file-upload-drop-zone-height: 100px;
        width: 100%;
        order: 1;
        min-height: initial;

        .smart-browse-button {
          margin: initial;
        }

        .smart-item-upload-button {
          display: none;
        }

        .smart-file-upload-header {
          margin-bottom: 5px;
          padding: initial;
        }

        .smart-file-upload-container {
          padding: initial;
        }

        //NOTE: Move to FileUpload CSS file
        .smart-selected-files {
          padding: initial;

          .smart-file {
            display: flex;
            margin: initial;
            border: $border;
            border-radius: var(--smart-border-radius);
          }

          .smart-item-upload-button:after,
          .smart-item-pause-button:after,
          .smart-item-cancel-button:after {
            position: initial;
            left: initial;
            top: initial;
            display: flex;
            align-items: center;
            justify-content: center;
          }

          .smart-item-name {
            width: 100%;
          }
        }
      }
    }
  }
}

.smart-element {
  .smart-editor-task-box {
    padding: 6px;
    display: grid;
    grid-template-columns: 20px 1fr 20px auto 20px 20px auto 0px;
    max-width: 700px;
    border-bottom: 1px solid var(--smart-border);
    position: relative;
    align-items: baseline;
    margin-top: 3px;
    margin-right: 20px;
  }
}

.smart-editor {
.smart-editor-task-box {
  
  .task-icon,
  .plus-icon,
  .user-icon,
  .delete-icon,
  .due-date-icon,
  .priority-icon {
    cursor: pointer;
  }

  input {
    outline: none;
    min-width: 150px;
  }
  &:hover {
    .plus-icon {
      font-family:var(--smart-font-family-icon);
      width: 16px;
      height: 16px;
      position: absolute;
      left: 50%;
      bottom: -10px;
      &:after {
        content:var(--smart-icon-plus-circled);
      }

      &:hover {
        color:var(--smart-primary);
      }
    }

    .delete-icon {
      font-family:var(--smart-font-family-icon);
      width: 16px;
      height: 16px;
      position: absolute;
      left: calc(100% - 8px);
      top: calc(50% - 8px);
      &:after {
        content:var(--smart-icon-delete);
      }

      &:hover {
        color:var(--smart-primary);
      }
    }
  }

  .text {
    min-height: 16px;
  }
  .text,
  .label {
    border: 1px solid transparent;

    &:focus,
    &:hover {
      cursor: pointer;
      border: 1px solid var(--smart-border);
    }
  }
}
}
/* --- 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-editor-context-menu:not([animation="none"]) {
    transition: opacity 0.2s ease-in, visibility 0.2s ease-in, transform 0.2s ease-in;
  }

  &.smart-editor-toolbar {
    --smart-tooltip-padding: 5px;
    --smart-tooltip-arrow-color: var(--smart-surface);

    .smart-tooltip-content {
      background-color: var(--smart-surface);
      color: var(--smart-surface-color);
      border-color: var(--smart-surface);
    }

    &.smart-editor-inline-toolbar {
      height: auto !important;
    }
    &.smart-editor-inline-toolbar .smart-tooltip-content {
      max-width: var(--smart-editor-inline-toolbar-max-width);
      flex-wrap: wrap;
    }

    &: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;
      }
    }

    &:not(.smart-editor-drop-down-toolbar) .smart-editor-toolbar-item:not(:first-of-type) {
      margin-left: var(--smart-editor-toolbar-item-margin);
    }

  }

  &.smart-editor-context-menu {
    opacity: 0.2;
    z-index: 999999;
 

    &.smart-editor-task-menu {
          transition: transform 0.2s cubic-bezier(0.075, 0.82, 0.165, 1);
          transform: scaleX(1) scaleY(0) !important;
          
          &[visible] {
            transform: scaleX(1) scaleY(1) !important;
          }

        .smart-tooltip-content {
          padding: 0px;
          border: none;
        }
        .smart-editor-context-menu-item {
          padding: 5px 10px;
        }
      }

    &:not(.smart-editor-ai-menu) {
      transform: scale(0);
    }

    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;

    &[visible] {
      opacity: 1;
      transform: scale(1);
    }
  }

  .smart-editor-context-menu-item-container {
    width: 100%;
    height: 100%;
    display: grid;
    align-items: center;
    justify-content: flex-start;

    .smart-editor-context-menu-item {
      @include userSelect;
      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);
      outline: none;

      &[value="category"] {
        pointer-events: none;
        color: var(--smart-disabled);
        font-size: 12px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-top: 2px;
        font-size: 12px;
        color: rgb(127, 127, 127);
        height: 24px;
        border-radius: 0px;
        margin-left: -16px;
        font-weight: 500;
      }

      &::before {
        @include iconFont;
        @include flexCenter;
        position: absolute;
        left: 0;
        width: var(--smart-column-icon-size);
        line-height: 1rem;
      }

      &[description] {
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: flex-start;

        .smart-editor-context-menu-item-description {
          font-size: 12px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
           margin-top: 2px;
          font-size: 12px;
          color: rgb(127, 127, 127);
        }

        &[selected] {
          .smart-editor-context-menu-item-description {
            color: var(--smart-primary);
          }
        }

        &:before {
          margin-top: 10px;
        }
      }

      //Create icon for each Context menu item
      @each $actionName,
      $actionIcon in $tableActions {
        &[value="#{$actionName}"]::before {
          content: var(--smart-icon-#{$actionIcon});

          @if ($actionName=='insertRowAfter') {
            transform: rotate(180deg);
          }

          @else if($actionName=='insertColumnLeft') {
            transform: rotate(-90deg);
          }

          @else if($actionName=='insertColumnRight') {
            transform: rotate(90deg);
          }
        }
      }

      //Additional Context menu actions
      @each $actionName,
      $actionIcon in $contextMenuActions {
        &[value="#{$actionName}"]::before {
          content: var(--smart-icon-#{$actionIcon});

          @if ($actionIcon=='cut') {
            transform: rotate(-90deg);
          }

          @if ($actionName=='h1') {
            content: var(--smart-icon-#{$actionIcon}) "¹"
          }
       
          @if ($actionName=='h2') {
            content: var(--smart-icon-#{$actionIcon}) "²"
          }
       
          @if ($actionName=='h3') {
            content: var(--smart-icon-#{$actionIcon}) "³"
          }

          @if ($actionName=='h4') {
            content: var(--smart-icon-#{$actionIcon}) "⁴"
          }
          

          @if ($actionName=='h5') {
            content: var(--smart-icon-#{$actionIcon}) "⁵"
          }

          @if ($actionName=='h6') {
            content: var(--smart-icon-#{$actionIcon}) "⁶"
          }

          @if ($actionName=='threeColumns') {
            content: var(--smart-icon-#{$actionIcon}) 
          }

          @if ($actionName=='fourColumns') {
            content: var(--smart-icon-#{$actionIcon})
          }


          @if ($actionName=='blockquote') {
            content: "“";
            font-size: 24px;
            font-weight: bold;
          }

          @if ($actionName=='divider') {
            content: "—";
            font-size: 24px;
            font-weight: bold;
          }

          @if ($actionName=='ai') {
            content: url('data:image/svg+xml,%3Csvg%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M16.3333%207.33333C16.3333%207.33333%2016.1328%205.44793%2015.3411%204.65887C14.5469%203.8724%2012.6667%203.66667%2012.6667%203.66667C12.6667%203.66667%2014.5521%203.46615%2015.3411%202.67447C16.1276%201.8802%2016.3333%200%2016.3333%200C16.3333%200%2016.5339%201.8854%2017.3255%202.67447C18.112%203.46093%2020%203.66667%2020%203.66667C20%203.66667%2018.1146%203.86719%2017.3255%204.65887C16.5391%205.44533%2016.3333%207.33333%2016.3333%207.33333ZM7.5%205C7.5%205%207.08594%208.8594%205.47393%2010.4739C3.85933%2012.0885%200%2012.5%200%2012.5C0%2012.5%203.8594%2012.9141%205.47393%2014.5261C7.08853%2016.1407%207.5%2020%207.5%2020C7.5%2020%207.91406%2016.1406%209.52607%2014.5261C11.1407%2012.9115%2015%2012.5%2015%2012.5C15%2012.5%2011.1406%2012.0859%209.52607%2010.4739C7.91147%208.85933%207.5%205%207.5%205ZM17.1667%2016.6667C16.7057%2016.6667%2016.3333%2017.0391%2016.3333%2017.5C16.3333%2017.9609%2016.7057%2018.3333%2017.1667%2018.3333C17.6276%2018.3333%2018%2017.9609%2018%2017.5C18%2017.0391%2017.6276%2016.6667%2017.1667%2016.6667ZM2.5%204C2.96094%204%203.33333%203.62761%203.33333%203.16667C3.33333%202.70573%202.96094%202.33333%202.5%202.33333C2.03906%202.33333%201.66667%202.70573%201.66667%203.16667C1.66667%203.62761%202.03906%204%202.5%204Z%22%20fill%3D%22black%22%2F%3E%3C%2Fsvg%3E');
            opacity: 0.9;
          }
          @if ($actionName=='concise') {
            content: url('data:image/svg+xml,%3Csvg%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M16.3333%207.33333C16.3333%207.33333%2016.1328%205.44793%2015.3411%204.65887C14.5469%203.8724%2012.6667%203.66667%2012.6667%203.66667C12.6667%203.66667%2014.5521%203.46615%2015.3411%202.67447C16.1276%201.8802%2016.3333%200%2016.3333%200C16.3333%200%2016.5339%201.8854%2017.3255%202.67447C18.112%203.46093%2020%203.66667%2020%203.66667C20%203.66667%2018.1146%203.86719%2017.3255%204.65887C16.5391%205.44533%2016.3333%207.33333%2016.3333%207.33333ZM7.5%205C7.5%205%207.08594%208.8594%205.47393%2010.4739C3.85933%2012.0885%200%2012.5%200%2012.5C0%2012.5%203.8594%2012.9141%205.47393%2014.5261C7.08853%2016.1407%207.5%2020%207.5%2020C7.5%2020%207.91406%2016.1406%209.52607%2014.5261C11.1407%2012.9115%2015%2012.5%2015%2012.5C15%2012.5%2011.1406%2012.0859%209.52607%2010.4739C7.91147%208.85933%207.5%205%207.5%205ZM17.1667%2016.6667C16.7057%2016.6667%2016.3333%2017.0391%2016.3333%2017.5C16.3333%2017.9609%2016.7057%2018.3333%2017.1667%2018.3333C17.6276%2018.3333%2018%2017.9609%2018%2017.5C18%2017.0391%2017.6276%2016.6667%2017.1667%2016.6667ZM2.5%204C2.96094%204%203.33333%203.62761%203.33333%203.16667C3.33333%202.70573%202.96094%202.33333%202.5%202.33333C2.03906%202.33333%201.66667%202.70573%201.66667%203.16667C1.66667%203.62761%202.03906%204%202.5%204Z%22%20fill%3D%22black%22%2F%3E%3C%2Fsvg%3E');
            opacity: 0.9;
          }
          @if ($actionName=='professional') {
            content: url('data:image/svg+xml,%3Csvg%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M16.3333%207.33333C16.3333%207.33333%2016.1328%205.44793%2015.3411%204.65887C14.5469%203.8724%2012.6667%203.66667%2012.6667%203.66667C12.6667%203.66667%2014.5521%203.46615%2015.3411%202.67447C16.1276%201.8802%2016.3333%200%2016.3333%200C16.3333%200%2016.5339%201.8854%2017.3255%202.67447C18.112%203.46093%2020%203.66667%2020%203.66667C20%203.66667%2018.1146%203.86719%2017.3255%204.65887C16.5391%205.44533%2016.3333%207.33333%2016.3333%207.33333ZM7.5%205C7.5%205%207.08594%208.8594%205.47393%2010.4739C3.85933%2012.0885%200%2012.5%200%2012.5C0%2012.5%203.8594%2012.9141%205.47393%2014.5261C7.08853%2016.1407%207.5%2020%207.5%2020C7.5%2020%207.91406%2016.1406%209.52607%2014.5261C11.1407%2012.9115%2015%2012.5%2015%2012.5C15%2012.5%2011.1406%2012.0859%209.52607%2010.4739C7.91147%208.85933%207.5%205%207.5%205ZM17.1667%2016.6667C16.7057%2016.6667%2016.3333%2017.0391%2016.3333%2017.5C16.3333%2017.9609%2016.7057%2018.3333%2017.1667%2018.3333C17.6276%2018.3333%2018%2017.9609%2018%2017.5C18%2017.0391%2017.6276%2016.6667%2017.1667%2016.6667ZM2.5%204C2.96094%204%203.33333%203.62761%203.33333%203.16667C3.33333%202.70573%202.96094%202.33333%202.5%202.33333C2.03906%202.33333%201.66667%202.70573%201.66667%203.16667C1.66667%203.62761%202.03906%204%202.5%204Z%22%20fill%3D%22black%22%2F%3E%3C%2Fsvg%3E');
            opacity: 0.9;
          }
          @if ($actionName=='casual') {
            content: url('data:image/svg+xml,%3Csvg%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M16.3333%207.33333C16.3333%207.33333%2016.1328%205.44793%2015.3411%204.65887C14.5469%203.8724%2012.6667%203.66667%2012.6667%203.66667C12.6667%203.66667%2014.5521%203.46615%2015.3411%202.67447C16.1276%201.8802%2016.3333%200%2016.3333%200C16.3333%200%2016.5339%201.8854%2017.3255%202.67447C18.112%203.46093%2020%203.66667%2020%203.66667C20%203.66667%2018.1146%203.86719%2017.3255%204.65887C16.5391%205.44533%2016.3333%207.33333%2016.3333%207.33333ZM7.5%205C7.5%205%207.08594%208.8594%205.47393%2010.4739C3.85933%2012.0885%200%2012.5%200%2012.5C0%2012.5%203.8594%2012.9141%205.47393%2014.5261C7.08853%2016.1407%207.5%2020%207.5%2020C7.5%2020%207.91406%2016.1406%209.52607%2014.5261C11.1407%2012.9115%2015%2012.5%2015%2012.5C15%2012.5%2011.1406%2012.0859%209.52607%2010.4739C7.91147%208.85933%207.5%205%207.5%205ZM17.1667%2016.6667C16.7057%2016.6667%2016.3333%2017.0391%2016.3333%2017.5C16.3333%2017.9609%2016.7057%2018.3333%2017.1667%2018.3333C17.6276%2018.3333%2018%2017.9609%2018%2017.5C18%2017.0391%2017.6276%2016.6667%2017.1667%2016.6667ZM2.5%204C2.96094%204%203.33333%203.62761%203.33333%203.16667C3.33333%202.70573%202.96094%202.33333%202.5%202.33333C2.03906%202.33333%201.66667%202.70573%201.66667%203.16667C1.66667%203.62761%202.03906%204%202.5%204Z%22%20fill%3D%22black%22%2F%3E%3C%2Fsvg%3E');
            opacity: 0.9;
          }
          @if ($actionName=='funny') {
            content: url('data:image/svg+xml,%3Csvg%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M16.3333%207.33333C16.3333%207.33333%2016.1328%205.44793%2015.3411%204.65887C14.5469%203.8724%2012.6667%203.66667%2012.6667%203.66667C12.6667%203.66667%2014.5521%203.46615%2015.3411%202.67447C16.1276%201.8802%2016.3333%200%2016.3333%200C16.3333%200%2016.5339%201.8854%2017.3255%202.67447C18.112%203.46093%2020%203.66667%2020%203.66667C20%203.66667%2018.1146%203.86719%2017.3255%204.65887C16.5391%205.44533%2016.3333%207.33333%2016.3333%207.33333ZM7.5%205C7.5%205%207.08594%208.8594%205.47393%2010.4739C3.85933%2012.0885%200%2012.5%200%2012.5C0%2012.5%203.8594%2012.9141%205.47393%2014.5261C7.08853%2016.1407%207.5%2020%207.5%2020C7.5%2020%207.91406%2016.1406%209.52607%2014.5261C11.1407%2012.9115%2015%2012.5%2015%2012.5C15%2012.5%2011.1406%2012.0859%209.52607%2010.4739C7.91147%208.85933%207.5%205%207.5%205ZM17.1667%2016.6667C16.7057%2016.6667%2016.3333%2017.0391%2016.3333%2017.5C16.3333%2017.9609%2016.7057%2018.3333%2017.1667%2018.3333C17.6276%2018.3333%2018%2017.9609%2018%2017.5C18%2017.0391%2017.6276%2016.6667%2017.1667%2016.6667ZM2.5%204C2.96094%204%203.33333%203.62761%203.33333%203.16667C3.33333%202.70573%202.96094%202.33333%202.5%202.33333C2.03906%202.33333%201.66667%202.70573%201.66667%203.16667C1.66667%203.62761%202.03906%204%202.5%204Z%22%20fill%3D%22black%22%2F%3E%3C%2Fsvg%3E');
            opacity: 0.9;
          }
          @if ($actionName=='emoji') {
            content: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik03IDBDMy4xNDAxMiAwIDAgMy4xNDAwNyAwIDYuOTk5NzhDMCAxMC44NTk3IDMuMTQwMTIgMTQgNyAxNEMxMC44NTk3IDE0IDE0IDEwLjg1OTcgMTQgNi45OTk3OEMxNCAzLjE0MDA3IDEwLjg1OTcgMCA3IDBaTTcgMC42NjQ2MjdDMTAuNDkzMSAwLjY2NDYyNyAxMy4zMzUyIDMuNTA2NTEgMTMuMzM1MiA2Ljk5OTc4QzEzLjMzNTIgMTAuNDkzMyAxMC40OTMxIDEzLjMzNTQgNyAxMy4zMzU0QzMuNTA2NjMgMTMuMzM1NCAwLjY2NDc3MSAxMC40OTMzIDAuNjY0NzcxIDYuOTk5NzhDMC42NjQ3NzEgMy41MDY1MSAzLjUwNjYzIDAuNjY0NjI3IDcgMC42NjQ2MjdaTTQuNjcwNzEgNC4zNTc3MkM0LjIyNTMxIDQuMzU3NzIgMy44NjM5OCA0LjcxODMyIDMuODYzOTggNS4xNjM4NEMzLjg2Mzk4IDUuNjA5MzYgNC4yMjUzMSA1Ljk3MDgyIDQuNjcwNzEgNS45NzA4MkM1LjExNjEgNS45NzA4MiA1LjQ3NzQzIDUuNjA5MzYgNS40Nzc0MyA1LjE2Mzg0QzUuNDc3NDMgNC43MTgzMiA1LjExNjEgNC4zNTc3MiA0LjY3MDcxIDQuMzU3NzJaTTkuMzA4NTIgNC4zNTc3MkM4Ljg2MzEyIDQuMzU3NzIgOC41MDE3OSA0LjcxODMyIDguNTAxNzkgNS4xNjM4NEM4LjUwMTc5IDUuNjA5MzYgOC44NjMxMiA1Ljk3MDgyIDkuMzA4NTIgNS45NzA4MkM5Ljc1NDE0IDUuOTcwODIgMTAuMTE0OCA1LjYwOTM2IDEwLjExNDggNS4xNjM4NEMxMC4xMTQ4IDQuNzE4MzIgOS43NTQxNCA0LjM1NzcyIDkuMzA4NTIgNC4zNTc3MlpNNC4yNTYwOSA4LjI2NUM0LjA3MjYxIDguMjY1IDMuOTIzNyA4LjQxMzY1IDMuOTIzNyA4LjU5NzMxQzMuOTIzNyA5Ljk5OTAxIDUuMDc4MDQgMTEuMTM5NCA2LjQ5NjY2IDExLjEzOTRINy42MTY3M0M5LjA1OTUgMTEuMTM5NCAxMC4xODk3IDEwLjAzNjQgMTAuMTg5NyA4LjYyODQ3QzEwLjE4OTcgOC40NDQ4MSAxMC4wNDEgOC4yOTYxNSA5Ljg1NzMgOC4yOTYxNUM5LjY3MzgzIDguMjk2MTUgOS41MjQ5MiA4LjQ0NDgxIDkuNTI0OTIgOC42Mjg0N0M5LjUyNDkyIDkuNjYzNzMgOC42ODY3OSAxMC40NzQ4IDcuNjE2NzMgMTAuNDc0OEg2LjQ5NjY2QzUuNDI2NiAxMC40NzQ4IDQuNTg4NDggOS42NDk4NiA0LjU4ODQ4IDguNTk3MzFDNC41ODg0OCA4LjQxMzY1IDQuNDM5NTcgOC4yNjUgNC4yNTYwOSA4LjI2NVoiIGZpbGw9ImJsYWNrIi8+Cjwvc3ZnPgo=');
            opacity: 0.9;
            margin-top: 2px;
          }
        }
      }
    }

    .smart-editor-context-menu-item:hover {
      background: var(--smart-ui-state-hover);
      color: var(--smart-ui-state-color-hover);
    }

    .smart-editor-context-menu-item[selected] {
      background-color: var(--smart-ui-state-selected);
      border-color: var(--smart-ui-state-border-selected);
      color: var(--smart-ui-state-color-selected);
    }

    .smart-editor-context-menu-item[disabled] {
      opacity: 0.55;
      cursor: default;
      pointer-events: none;
    }
  }
}

.smart-editor-drop-down-toolbar {

  &:not([animation="none"]) {
    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;

    &[visible] {
      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;
    }
  }

  &:not([arrow-direction]),
  &[arrow-direction="bottom"] {
    -webkit-transform-origin: bottom;
    transform-origin: bottom;
  }

  &:not([arrow]),
  &[arrow-direction="top"] {
    -webkit-transform-origin: top;
    transform-origin: top;
  }

  //smartTablePicker Custom Element Styles
  .smart-table-picker {
    overflow: hidden;
    display: block;
    background: transparent;

    .smart-table-picker-grid {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;

      &::before {
        content: attr(value);
        display: flex;
        width: 100%;
        justify-content: center;
        align-items: center;
        padding: 0.2rem 16px;
        box-sizing: border-box;
      }

      >div {
        display: flex;
      }
    }

    .smart-table-picker-cell {
      width: 15px;
      height: 15px;
      border: var(--smart-border-width) solid var(--smart-border);
      margin: 2px;
      cursor: pointer;

      &[selected] {
        border-color: var(--smart-primary);
        background: var(--smart-primary);
      }
    }

    .smart-table-picker-separator {
      width: 100%;
      height: var(--smart-border-width);
      background: var(--smart-border);
      margin: 10px 0;
    }

    .smart-table-picker-button {
      width: 100%;
      background: transparent;
      border: initial;

      button::before {
        @include iconFont;
        content: var(--smart-icon-table);
        margin-right: 10px;
        box-sizing: border-box;
      }
    }
  }
}

.smart-editor[sortable][edit-mode="blockHtml"] {

}

.smart-editor-format-block {
  &[empty]:after {
      content:  attr(data-placeholder);
      color: #aaa; /* Placeholder color */
      pointer-events: none; /* Prevent placeholder from interfering with typing */
    }
}

.smart-editor-block {
  &.smart-editor-block {
    font-size: inherit;
  }

  min-height: 16px;

  smart-input {
      line-height: inherit;
      position: relative;
      height: auto;
      --smart-font-size: '';
      --smart-font-family: inherit;

  }

  
  &:empty {
    min-height: 16px;
  }
  &[empty]:before {
      content:  attr(data-placeholder);
      color: #aaa; /* Placeholder color */
      pointer-events: none; /* Prevent placeholder from interfering with typing */
    }
  
  ul, ol {
    padding-left: 20px;
    margin:0px;
  }
}
.smart-editor-drag-line {
  position: absolute;
  z-index: 199;
  opacity: 0.8;
  height: 3px;
  background: var(--smart-primary);
  font-family: var(--smart-font-family-icon);
  transition: opacity cubic-bezier(0.6, 0.2, 0, 0.8) 0.25s;
  left: 10px;
  width: calc(100% - 20px);
}

.smart-editor-ai-menu {
  transform: scaleX(1) scaleY(0) !important;
  
  &[bottom] {
    transform-origin: bottom;
  }
  &[hide] {
    transition: transform 0.2s cubic-bezier(0.075, 0.82, 0.165, 1) !important;
    transform: scaleX(1) scaleY(0) !important;
  }

  &[visible] {
    transform: scaleX(1) scaleY(1) !important;
  } 
}
.smart-editor-ai-menu,
.smart-editor-add-menu { 
  transition: transform 0.2s cubic-bezier(0.075, 0.82, 0.165, 1) !important;
  z-index: 999999;
  .smart-tooltip-content {
    padding-left: 3px;
    padding-right: 0px;

    .smart-editor-context-menu-item-container {
      max-height: 380px;
      display: block;
      overflow: auto;
    }
  }
}
.smart-editor-insert-line {
  left: 3px;
  top: 15px;
  position: absolute;
  height: 30px;
  visibility: hidden;
  opacity: 0;
  display: none;
  &.show {
    visibility: visible;
    opacity: 0.8;
    display: none;
  }

  &:after {
    content: var(--smart-icon-plus);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    font-family: var(--smart-font-family-icon);
    font-size: var(--smart-font-size);
    cursor: pointer;
    position: absolute;
    color: var(--smart-background-color);
  }
}

.smart-editor-sortable {
  transform: translate(0, 0);
  position: absolute;
  height: 30px;
  left: -3px;
  top: 10px;
  visibility: hidden;
  opacity: 0;
  --smart-font-size:12px;
  &.show {
    visibility: visible;
    opacity: 0.8;
  }

  &:before,
  &:after {
    content: var(--smart-icon-ellipsis);
    width: var(--smart-sortable-handle-size);
    height: var(--smart-sortable-handle-size);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    font-family: var(--smart-font-family-icon);
    font-size: var(--smart-font-size);
    line-height: calc(var(--smart-sortable-handle-size) - var(--smart-font-size) / 2);
    cursor: grab;
    position: absolute;
    color: var(--smart-background-color);
  }

  &:before {
    transform: rotate(-90deg);
  }

  &:after {
    transform: rotate(90deg);
  }
}

.smart-editor {
  .action-icon,
  .date-icon {
    cursor: pointer;
  }

  .callout {
    .callout-icon {
      margin-right: 3px;
      cursor: pointer;
      &:after {
        content: attr(data-placeholder);
        width: 16px;
    }
  }
}
  .editable-list {
    .toggle-icon {
      cursor: pointer;
      transition: transform 0.3s;
      margin-right: 5px;
      user-select: none;
     
      &:after {
        content: '▶';
        width: 16px;
      }
    }
    .nested {
      display: none;
      list-style: none;
      margin-left: 20px;
      padding-left: 0;
    }

    &.expanded {
      margin-top: 2px;
     
      .toggle-icon {
        margin-right: 3px;
        &:after {
          content: '▼';
          width: 16px;
      }
      }
      .nested {
        display: block;
      }
    }
}
}

.smart-editor-callout-box {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  width: auto;
  margin-top:10px;
  padding: 5px;
  border: 1px solid var(--smart-border);
  border-radius: var(--smart-border-radius);
  background: var(--smart-surface);
  cursor: pointer;
  transition: background 0.2s;
  &:hover {
    background: var(--smart-ui-state-hover);
    color: var
  }
}

.smart-editor-ai-popup {
  position: absolute;
  display: none;
  z-index: 999999;
  font-family: var(--smart-font-family);
  width: 320px;

  .button-close {
    font-family: var(--smart-font-family-icon);
    position: absolute;
    right: 10px;
    top: 10px;
    cursor: pointer;
    font-size: 12px;
    &:after {
      content: var(--smart-icon-close);
    }
  }
  button[disabled] {
    opacity: 0.7;
    background: var(--smart-disabled);
    color:var(--smart-disabled-color);
    pointer-events: none;
  }

  .smart-editor-container {
    background-color: var(--smart-background);
    border-radius: var(--smart-border-radius);
    box-shadow: var(--smart-elevation-4);
    width: 100%;
    padding: 16px;
    text-align: center;
    box-sizing: border-box;
  }

  .smart-editor-header {
    font-size: 16px;
    font-weight: 500;
    color: var(--smart-background-color);
    margin-bottom: 16px;
  }

  .smart-editor-predefined-container {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    justify-content: center;
    margin-bottom: 16px;
  }

  .smart-editor-predefined-btn {
    padding: 4px 8px;
    background-color: var(--smart-primary);
    color: var(--smart-primary-color);
    border-radius: 20px;
    font-size: var(--smart-font-size);
    
    cursor: pointer;
    border: none;
    transition: background-color 0.3s ease;
  }

  .smart-editor-predefined-btn:hover {
    background-color: var(--smart-ui-state-selected);
    color: var(--smart-ui-state-color-selected);
  }

  .smart-editor-input-container {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
  }

  .smart-editor-input-container input {
    padding: 8px;
    border-radius: 12px;
    border: 1px solid var(--smart-border);
    font-size: var(--smart-font-size);
    outline: none;
    margin-bottom: 16px;
    transition: border 0.3s ease, box-shadow 0.3s ease;
    background-color: var(--smart-background);
  }

  .smart-editor-input-container input:focus {
    border-color: var(--smart-primary);
    box-shadow: 0 0 8px var(--smart-ui-state-primary);
  }

  .smart-editor-submit-btn {
    padding: 6px 12px;
    border-radius: 24px;
    background-color:  var(--smart-primary);
    color: var(--smart-primary-color);
    border: none;
    font-size: 16px;
    cursor: pointer;
    transition: transform 0.2s ease, background-color 0.3s ease;
  }

  .smart-editor-submit-btn:hover {
    background-color: var(--smart-ui-state-selected);
    color: var(--smart-ui-state-color-selected);
 
    transform: scale(1.01);
  }

  .smart-editor-result-box {
    background-color: var(--smart-surface);
    padding: 8px;
    margin-top: 20px;
    border-radius: 12px;
    font-size: var(--smart-font-size);
    color: var(--smart-surface-color);
    height: 150px;
    overflow-y: auto;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.1);
    text-align: left;
  }

  .smart-editor-icon-arrow-up {
    font-size: 20px;
    margin-left: 8px;
  }

  /* Progress indicator styles */
  .smart-editor-loading {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .smart-editor-spinner {
    border: 4px solid rgba(255, 255, 255, 0.3);
    border-top: 4px solid var(--smart-primary);
    border-radius: 50%;
    width: 24px;
    height: 24px;
    animation: smart-editor-spin 1s linear infinite;
  }

  @keyframes smart-editor-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

  .smart-editor-timeout-message {
    color: var(--smart-error);
    font-size: 16px;
    margin-top: 10px;
  }

  .smart-editor-keep-btn,
  .smart-editor-replace-btn {
    padding: 6px 12px;
    border-radius: 24px;
    background-color: var(--smart-primary);
    color: var(--smart-primary-color);
    border: none;
    font-size: 16px;
    cursor: pointer;
    margin-top: 16px;
    transition: background-color 0.3s ease;

    &.smart-editor-replace-btn {
      background-color: var(--smart-secondary);
      color: var(--smart-secondary-color);
    }
  }

  .smart-editor-keep-btn:hover {
    background-color: var(--smart-ui-state-selected);
    color: var(--smart-ui-state-color-selected);
  }

  /* Mobile Friendly */
  @media (max-width: 600px) {
    .smart-editor-container {
      padding: 20px;
    }

    .smart-editor-header {
      font-size: 24px;
    }

    .smart-editor-predefined-btn {
      padding: 6px 12px;
      font-size: 12px;
    }

    .smart-editor-input-container input {
      padding: 12px;
    }

    .smart-editor-submit-btn {
      padding: 10px 20px;
      font-size: 14px;
    }

    .smart-editor-result-box {
      height: 150px;
    }
  }
}


.smart-editor-date-popup {
    position: absolute;
    display: none;
    z-index: 999999;
    border-radius: 4px;
    box-shadow: var(--smart-elevation-4);
}

.smart-editor-callout {

  .callout-box:hover {
      background: #ececec;
  }
  .emoji {
      font-size: 24px;
  }
  &.dropdown {
      position: absolute;
      background: var(--smart-background);
      border: 1px solid var(--smart-border);
      display: none;
      z-index: 999999;
   
      width: 320px;
      border-radius: 4px;
      box-shadow: var(--smart-elevation-4);

      .tabs {
        display: flex;
        justify-content: space-around;
        margin-top: 10px;
        background: var(--smart-surface);
         border-top: 1px solid var(--smart-border);
    }
    .tab {
        padding: 6px;
        cursor: pointer;
        font-size: 16px;
        width: 40px;
        text-align: center;
        position: relative;
    }
    .tab:hover {
        background: var(--smart-ui-state-hover);
    }
    .tab.active {
        border-bottom: 2px solid var(--smart-primary);
    }
    .categories {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(30px, 1fr));
        gap: 5px;
        overflow-y: auto;
        margin-top: 10px;
        height: 200px;
    }
    .option {
        padding: 4px 5px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        font-size: 16px;
    }
    .option:hover {
        background: var(--smart-ui-state-hover);
    }
    .option span {
        font-size: 18px;
    }
    }
}

.smart-editor-ai-icon {
  text-decoration: none;
  cursor: pointer;
  padding: 5px;
  &:before {
  content: url('data:image/svg+xml,%3Csvg%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M16.3333%207.33333C16.3333%207.33333%2016.1328%205.44793%2015.3411%204.65887C14.5469%203.8724%2012.6667%203.66667%2012.6667%203.66667C12.6667%203.66667%2014.5521%203.46615%2015.3411%202.67447C16.1276%201.8802%2016.3333%200%2016.3333%200C16.3333%200%2016.5339%201.8854%2017.3255%202.67447C18.112%203.46093%2020%203.66667%2020%203.66667C20%203.66667%2018.1146%203.86719%2017.3255%204.65887C16.5391%205.44533%2016.3333%207.33333%2016.3333%207.33333ZM7.5%205C7.5%205%207.08594%208.8594%205.47393%2010.4739C3.85933%2012.0885%200%2012.5%200%2012.5C0%2012.5%203.8594%2012.9141%205.47393%2014.5261C7.08853%2016.1407%207.5%2020%207.5%2020C7.5%2020%207.91406%2016.1406%209.52607%2014.5261C11.1407%2012.9115%2015%2012.5%2015%2012.5C15%2012.5%2011.1406%2012.0859%209.52607%2010.4739C7.91147%208.85933%207.5%205%207.5%205ZM17.1667%2016.6667C16.7057%2016.6667%2016.3333%2017.0391%2016.3333%2017.5C16.3333%2017.9609%2016.7057%2018.3333%2017.1667%2018.3333C17.6276%2018.3333%2018%2017.9609%2018%2017.5C18%2017.0391%2017.6276%2016.6667%2017.1667%2016.6667ZM2.5%204C2.96094%204%203.33333%203.62761%203.33333%203.16667C3.33333%202.70573%202.96094%202.33333%202.5%202.33333C2.03906%202.33333%201.66667%202.70573%201.66667%203.16667C1.66667%203.62761%202.03906%204%202.5%204Z%22%20fill%3D%22black%22%2F%3E%3C%2Fsvg%3E');
  opacity: 0.9;
  margin-right: 5px;
  
  }
}

.smart-editor-file {
   color: var(--smart-background-color);
   text-decoration: none;
   background: var(--smart-surface);
   padding: 5px;
   border: 1px solid var(--smart-border);
   border-radius: var(--smart-border-radius);
   cursor: pointer;
   display: inline-block;

   &:before {
      content: var(--smart-icon-file);
      color: var(--smart-primary);
      margin-right: 5px;
      font-family: var(--smart-font-family-icon);
   }

   &.smart-icon-word {
      &:before {
         content: var(--smart-icon-word);
         color: #185ABD;
      }
   }

   &.smart-icon-pdf {
    &:before {
       content: var(--smart-icon-pdf);
       color: #E50012;
    }
 }

 &.smart-icon-image {
  &:before {
     content: var(--smart-icon-image);
  }
}

&.smart-icon-excel {
  &:before {
    content: var(--smart-icon-excel);
    color: #217346;
  }
}
 &.smart-icon-video {
  &:before {
     content: var(--smart-icon-video);
     color: #C43E1C;
  }
}

  &.smart-icon-music {
    &:before {
       content: var(--smart-icon-music);
       color: #C5C33C;
    }
  }

  &.smart-icon-archive {
    &:before {
       content: var(--smart-icon-archive);
    }
  }
  &.smart-icon-text {
    &:before {
       content: var(--smart-icon-text);
    }
  }

  &.smart-icon-powerpoint {
    &:before {
       content: var(--smart-icon-powerpoint);
       color: #C43E1C;
    }
  }
}

.smart-editor {
  .smart-editor-tab-label {
    display: none;
  }
}
.smart-editor-tabs {
  display: flex;
  align-items: center;
  padding-left: 30px;
  gap: 5px;
  position: relative;
  background: var(--smart-surface);

  .smart-editor-tabs-divider {
    border-top: 1px solid var(--smart-border);
    position:absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 1px;
    z-index: 1;
  }
  .smart-editor-tab {
      padding: 10px 20px;
      background: var(--smart-surface);
      color: var(--smart-surface-color);
      cursor: pointer;
      transition: all 0.3s ease;
      position: relative;
      border-bottom: 2px solid transparent;
      outline: none;
      input {
        outline: none;
         border: none;
      }
      
      &.active {
        background: var(--smart-background);
        color: var(--smart-primary);
        border-bottom: 2px solid var(--smart-primary);
        font-weight: bold;
        z-index: 2;
      }

      &:hover {
        background: var(--smart-ui-state-hover);
        color: var(--smart-ui-state-color-hover);
    }
  }


  .smart-editor-tab-plus {
      background: var(--smart-primary);
      color: var(--smart-primary-color);
      border: none;
      cursor: pointer;
      font-size: 18px;
      border-radius: 50%;
      transition: background 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
      outline: none;

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

smart-editor[popup] {
   > .smart-container {
    grid-template-rows: none;
  }
  .smart-editor-content-container {
    grid-template-columns: 1fr auto;

    .smart-editor-tabs {
      padding-left: 0px;
      flex-direction: column;
    }
  }
}

.smart-editor-toolbar[popup] {
  flex-wrap: wrap;
  position: absolute;
  top: 800px;
  left: 0px;
  background: var(--smart-surface);
  display: flex;
  width: 800px;
  box-shadow: var(--smart-elevation-8);
  padding: 4px;
  z-index: 99;
  overflow: hidden;

  .smart-editor-toolbar-items-primary {
    display: flex;
    flex-wrap: wrap;
  }
}

.smart-element {
  div[data-block-2],
  .smart-editor-two-columns {
    display: grid;
    grid-template-columns: 45% 45%;
    gap: 10px;
  }
  .smart-editor-three-columns {
    display: grid;
    grid-template-columns: 33% 33% 33%;
    gap: 10px;
  }
  .smart-editor-four-columns {
    display: grid;
    grid-template-columns: 25% 25% 25% 25%;
    gap: 10px;
  }

  div[data-block-n],
  .smart-editor-n-columns-block {
    padding: 5px;
    border: 1px solid transparent;
    &:hover {
      border: 1px solid var(--smart-border);
    }
  }
}
@import 'rtl/_editor';