/*
 * Copyright (C) 2015 - 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/>.
 */

/* Functional Variables */
$menu-item-text-hover-focus-color: $ic-font-color-dark;
$menu-item-text-disabled-color: $ic-font-color-dark;
$menu-item-keyboard-shortcut-color: $ic-font-color-dark;

[dir=rtl] {
  .mce-container, .mce-container *, .mce-widget, .mce-widget *, .mce-reset {

    text-align: right; /* stylelint-disable-line declaration-property-value-disallowed-list */
  }
}

// puts the blue glow around each little color sqare in the tinyMCE text/bg color picker
.mce-container .mce-grid td.mce-grid-cell div:focus{
  outline: thin dotted #333;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
  text-decoration: none;
}

.mce-container .mce-primary {
  @if $use_high_contrast {
    @include canvas-button(#0770A3, $ic-color-light);
  } @else {
    @include canvas-button(
      var(--ic-brand-button--primary-bgd),
      var(--ic-brand-button--primary-text),
      false,
      var(--ic-brand-button--primary-bgd-darkened-5),
      var(--ic-brand-button--primary-bgd-darkened-15)
    );
  }
}

.mce-container.mce-tinymce .mce-menu-item,
.mce-container.mce-tinyrce .mce-menu-item {
  .mce-disabled {
    .mce-text {
      color: $menu-item-text-disabled-color;
    }
  }
  .mce-menu-shortcut {
    color: $menu-item-keyboard-shortcut-color;
  }

  &:focus, &:hover {
    .mce-ico, .mce-menu-shortcut, .mce-text {
      color: $menu-item-text-hover-focus-color;
    }
    .mce-caret {
      border-#{direction(left)}-color: $menu-item-text-hover-focus-color
    }
  }
}

.mce-container.mce-tinymce .mce-btn.mce-active:after {
  border-bottom: 4px solid $ic-font-color-dark;
}

.mce-container.mce-tinymce .mce-btn.mce-active:focus:after {
  border-bottom-color: var(--ic-link-color);
}

.mce-container.mce-tinymce :focus,
.mce-container.mce-tinyrce :focus{
  outline: 2px solid var(--ic-link-color);
}
