/*
 * 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/>.
 */

@import 'base/environment';
@import 'components/ic-reset';
@import 'components/ic-typography';

// the first line of public/javascripts/tinymce/jscripts/tiny_mce/themes/advanced/skins/default/content.css
// sets these to undesirable values, rather than modify that vendor file, we just override them here
// to match the rest of the content in canvas
body {
  margin: 0;
}

body.elementary-theme {
  font-family: 'Balsamiq Sans', $ic-font-family;
}

body.default-theme {
  font-family: inherit;
}

* {
  box-sizing: border-box;
}

td {
  margin: 0;
}

.mce-content-body {
  box-sizing: border-box;
  padding: 11px;
  td {
    padding: 2px;
    min-width: 20px;
  }
}

.mce-item-table,
.mce-item-table td,
.mce-item-table th,
.mce-item-table caption,
.mce-item-visual-aid {
  border: 1px dashed #888;
}

.mce-item-table tr {
  height: 20px;
}

.mce-item-table td {
  padding: 2px;
  min-width: 20px;
}

// ic-reset makes these images have a max-width that causes them to shrink when displayed. This
// makes it so that they don't do that.
.mce-item-table td img {
  max-width: none;
}

table td[data-mce-selected] {
  background-color: $electric;
}

body#tinymce,
body#tinyrce {
  height: 100vh;
}

.Underline-All-Links__enabled
  a:not(.Button):not(.ui-button):not(.btn):not(.ui-button):not(.ui-tabs-anchor) {
  text-decoration: underline;
}

/* the span tinymce puts around the media player's iframe */
.mce-content-body .mce-preview-object {
  border-style: none;
  display: block;
}

[data-mce-p-data-media-id],
iframe[data-media-id] {
  background-color: #eee;
}

/* the svg and keyframe stuyles are lifted from instui spinner */
div[data-placeholder-for] {
  border: solid 1px #8b969e;
  background-color: #ccc;
  display: block;
  max-width: 100%;
  svg {
    max-height: 90%;
    max-width: 90%;
    animation: 2s linear infinite rotate;
    circle.c1 {
      stroke: #f5f5f5;
    }
    circle.c2 {
      stroke: $electric;
      stroke-dasharray: 148px;
      animation: 1.75s ease infinite morph;
      transform-origin: 50px 50px;
    }
  }
}

@keyframes rotate {
  to {
    transform: rotate(360deg);
  }
}

@keyframes morph {
  0% {
    stroke-dashoffset: 190%;
  }

  50% {
    stroke-dashoffset: 50%;
    transform: rotate(90deg);
  }

  100% {
    stroke-dashoffset: 190%;
    transform: rotate(360deg);
  }
}

@import 'our_custom_tiny_mce_stuff/_tinymce.editor_box.scss';
