//
// Global styling
//

@tinymce-border-color: @border-color;
@tinymce-border-radius: 10px;
@tinymce-border-width: 2px;
@tinymce-box-shadow: none;
@tinymce-separator-color: darken(@border-color, 4.5%);
@editor-header-inline-background-color: @background-color;

.tox-tinymce {
  border: @tinymce-border-width solid @tinymce-border-color;
  border-radius: @tinymce-border-radius;
  box-shadow: @tinymce-box-shadow;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  font-family: @font-stack;
  overflow: hidden;
  position: relative;
  visibility: inherit !important;
}

// Place the border/shadow on the header in inline mode instead of the root component
.tox.tox-tinymce-inline {
  border: none;
  box-shadow: none;
  overflow: initial;

  .tox-editor-container {
    overflow: initial;
  }

  .tox-editor-header {
    background-color: @editor-header-inline-background-color;
    border: @tinymce-border-width solid @tinymce-border-color;
    border-radius: @tinymce-border-radius;
    box-shadow: @tinymce-box-shadow;
    overflow: hidden;
  }
}

.tox-tinymce-aux {
  font-family: @font-stack;
  z-index: @z-index-sink;
}

// Reset focus states
.tox-tinymce *:focus,
.tox-tinymce-aux *:focus {
  outline: none;
}

// Reset firefox focus states
button::-moz-focus-inner {
  border: 0;
}

// RTL
.tox[dir=rtl] {
  // Rotates configured icons 180 degrees when rendering in RTL
  .tox-icon--flip svg {
    transform: rotateY(180deg);
  }
}