/*
Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.md or http://ckeditor.com/license
*/

/*
toolbar.css (part of editor.css)
==================================

This files styles the CKEditor toolbar and its buttons. For toolbar combo
styles, check richcombo.css.

The toolbar is rendered as a big container (called toolbox), which contains
smaller "toolbars". Each toolbar represents a group of items that cannot be
separated. The following is the visual representation of the toolbox.

+-- .cke_toolbox ----------------------------------------------------------+
| +-- .cke_toolbar --+ +-- .cke_toolbar --+ ... +-- .cke_toolbar_break --+ |
| |                  | |                  |     |                        | |
| +------------------+ +------------------+     +------------------------+ |
| +-- .cke_toolbar --+ +-- .cke_toolbar --+ ...                            |
| |                  | |                  |                                |
| +------------------+ +------------------+                                |
+--------------------------------------------------------------------------+

The following instead is the visual representation of a single toolbar:

+-- .cke_toolbar ----------------------------------------------------------------+
| +-- .cke_toolbar_start --+ +-- .cke_toolgroup (*) --+ +-- .cke_toolbar_end --+ |
| |                        | |                        | |                      | |
| +------------------------+ +------------------------+ +----------------------+ |
+--------------------------------------------------------------------------------+
(*) .cke_toolgroup is available only when the toolbar items can be grouped
    (buttons). If the items can't be group (combos), this box is not available
	and the items are rendered straight in that place.

This file also styles toolbar buttons, which are rendered inside the above
.cke_toolgroup containers. This is the visual representation of a button:

+-- .cke_button -------------------------------------+
| +-- .cke_button_icon --+ +-- .cke_button_label --+ |
| |                      | |                       | |
| +----------------------+ +-----------------------+ |
+----------------------------------------------------+

Special outer level classes used in this file:

	.cke_hc: Available when the editor is rendered on "High Contrast".
	.cke_rtl: Available when the editor UI is on RTL.
*/
@import "inc/bootstrap";
/* The box that holds each toolbar. */
.cke_toolbar {
  float: left;
  position: relative;
  z-index: 10005
}

.cke_rtl .cke_toolbar {
  float: right;
}

@media (pointer:coarse) {
  .cke .cke_toolbar .cke_button_off.cke_button_off:hover {
    background: white !important;
    color: $textColor !important;
  }
}

/* The box that holds buttons. */
.cke_toolgroup {
  float: left;
  margin: 0 2px 0 0;
  @include simple-border();
  @include border-radius(1);

  background: white();
  display: flex;
}

.cke_hc .cke_toolgroup {
  border: 0;
  margin-right: 10px;
  margin-bottom: 10px;
}

.cke_rtl .cke_toolgroup {
  float: right;
  margin-left: 6px;
  margin-right: 0;
}

/* A toolbar button . */
.cke .cke_toolbar .cke_button {
  display: inline-block;
  height: 18px;
  padding: 4px 6px;
  outline: none;
  cursor: pointer;
  border: 0;
  color: $textColor;
}

.cke .cke_toolbar .cke_button:hover {
  background: $uiClickableHoverBg !important;
  color: $textHighlight !important;
}

.cke_reset_all, .cke_reset_all *
.cke .cke_top .cke_toolbar .cke_button_disabled:hover {
  background: white !important;
  cursor: default !important;
}

.cke_rtl .cke_button {
  float: right;
}

.cke_hc .cke_button {
  border: 1px solid black;

  /* Compensate the added border */
  padding: 3px 5px;
  margin: -2px 4px 0 -2px;
}

/* This class is applied to the button when it is "active" (pushed).
   This style indicates that the feature associated with the button is active
   i.e. currently writing in bold or when spell checking is enabled. */
.cke .cke_toolbar a.cke_button_on {
  background-color: $info;
  color: $textHighlight;
}

.cke_button_disabled span {
  opacity: 0.4 !important;
}

a.cke_button_on:hover,
a.cke_button_on:focus,
a.cke_button_on:active {

  cursor: pointer;
}

a.cke_button_off:hover,
a.cke_button_off:focus,
a.cke_button_off:active,
a.cke_button_disabled:hover,
a.cke_button_disabled:focus,
a.cke_button_disabled:active {

  background-color: $uiClickableActiveBg;

  cursor: default;
  text-shadow: none;
}

/* The icon which is a visual representation of the button. */
.cke_button_icon {
  cursor: inherit;
  background-repeat: no-repeat;
  margin-top: 1px;
  width: 16px;
  height: 16px;
  float: left;
}

.cke_rtl .cke_button_icon {
  float: right;
}

.cke_hc .cke_button_icon {
  display: none;
}

/* The label of the button that stores the name of the feature. By default,
   labels are invisible. They can be revealed on demand though. */
.cke_button_label {
  display: none;
  padding-left: 3px;
  margin-top: 1px;
  line-height: 17px;
  vertical-align: middle;
  float: left;
  cursor: default;

  &.cke_button__language_label {
    display: block;
    cursor: pointer;
  }
}

.cke_button__language {
  cursor: pointer;
}

.cke_button__language_icon {
  display: none;
}

.cke_rtl .cke_button_label {
  padding-right: 3px;
  padding-left: 0;
  float: right;
}

.cke_hc .cke_button_label {
  padding: 0;
  display: inline-block;
  font-size: 12px;
}

.cke_rtl .cke_button_arrow {
  margin-right: 5px;
  margin-left: 0;
}

.cke_hc .cke_button_arrow {
  font-size: 10px;
  margin: 3px -2px 0 3px;
  width: auto;
  border: 0;
}

.cke_button_arrow {
  padding: 0 8px 5px 0;
  position: relative;
  top: -4px;
  opacity: .8
}

/* The vertical separator which is used within a single toolbar to split
   buttons into sub-groups. */
.cke_toolbar_separator {
  float: left;
  background-color: #c0c0c0;
  background-color: rgba(0, 0, 0, .2);
  margin: 5px 2px 0;
  height: 18px;
  width: 1px;
}

.cke_rtl .cke_toolbar_separator {
  float: right;
}

.cke_hc .cke_toolbar_separator {
  width: 0;
  border-left: 1px solid;
  margin: 1px 5px 0 0px;
}

/* The dummy element that breaks toolbars.
   Once it is placed, the very next toolbar is moved to the new row. */
.cke_toolbar_break {
  display: block;
  clear: left;
}

.cke_rtl .cke_toolbar_break {
  clear: right;
}

/* The button, which when clicked hides (collapses) all the toolbars. */
.cke_toolbox_collapser {
  width: 12px;
  height: 11px;
  float: right;
  margin: 11px 0 0;
  font-size: 0;
  cursor: default;
  text-align: center;
  border: 1px solid #a6a6a6;
  border-bottom-color: #979797;
  border-radius: 3px;
  background: #fff;
}

.cke_toolbox_collapser.cke_toolbox_collapser_min {
  margin: 0 2px 4px;
}

.cke_rtl .cke_toolbox_collapser {
  float: left;
}

/* The CSS arrow, which belongs to the toolbar collapser. */
.cke_toolbox_collapser .cke_arrow {
  display: inline-block;
  height: 0;
  width: 0;
  font-size: 0;
  margin-top: 1px;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  border-bottom: 3px solid #474747;
  border-top: 3px solid transparent;
}

.cke_toolbox_collapser.cke_toolbox_collapser_min .cke_arrow {
  margin-top: 4px;
  border-bottom-color: transparent;
  border-top-color: #474747;
}

.cke_hc .cke_toolbox_collapser .cke_arrow {
  font-size: 8px;
  width: auto;
  border: 0;
  margin-top: 0;
  margin-right: 2px;
}
