/*
 * Copyright (C) 2019 - present Instructure, Inc.
 *
 * This file is part of Canvas.
 *
 * Canvas is free software: you can redistribute it and/or modify it under
 * the terms of the GNU Affero General Public License as published by the Free
 * Software Foundation, version 3 of the License.
 *
 * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
 * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
 * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
 * details.
 *
 * You should have received a copy of the GNU Affero General Public License along
 * with this program. If not, see <http://www.gnu.org/licenses/>.
 */

/*
 * This file started as modified copy of skin.css generated by tinymce's skin tool
 * (see https://github.com/tinymce/oxide for details). Then I diffed it with
 * the tinymce/skins/ui/oxide/skin.css file and deleted anything that was unique
 * or that I though I might eventually have to change (mostly colors).
 * See ./skin.css for the full css file that's being kept for reference.
 *
 * Where the colors are left hard-coded, they are different from the default skin,
 * and are what came out of the skin builder when the canvas theme colors were used.
 * I didn't find any of those elements in the RCE, so I didn't want to guess what it
 * should look like.
 */
.root {
  background-color: var(--canvasBackgroundColor);
}

:global {
  /* not part of the skin, but necessary to properly size the RCE's textarea */
  .rce-wrapper textarea {
    width: 100%;
    box-sizing: border-box;
    min-height: auto;
  }

  .tox,
  .tox *:not(svg) {
    color: inherit;
    font-family: inherit;
  }

  /* fix RTL. tinyMCE tries to do this in its default theme but it's base style is too specific so when it does it, it isn't specific enough to override the base */
  [dir='rtl'] .tox :not(svg) {
    direction: rtl;
  }

  .tox:not(.tox-tinymce-inline) .tox-editor-header {
    background-color: var(--canvasBackgroundColor);
  }

  .tox-tinymce-aux {
    font-family: var(--canvasFontFamily);
  }
  .tox .tox-button {
    background-color: var(--canvasPrimaryButtonBackground);
    font-family: var(--canvasFontFamily);
    font-weight: var(--canvasButtonFontWeight);
    font-size: var(--canvasButtonFontSize);
    color: var(--canvasPrimaryButtonColor);
    border-color: var(--canvasPrimaryButtonBorderColor);
    line-height: calc(var(--canvasButtonLineHeight) - 2px);
    padding: var(--canvasButtonPadding);
  }
  .tox .tox-button[disabled] {
    opacity: 0.5;
    border-color: inherit;
    color: inherit;
  }
  .tox .tox-button:focus:not(:disabled) {
    background-color: var(--canvasPrimaryButtonBackground);
    color: var(--canvasPrimaryButtonColor);
    border-color: var(--canvasBackgroundColor);
    box-shadow: var(--canvasFocusBoxShadow);
  }
  .tox .tox-button:hover:not(:disabled) {
    background-color: var(--canvasPrimaryButtonHoverBackground);
    color: var(--canvasPrimaryButtonHoverColor);
  }
  .tox .tox-button:active:not(:disabled) {
    background-color: var(--canvasPrimaryButtonBackground);
    border-color: var(--canvasPrimaryButtonBorderColor);
    color: var(--canvasPrimaryButtonColor);
  }
  .tox .tox-button--secondary {
    background-color: var(--canvasSecondaryButtonBackground);
    border-color: var(--canvasSecondaryButtonBorderColor);
    color: var(--canvasSecondaryButtonColor);
  }
  .tox .tox-button--secondary[disabled] {
    background-color: inherit;
    border-color: var(--canvasSecondaryButtonBorderColor);
    color: inherit;
    opacity: 0.5;
  }
  .tox .tox-button--secondary:focus:not(:disabled) {
    background-color: inherit;
    border-color: var(--canvasFocusBorderColor);
    color: inherit;
  }
  .tox .tox-button--secondary:hover:not(:disabled) {
    background-color: var(--canvasSecondaryButtonHoverBackground);
    border-color: var(--canvasSecondaryButtonBorderColor);
    color: var(--canvasSecondaryButtonHoverColor);
  }
  .tox .tox-button--secondary:active:not(:disabled) {
    background-color: inherit;
    border-color: var(--canvasSecondaryButtonBorderColor);
    color: inherit;
  }
  .tox .tox-button-link {
    font-family: var(--canvasFontFamily);
  }
  .tox .tox-button--naked {
    background: var(--canvasButtonBackground);
    border-color: var(--canvasButtonBorderColor);
    color: var(--canvasButtonColor);
  }
  .tox .tox-button--naked:hover:not(:disabled) {
    background-color: var(--canvasButtonHoverBackground);
    border-color: var(--canvasButtonBorderColor);
    color: var(--canvasButtonHoverColor);
  }
  .tox .tox-button--naked:focus:not(:disabled) {
    background-color: var(--canvasButtonBackground);
    color: var(--canvasButtonColor);
    border-color: var(--canvasBackgroundColor);
    box-shadow: var(--canvasFocusBoxShadow);
  }
  .tox .tox-button--naked:active:not(:disabled) {
    background-color: inherit;
    color: inherit;
  }
  .tox .tox-button--naked.tox-button--icon {
    color: var(--canvasButtonColor);
  }
  .tox .tox-button--naked.tox-button--icon:hover:not(:disabled) {
    background: var(--canvasButtonHoverBackground);
    color: var(--canvasButtonHoverColor);
  }
  .tox .tox-checkbox__icons .tox-checkbox-icon__unchecked svg {
    fill: rgba(45, 59, 69, 0.3);
  }
  .tox .tox-checkbox__icons .tox-checkbox-icon__indeterminate svg {
    fill: var(--canvasTextColor);
  }
  .tox .tox-checkbox__icons .tox-checkbox-icon__checked svg {
    fill: var(--canvasTextColor);
  }
  .tox input.tox-checkbox__input:focus + .tox-checkbox__icons {
    box-shadow: var(--canvasFocusBoxShadow);
  }

  .tox .tox-collection--list .tox-collection__group {
    border-color: var(--canvasBorderColor);
  }
  .tox .tox-collection__group-heading {
    background-color: #e3e6e8;
    color: rgba(45, 59, 69, 0.6);
  }
  .tox .tox-collection__item {
    color: var(--canvasTextColor);
  }
  .tox .tox-collection__item--state-disabled {
    background-color: unset;
    opacity: 0.5;
    cursor: default;
  }
  .tox .tox-collection--list .tox-collection__item--enabled {
    color: contrast(inherit, var(--canvasTextColor), #fff);
  }
  .tox .tox-collection--list .tox-collection__item--active {
    background-color: var(--activeMenuItemBackground);
    color: var(--activeMenuItemLabelColor);
  }
  .tox
    .tox-collection--list
    .tox-collection__item--active:not(.tox-collection__item--state-disabled) {
    background-color: var(--activeMenuItemBackground);
    color: var(--activeMenuItemLabelColor);
  }
  .tox .tox-collection--toolbar .tox-collection__item--enabled {
    background-color: #cbced1;
    color: var(--canvasTextColor);
  }
  .tox .tox-collection--toolbar .tox-collection__item--active {
    background-color: #e0e2e3;
    color: var(--canvasTextColor);
  }
  .tox .tox-collection--grid .tox-collection__item--enabled {
    background-color: #cbced1;
    color: var(--canvasTextColor);
  }
  .tox .tox-collection--grid .tox-collection__item--active {
    background-color: #e0e2e3;
    color: var(--canvasTextColor);
  }
  .tox .tox-collection--list .tox-collection__item-icon:first-child {
    margin-right: 8px;
  }
  .tox .tox-collection__item-accessory {
    color: rgba(45, 59, 69, 0.6);
  }
  .tox .tox-sv-palette {
    border: 1px solid black;
    box-sizing: border-box;
  }
  .tox .tox-hue-slider {
    border: 1px solid black;
  }
  .tox .tox-rgb-form input.tox-invalid {
    /* Need !important to override Chrome's focus styling unfortunately */
    border-color: var(--canvasErrorColor) !important;
  }
  .tox .tox-rgb-form {
    padding: 2px; /* make room for the canvas focus ring on contained input elements */
  }
  .tox .tox-swatches__picker-btn:hover {
    background: #e0e2e3;
  }
  .tox .tox-comment-thread {
    background: var(--canvasBackgroundColor);
  }
  .tox .tox-comment {
    background: var(--canvasBackgroundColor);
    border-color: var(--canvasBorderColor);
    box-shadow: 0 4px 8px 0 rgba(45, 59, 69, 0.1);
  }
  .tox .tox-comment__header {
    color: var(--canvasTextColor);
  }
  .tox .tox-comment__date {
    color: rgba(45, 59, 69, 0.6);
  }
  .tox .tox-comment__body {
    color: var(--canvasTextColor);
  }
  .tox .tox-comment__expander p {
    color: rgba(45, 59, 69, 0.6);
  }
  .tox .tox-comment-thread__overlay::after {
    background: var(--canvasBackgroundColor);
  }
  .tox .tox-comment__overlay {
    background: var(--canvasBackgroundColor);
  }
  .tox .tox-comment__loading-text {
    color: var(--canvasTextColor);
  }
  .tox .tox-comment__overlaytext p {
    background-color: var(--canvasBackgroundColor);
    color: var(--canvasTextColor);
  }
  .tox .tox-comment__busy-spinner {
    background-color: var(--canvasBackgroundColor);
  }
  .tox .tox-user__avatar svg {
    fill: rgba(45, 59, 69, 0.6);
  }
  .tox .tox-user__name {
    color: rgba(45, 59, 69, 0.6);
  }
  .tox .tox-dialog-wrap__backdrop {
    background-color: rgba(255, 255, 255, 0.75);
  }
  .tox .tox-dialog {
    background-color: var(--canvasBackgroundColor);
    border-color: var(--canvasBorderColor);
    box-shadow: var(--canvasModalShadow);
  }
  .tox .tox-dialog__header {
    background-color: var(--canvasBackgroundColor);
    color: var(--canvasTextColor);
    border-bottom: 1px solid var(--canvasBorderColor);
    padding: var(--canvasModalHeadingPadding);
    margin: 0;
  }
  .tox .tox-dialog__title {
    font-family: var(--canvasFontFamily);
    font-size: var(--canvasModalHeadingFontSize);
    font-weight: var(--canvasModalHeadingFontWeight);
  }
  .tox .tox-dialog__body {
    color: var(--canvasTextColor);
    padding: var(--canvasModalBodyPadding);
  }
  .tox .tox-dialog__body-nav-item {
    color: rgba(45, 59, 69, 0.6);
    &:focus {
      box-shadow: var(--canvasFocusBoxShadow);
    }
  }
  .tox .tox-dialog__body-nav-item--active {
    border-bottom-color: var(--canvasBrandColor);
    color: var(--canvasBrandColor);
  }
  .tox .tox-dialog__footer {
    background-color: var(--canvasModalFooterBackground);
    border-top: 1px solid var(--canvasBorderColor);
    padding: var(--canvasModalFooterPadding);
    margin: 0;
  }
  .tox .tox-dialog__table tbody tr {
    border-bottom-color: var(--canvasBorderColor);
  }
  .tox .tox-dropzone {
    background: var(--canvasBackgroundColor);
    border: 2px dashed var(--canvasBorderColor);
  }
  .tox .tox-dropzone p {
    color: rgba(45, 59, 69, 0.6);
  }
  .tox .tox-edit-area {
    border: 1px solid var(--canvasBorderColor);
    border-radius: 3px;
  }
  .tox .tox-edit-area__iframe {
    background-color: var(--canvasBackgroundColor);
    border: var(--canvasFocusBorderWidth) solid transparent;
  }
  .tox.tox-inline-edit-area {
    border-color: var(--canvasBorderColor);
  }
  .tox .tox-form__group {
    padding: 2px;
  }
  .tox .tox-control-wrap .tox-textfield {
    padding-right: 32px;
  }
  .tox .tox-control-wrap__status-icon-invalid svg {
    fill: var(--canvasErrorColor);
  }
  .tox .tox-control-wrap__status-icon-unknown svg {
    fill: var(--canvasWarningColor);
  }
  .tox .tox-control-wrap__status-icon-valid svg {
    fill: var(--canvasSuccessColor);
  }
  .tox .tox-color-input span {
    border-color: rgba(45, 59, 69, 0.2);
  }
  .tox .tox-color-input span:focus {
    border-color: var(--canvasBrandColor);
  }
  .tox .tox-label,
  .tox .tox-toolbar-label {
    color: rgba(45, 59, 69, 0.6);
  }
  .tox .tox-form__group {
    margin: var(--canvasFormElementMargin);
  }
  .tox .tox-form__group:last-child {
    margin: 0;
  }
  .tox .tox-form__group .tox-label {
    color: var(--canvasFormElementLabelColor);
    margin: var(--canvasFormElementLabelMargin);
    font-size: var(--canvasFormElementLabelFontSize);
    font-weight: var(--canvasFormElementLabelFontWeight);
  }
  .tox .tox-form__group--error {
    color: var(--canvasErrorColor);
  }
  .tox .tox-textfield,
  .tox .tox-selectfield select,
  .tox .tox-textarea,
  .tox .tox-toolbar-textfield {
    background-color: var(--canvasBackgroundColor);
    border-color: var(--canvasBorderColor);
    color: var(--canvasTextColor);
    font-family: var(--canvasFontFamily);
  }
  .tox .tox-textfield:focus,
  .tox .tox-selectfield select:focus,
  .tox .tox-textarea:focus {
    /*border-color: var(--canvasFocusBorderColor);*/
    border-color: var(--canvasBorderColor);
    box-shadow: var(--canvasFocusBoxShadow);
  }
  .tox .tox-naked-btn {
    color: var(--canvasButtonColor);
  }
  .tox .tox-naked-btn svg {
    fill: var(--canvasButtonColor);
  }
  .tox .tox-insert-table-picker > div {
    border-color: #cccccc;
  }
  .tox .tox-insert-table-picker .tox-insert-table-picker__selected {
    background-color: var(--tableSelectorHighlightColor);
    border-color: var(--tableSelectorHighlightColor);
  }
  .tox-selected-menu .tox-insert-table-picker {
    background-color: var(--canvasBackgroundColor);
  }
  .tox .tox-insert-table-picker__label {
    color: var(--canvasTextColor);
  }
  .tox .tox-menu {
    background-color: var(--canvasBackgroundColor);
    border-color: var(--canvasBorderColor);
  }
  .tox .tox-menubar {
    background-color: var(--canvasBackgroundColor);
  }
  .tox .tox-mbtn {
    color: var(--canvasButtonColor);
  }
  .tox .tox-mbtn[disabled] {
    opacity: 0.5;
  }
  .tox .tox-mbtn:hover:not(:disabled) {
    background: var(--toolbarButtonHoverBackground);
    color: var(--canvasButtonColor);
  }
  .tox .tox-mbtn:focus:not(:disabled) {
    background-color: transparent;
    color: var(--canvasButtonColor);
    border-color: var(--canvasBackgroundColor);
    box-shadow: var(--canvasFocusBoxShadow);
  }
  .tox .tox-mbtn--active {
    background: var(--toolbarButtonHoverBackground);
    color: var(--canvasButtonColor);
  }
  .tox .tox-notification {
    background-color: var(--canvasBackgroundColor);
    border-color: #c5c5c5;
  }
  .tox .tox-notification--success {
    background-color: #dff0d8;
    border-color: var(--canvasSuccessColor);
  }
  .tox .tox-notification--error {
    background-color: #f2dede;
    border-color: var(--canvasErrorColor);
  }
  .tox .tox-notification--warn {
    background-color: #fcf8e3;
    border-color: var(--canvasWarningColor);
  }
  .tox .tox-notification--info {
    background-color: #d9edf7;
    border-color: var(--canvasInfoColor);
  }
  .tox .tox-notification__body {
    color: var(--canvasTextColor);
  }
  .tox .tox-pop__dialog {
    background-color: var(--canvasBackgroundColor);
    border-color: var(--canvasBorderColor);
  }
  .tox .tox-pop.tox-pop--bottom::before {
    border-color: var(--canvasBorderColor) transparent transparent transparent;
  }
  .tox .tox-pop.tox-pop--top::before {
    border-color: transparent transparent var(--canvasBorderColor) transparent;
  }
  .tox .tox-pop.tox-pop--left::before {
    border-color: transparent var(--canvasBorderColor) transparent transparent;
  }
  .tox .tox-pop.tox-pop--right::before {
    border-color: transparent transparent transparent var(--canvasBorderColor);
  }
  .tox .tox-slider {
    width: 100%;
  }
  .tox .tox-slider__rail {
    border-color: var(--canvasBorderColor);
  }
  .tox .tox-slider__handle {
    background-color: var(--canvasBrandColor);
  }
  .tox .tox-spinner > div {
    background-color: rgba(45, 59, 69, 0.6);
  }
  /* deleted all the .tox-statusbar rules, since we use our own custom statusbar */
  .tox .tox-tbtn {
    border-style: none;
    color: var(--canvasButtonColor);
    position: relative;
  }

  .tox .tox-tbtn svg {
    fill: var(--canvasButtonColor);
  }

  .tox .tox-tbtn.tox-tbtn--enabled {
    background: inherit;
  }

  .tox .tox-tbtn:focus,
  .tox .tox-split-button:focus {
    background: var(--canvasBackgroundColor);
    color: var(--canvasButtonColor);
    box-shadow: var(--canvasFocusBoxShadow);
  }

  .tox .tox-tbtn:hover,
  .tox .tox-split-button:hover,
  .tox .tox-tbtn.tox-tbtn--enabled:hover,
  .tox .tox-split-button .tox-tbtn.tox-split-button__chevron:hover {
    background: var(--toolbarButtonHoverBackground);
    color: var(--canvasButtonColor);
  }

  .tox-tbtn.tox-split-button__chevron {
    position: relative;
  }

  /* styling lifted from instui Tabs */
  .tox .tox-tbtn.tox-tbtn--enabled::after {
    position: absolute;
    top: -3px;
    content: '\\25BC';
    text-align: center;
    height: 8px;
    font-size: 8px;
    width: 100%;
    color: var(--canvasEnabledColor);
  }

  /* the split button is not enabled and the chevron has been clicked to open the popup
   * hide the enabled bar that's under just the chevron
   */
  .tox-tbtn.tox-split-button__chevron.tox-tbtn--enabled::after {
    display: none;
  }

  .tox .tox-tbtn--disabled,
  .tox .tox-tbtn--disabled:hover,
  .tox .tox-tbtn:disabled,
  .tox .tox-tbtn:disabled:hover {
    opacity: 0.5;
  }
  .tox .tox-tbtn--disabled svg,
  .tox .tox-tbtn--disabled:hover svg,
  .tox .tox-tbtn:disabled svg,
  .tox .tox-tbtn:disabled:hover svg {
    /* stylelint-disable-line no-descending-specificity */
    opacity: 0.5;
  }
  .tox .tox-tbtn__select-chevron svg {
    fill: var(--canvasButtonColor);
    width: 10px;
    height: 10px;
  }

  .tox .tox-split-button__chevron svg {
    fill: var(--canvasButtonColor);
    width: 10px;
    height: 10px;
  }
  .tox .tox-split-button.tox-tbtn--disabled:hover,
  .tox .tox-split-button.tox-tbtn--disabled:focus,
  .tox .tox-split-button.tox-tbtn--disabled .tox-tbtn:hover,
  .tox .tox-split-button.tox-tbtn--disabled .tox-tbtn:focus {
    opacity: 0.5;
  }
  .tox .tox-toolbar {
    background-color: var(--canvasBackgroundColor);
    border-top: 1px solid var(--canvasBorderColor);
  }
  .tox .tox-toolbar__group:not(:last-of-type) {
    border-right: 1px solid var(--canvasBorderColor);
  }
  .tox .tox-tooltip__body {
    background-color: var(--canvasTextColor);
    box-shadow: 0 2px 4px rgba(45, 59, 69, 0.3);
    color: rgba(255, 255, 255, 0.75);
  }
  .tox .tox-tooltip--down .tox-tooltip__arrow {
    border-top-color: var(--canvasTextColor);
  }
  .tox .tox-tooltip--up .tox-tooltip__arrow {
    border-bottom-color: var(--canvasTextColor);
  }
  .tox .tox-tooltip--right .tox-tooltip__arrow {
    border-left-color: var(--canvasTextColor);
  }
  .tox .tox-tooltip--left .tox-tooltip__arrow {
    border-right-color: var(--canvasTextColor);
  }
  .tox .tox-well {
    border-color: var(--canvasBorderColor);
  }
  .tox .tox-custom-editor {
    border-color: var(--canvasBorderColor);
  }
  .tox a {
    color: var(--canvasLinkColor);
  }
  .tox.tox-tinymce {
    border-style: none;
  }
  /*
  * .tox-toolbar is the regular wrapping toolbar
  * .tox-toolbar-overlord and .tox-toolbar__primary crop up when toolbar_drawer: 'floating'
  *
  * These rules create the short separater between toolbar sections
  */
  .tox-editor-container .tox-toolbar,
  .tox-editor-container .tox-toolbar-overlord {
    background-image: none;
    margin-bottom: 5px;
  }
  .tox-editor-container .tox-toolbar__primary {
    background-image: none;
  }

  /* tinymce 5.3 picked up a border since 5.0 */
  .tox .tox-menubar + .tox-toolbar-overlord .tox-toolbar__primary {
    border-style: none;
  }

  .tox .tox-toolbar .tox-toolbar__group,
  .tox .tox-toolbar-overlord .tox-toolbar__group,
  .tox-toolbar__overflow .tox-toolbar__group,
  .tox:not([dir='rtl']) .tox-toolbar__group:not(:last-of-type),
  .tox[dir='rtl'] .tox-toolbar__group:not(:last-of-type) {
    border-style: none;
  }
  .tox-toolbar .tox-toolbar__group::after, /* regular toolbar */
  .tox-toolbar-overlord .tox-toolbar__group::after, /* wrapping toolbar */
  .tox-toolbar__overflow .tox-toolbar__group::after, /* floating toolbar */
  .tox-tinymce-aux .tox-toolbar .tox-toolbar__group::after {
    /* popup toolbar */
    content: '';
    display: inline-block;
    box-sizing: border-box;
    border-inline-end: 1px solid var(--canvasBorderColor);
    width: 8px;
    height: 24px;
  }
  .tox-toolbar .tox-toolbar__group:last-child::after,
  .tox-toolbar-overlord .tox-toolbar__group:last-child::after,
  .tox-toolbar__overflow .tox-toolbar__group:last-child::after,
  .tox-tinymce-aux .tox-toolbar .tox-toolbar__group:last-child::after {
    border-inline-end-width: 0;
    padding-inline-start: 0;
    width: 0;
  }

  .tox .tox-tbtn--bespoke .tox-tbtn__select-label {
    width: auto;
    padding-inline-end: 0;
  }

  .tox .tox-tbtn {
    box-sizing: border-box;
  }

  .tox .tox-tbtn,
  .tox .tox-split-button,
  .tox .tox-tbtn--select {
    border-style: none;
    margin: 2px 2px 3px;
  }

  .tox .tox-split-button .tox-tbtn {
    margin-inline-end: 0;
  }
  .tox .tox-split-button .tox-tbtn.tox-split-button__chevron {
    margin-inline-start: 0;
  }

  .tox .tox-edit-area.active,
  .tox .tox-edit-area.active iframe {
    border-color: var(--canvasFocusBorderColor);
  }

  .tox .tox-split-button .tox-tbtn {
    margin-inline-end: 0;
  }
  .tox .tox-split-button .tox-tbtn.tox-split-button__chevron {
    margin-inline-start: -6px;
    background-color: var(--canvasBackgroundColor);
  }

  .tox .tox-split-button:hover .tox-split-button__chevron {
    background: var(--canvasBackgroundColor);
    color: var(--canvasButtonColor);
    box-shadow: none;
  }

  .tox .tox-tbtn:hover.tox-split-button__chevron,
  .tox .tox-tbtn:focus.tox-split-button__chevron {
    box-shadow: none;
  }

  .tox .tox-toolbar__primary {
    border-width: 0;
  }

  .tox-tbtn.tox-tbtn--select .tox-icon.tox-tbtn__icon-wrap {
    margin-inline-end: 4px;
  }

  /* MAKE INSTUI ICONS THE SAME SIZE AS THE DEFAULT TINYMCE ONES */
  /* this is because instUI icons don't have a "height" attribute like tinymce ones do, so this will make them consistent */
  .tox .tox-icon svg:not([height]) {
    height: 16px;
  }
  /* this is for instUI icons that that dropdown from a SplitButton like in our advlist plugin */
  .tox .tox-collection__item-icon svg:not([height]) {
    height: 30px;
  }

  .tox-selectfield__icon-js svg {
    width: 10px;
    height: 10px;
  }

  /* not part of tinymce, but a convenient place to add a style I need */
  [data-canvascontenttray-content]:focus {
    outline-color: var(--canvasFocusBorderColor);
  }
}