/* Tabs.css for Mocha UI
 *
 * Theme: Default
 *
 * Copyright:
 * Copyright (c) 2007-2009 Greg Houston, <http://greghoustondesign.com/>.
 *
 * License:
 * MIT-style license.
 *
 * Required by:
 * Tabs.js
 * Modified for Dark Mode by:
 * Raymond Lanser
 *
 * */
/* Toolbar Tabs */
/* Sass Document */ 
/* Scss Document */
/*Layout Sass Theme Variables */
/*Tab Sass Theme Variables */
/*Window Sass Theme Variables */
/* Style Sass Theme Variables*/
/* Icon Variables */
/* Main mixin for generating theme variables from lists */
/* Four @each statements, instead of one earlier in the nesting creeates a more succinct final css. */
:root {
  --row-select: #415a8d;
  --hover-color: #ee6600;
  --border-col: #909090;
}

body.light-theme, body.light-theme > *, body.light-theme + * {
  --row-select: #415a8d;
  --hover-color: #ee6600;
  --border-col: #909090;
}

@media (prefers-color-scheme: dark) {
  body, body > *, body + * {
    --row-select: #94BBD8;
    --hover-color: #d1c52a;
    --border-col: #6f6f6f;
  }
}
body.dark-theme, body.dark-theme > *, body.dark-theme + * {
  --row-select: #94BBD8;
  --hover-color: #d1c52a;
  --border-col: #6f6f6f;
}

/* Early version of the mixin for seperate dark and light lists. May still prove useful. */
/* Div Background Properties Mixin */
/* Scss Document */
/*Layout Sass Theme Variables */
/*Tab Sass Theme Variables */
/*Window Sass Theme Variables */
/* Style Sass Theme Variables*/
/* Icon Variables */
:root {
  --tab-border: solid #e5e5e5 4px;
  --tab-selected: linear-gradient(0deg, rgba(229,229,229,1) 0%, rgba(250,250,250,1) 100%);
  --tab-gradient: linear-gradient(0deg, rgba(187,187,187,1) 0%, rgba(229,229,229,1) 25%, rgba(240,240,240,1) 100%);
}

body.light-theme, body.light-theme > *, body.light-theme + * {
  --tab-border: solid #e5e5e5 4px;
  --tab-selected: linear-gradient(0deg, rgba(229,229,229,1) 0%, rgba(250,250,250,1) 100%);
  --tab-gradient: linear-gradient(0deg, rgba(187,187,187,1) 0%, rgba(229,229,229,1) 25%, rgba(240,240,240,1) 100%);
}

@media (prefers-color-scheme: dark) {
  body, body > *, body + * {
    --tab-border: solid rgba(80,80,80,1) 4px;
    --tab-selected: linear-gradient(0deg, rgba(80,80,80,1) 0%, rgba(112,112,112,1) 100%);
    --tab-gradient: linear-gradient(0deg, rgba(50,50,50,1) 0%, rgba(60,60,60,1) 25%, rgba(90,90,90,1) 100%);
  }
}
body.dark-theme, body.dark-theme > *, body.dark-theme + * {
  --tab-border: solid rgba(80,80,80,1) 4px;
  --tab-selected: linear-gradient(0deg, rgba(80,80,80,1) 0%, rgba(112,112,112,1) 100%);
  --tab-gradient: linear-gradient(0deg, rgba(50,50,50,1) 0%, rgba(60,60,60,1) 25%, rgba(90,90,90,1) 100%);
}

#mochaToolbar {
  border-bottom: var(--tab-border);
  box-shadow: inset 0px -5px 5px -5px rgba(20, 20, 20, 0.5);
}

#preferencesPage_toolbarWrapper, #propertiesPanel_header, #aboutpage_toolbarWrapper {
  border-bottom: var(--tab-border);
}
#preferencesPage_toolbarWrapper .toolbarTabs, #propertiesPanel_header .toolbarTabs, #aboutpage_toolbarWrapper .toolbarTabs {
  box-shadow: inset 0px -8px 8px -8px rgba(0, 0, 0, 0.5);
}

#preferencesPage_toolbarWrapper, #aboutpage_toolbarWrapper {
  height: 30px !important;
  background-color: var(--bg-color-tint);
}
#preferencesPage_toolbarWrapper .toolbarTabs, #aboutpage_toolbarWrapper .toolbarTabs {
  padding: 5px 0px;
}

#propertiesPanel_header {
  height: 26px;
}

.tab-menu li:nth-of-type(1) a {
  margin-left: 5px;
}

#propertiesPanel {
  border-top: 1px solid var(--border-col);
}

#prop_general {
  padding-top: 5px;
}

.tab-menu {
  padding-top: 1px;
  list-style: none;
  margin: 0;
  padding: 0;
  line-height: 16px;
  font-size: 11px;
}

.panel-headerContent {
  border-bottom: solid #e5e5e5 5px;
}

.tab-menu li {
  float: left;
  margin: 0px 3px -5px 3px;
  cursor: pointer;
}
.tab-menu li.selected a {
  color: var(--font-tint);
  font-weight: bold;
  background: rgb(229, 229, 229);
  background: var(--tab-selected);
}
.tab-menu li a {
  display: block;
  padding: 5px 15px 3px 15px;
  text-align: center;
  font-weight: normal;
  color: var(--font-tint);
  background: rgb(187, 187, 187);
  background: var(--tab-gradient);
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.6);
  border-radius: 8px 8px 0px 0px;
}