/* See license.txt for terms of usage */

@import "./PlanetSiteBar.css";
@import "./PlanetNavBar.css";

:root {
  --bs-body-font-size: 14px;

  /* text-muted */
  --bs-secondary-color: 'red',
}

/* Remove the tap delay on iOS */
html {
  touch-action: manipulation;
}

body {
  /* xxxHonza: needed only for mobile */
  overflow: hidden;
  margin: 0;
  padding: 0;
  background-color: white;
  color: #333;
  font-family: 'Open Sans Regular'
  /*-moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;*/
}

#content {
  height: 100vh;
  width: 100vw;
}

*:focus {
  outline: none !important;
}

* {
  box-sizing: border-box;
}

a.link {
  cursor: pointer;
  text-decoration: none;
}

.bold {
  font-weight: bold;
}

/* Folder List */
.cwdCardBox:hover,
.documentThumbnail:hover {
  background-color: rgb(198, 218, 243) !important;
}

.mdi:before,
.mdi-set {
  display: inline-block;
  font: normal normal normal 16px/1 "Material Design Icons";
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transform: translate(0, 0);
  background-color: transparent;
}

/* Assistant */
.assistant .mdi:hover{
  color: black;
}

.assistantToolsTabs > .nav > li > a {
  padding: 8px 10px;
}

.assistantContent .tab-content {
  /*padding-right: 5px;*/
}

/* The first tab in the Assistant
Disabled, for now, let's not make the tab control even bigger.
ul.assistantToolsTabs > li:first-child {
  padding-left: 10px;
}*/

/* Optimize spacing for the tabs a bit */
ul.assistantToolsTabs > li > button {
  padding-right: 7px;
  padding-left: 10px;
}

.assistantContent .tab-pane,
.assistantContent .tab-content {
  height: 100%;
}

.imageButton:hover {
  background-color: #A7D8FF;
  border-radius: 0.375rem;
}

.material-icons {
  line-height: unset;
}

.btn-toolbar .btn-group {
  padding-left: 12px;
}

.btn-toolbar .btn-group .btn:not([disabled]):hover {
  background-color: rgb(89, 156, 239) !important;
  color: white !important;
}

/* Clues */

.clueBox:hover {
  background-color: #A7D8FF;

  /* Force the original cover for hovered clues in ClueTextList,
     so it's readable (and not e.gl. lightgray) */
  color: initial !important;
}

/* Editor Assistant */

.wordItem:hover {
  background-color: #A7D8FF;
  user-select: none;
}

/* Context Menu */

.dropdown-menu .menu-item span {
  padding-left: 8px;
}

.folderLink:hover,
.contextMenuTarget:hover {
  background-color: rgb(221, 227, 235) !important;
}

/* Dictionary WordTable */

.WordListRow:hover {
  background-color: aliceblue;
}

/* Action icons displayed in the WordList */
.WordListRow .actionIcon {
  visibility: hidden;
  cursor: pointer;
}

/* Show the action icon when the mouse hover over the row the icon is in */
.WordListRow:hover .actionIcon {
  visibility: visible;
}

/* Highlight the action icon when the mouse hover over it */
.WordListRow .actionIcon:hover {
  color: black !important;
}

/* Move to Folder & Move to Dictionary */
.DocumentName:hover {
  background-color: #A7D8FF;
}

/* Folder path in CrosswordList view */
.folderPathTitle:hover {
  background-color: rgb(198, 218, 243);
}

/* Awesome icons */
.cwpToolbarButton {
  vertical-align: middle;
}

.cwpToolbarButton:hover {
  background-color: #A7D8FF;
}

/* Generator */
.generatorDictionary:hover {
  background-color: #A7D8FF;
}

.browserListTable tbody tr:hover {
  background-color: #A7D8FF;
}

/* Fix for SortableMultiSelect component. See the component's source
   for more details. */
.SortableMultiSelectHelper {
  z-index: 99999;
}

/* Animated Spinners */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Forms */

.formFieldDescription {
  display: inline-block;
  margin-top: 3px;
}

.formFieldDescription a {
  color: rgb(13, 110, 253) !important;
  cursor: pointer;
  text-decoration: none;
}

/* Left overs from Migrating Bootstrap & React Bootstrap */

.form-group input::placeholder {
  color: hsl(0, 0%, 50%);
}

.text-muted {
  color: #6c757d !important;
}

.form-group {
  margin-bottom: 15px;
}

.form-group > label {
  font-weight: bold;
  margin-bottom: 5px;
}

.dropdown-toggle::after {
  display: none;
}

/* ShareModal */
.sharedModalUser:hover {
  background-color: #A7D8FF;
}

/* ToolActionSet */

.ToolActionSet .action:hover {
  background-color: #f9f9f9;
}

/**
 * Override the default position="relative" of the dropdown coming
 * from bootstrap. This solves the problem where the drop down target
 * is rendered on top of context menu that rendered on to of the target.
 *
 * The problem is that the dropdown is rendered with position: relative;
 * and the context menu is rendered with position: absolute;
 * The result is that the context menu is rendered on top of the target.
 * The solution is to set the position of the dropdown to inherit.
 *
 * STR: Open the Assistant tab context menu and see how the dropdown target
 * belonging to the Tool set actions is rendered over the drop down.
 */
.ToolActionSet .dropdown {
  position: inherit !important;
}

/* React DropdownSubmenu */

.dropdown-menu-right {
  left: calc(100% - 5px) !important; /* Forces submenu right alignment */
  top: 0 !important;
}

/* CodeMirror */
.CodeMirror {
  border: 1px solid #dee2e6;
}

.CodeMirror {
  resize: vertical;
  height: auto !important;
}