// New Theme Editor
//================================================== //

// Dependencies
// toolbar/toolbar-new

.toolbar.formatter-toolbar,
.flex-toolbar.formatter-toolbar {
  .separator {
    height: 18px;
    margin: 1px 11px 0 7px;
  }

  [class^='btn'] {
    margin-top: 3px;
    min-height: 24px;

    &:first-child {
      margin-left: $ids-number-spacing-base;
    }

    &.btn-editor .icon:not(.icon-dropdown) {
      height: 18px;
      margin-block-start: -4px;
      margin-block-end: 0;
      margin-inline-start: 1px;
      margin-inline-end: 1px;
      width: 18px;
    }

    &.btn-editor[data-element='h3'],
    &.btn-editor[data-element='h4'] {
      margin-right: $ids-number-spacing-base;
      min-width: 32px;

      .icon {
        margin-left: auto;
        width: 30px;
      }
    }

    &.btn-editor[data-element='foreColor'] .icon,
    &.btn-editor[data-element='foreColor'] .icon {
      margin-right: 4px;
      margin-top: auto;
    }

    &.btn-editor.colorpicker-editor-button {
      right: 7px;

      &.is-open > span.swatch {
        background-color: $editor-btn-active-color;
      }

      > span.swatch {
        background-color: $editor-btn-color;
        display: flex;
        height: 2.7px;
        position: relative;
        top: 16px;
        inset-inline-start: 8px;
        width: 15px;
        border-radius: 0;
        z-index: 3;
      }
    }

    &.btn-editor[data-element='b'] .icon {
      height: 18px;
      margin: -4px 0 0 2px;
      width: 18px;
    }

    &.btn-editor[data-element='i'] .icon {
      height: 18px;
      margin: -4px 0 0 1px;
      width: 18px;
    }

    &.btn-editor[data-element='u'] .icon {
      height: 18px;
      margin: -5px 0 0 1px;
      width: 18px;
    }

    &.btn-editor[data-element='strike'] .icon {
      height: 18px;
      margin: -4px 0 0 1px;
      width: 18px;
    }

    &.btn-editor[data-element='foreColor'] {
      .icon {
        height: 18px;
        margin-block-start: -7px;
        margin-block-end: 0;
        margin-inline-start: 3px;
        margin-inline-end: 0;
        width: 18px;
        position: relative;
        inset-inline-start: 3px;
      }

      .trigger .icon {
        margin: -6px 0 0 1px;
      }
    }

    &.btn-editor[data-element='ul'] {
      margin-right: 10px;

      .icon {
        height: 18px;
        left: 0 !important;
        margin: -3px 0 1px;
        width: 18px;
      }
    }

    &.btn-editor[data-element='a'] {
      .icon {
        height: 18px;
        margin: -4px 1px 0;
        width: 18px;
      }
    }

    &.btn-editor[data-action='insertunorderedlist'] {
      .icon {
        left: 8px;
        position: relative;
      }
    }

    &.btn-editor[data-action='source'] {
      position: relative;
      inset-inline-start: -6px;
    }

    &.btn-editor[data-action='visual'] {
      position: relative;
      inset-inline-start: -7px;
    }

    &.btn-editor .icon.html-icon {
      height: 19px;
      margin-block-start: -4px;
      margin-block-end: 0;
      margin-inline: -10px;
      width: 70px;
      position: relative;
      inset-inline-start: -9px;
    }

    &.btn-editor .icon.visual-icon {
      height: 19px;
      margin: -4px -7px 0;
      width: 70px;
      position: relative;
      inset-inline-start: -13px;
    }
  }

  .more {
    [class^='btn'].btn-editor .icon:not(.icon-dropdown) {
      height: 18px;
      margin: -6px -1px 0;
      width: 19px;
    }
  }
}

.editor-container .icon-dirty {
  top: 61px;
}

.editor {
  p {
    line-height: 2.4rem;
  }
}

.is-safari {
  .flex-toolbar.formatter-toolbar {
    > * {
      display: unset;
    }
  }
}

html[dir='rtl'] {
  .flex-toolbar.formatter-toolbar .btn-generative svg {
    inset-inline-start: -2px;
    inset-block-start: 1px;
  }

  .flex-toolbar.formatter-toolbar [class^='btn'].btn-editor .icon.html-icon {
    inset-inline-start: 9px;
  }

  .flex-toolbar.formatter-toolbar {
    [class^='btn'] {
      &[data-action='visual'] {
        margin-right: unset;
      }

      &.btn-editor .icon.visual-icon {
        inset-inline-start: 13px;
      }
    }
  }
}