// $Id$
// This file contains rules for colors, consolidated from the tiki_base less files. They're moved here so that theme variables can provide values for them.
//@import "_bs3-bs4-transition.scss";
//@import "_tiki-variables.scss";
$imagePathToImgDir: "../../../img/";
@import "../../../vendor_bundled/vendor/twbs/bootstrap/scss/_mixins.scss"; //
//@import "../../../vendor_bundled/vendor/twbs/bootstrap/scss/_variables.scss";
@import "../../default/scss/variables";

.topbar { margin-bottom: $tiki-topbar-row-margin-bottom; }

// Background color for navbar collapse dropdowns (Tiki's aren't .dropdown li).
//.navbar-collapse.collapse.in {
//    background: $navbar-dark-bg;
//}


//.layout_social,
//.layout_social_modules {
    .navbar-dark > a,
    .navbar-dark .cssmenu_horiz > li > a {
    color: $navbar-dark-color;
    &:hover {
        color: $navbar-dark-hover-color;
        text-decoration: none;
    }
    }
    .navbar-dark .sitetitle a {
    color: $navbar-dark-brand-color;
    &:hover {
        color: $navbar-dark-hover-color;
        text-decoration: none;
    }
    }
//}

// tiki-boxes_and_panels.less
.warning a,
.warning a:link,
.warning a:visited {
    color: $yellow; // $alert-warning-text; // #b93c2e
}

// h3 heading in modules
.module h3.card-title { font-size: $tiki-module-h3-card-title-font-size; }

// tiki-calendar.less - tiki-calendar_calmode.tpl, mod-calendar_new.tpl
.calhighlight {
    color: $white; // Todo $state-info-text;
    background: $cyan; // Todo $state-info-bg;
    > a { color: $white; }
}

//fullcalendar.js
a.fc-event:hover {
    color: $tooltip-color;
}

// tiki-categories.less - tiki-jquery.js
// /* Fancy filter */
.filter {
    .fancyfilter {
        border: thin solid $primary; /*black*/;
        .token {
            background: $body-bg;
            border: 1px solid $gray-200;
            font-size: 11px;
            padding: 3px;
        }
    }
}

// tiki-comments.less - tiki-jquery.js
.note-list .postbody-title {
    background: $body-bg; // /*#ccc*/
    color: $body-color; // /*#000*/
}

// Comments moderation - comment.tpl, tiki-list_comments.tpl
.post-approved-n {
    border-left: 3px dotted $success; // blue
}

.post-approved-r {
    border-left: 3px double $warning; // red
}

.post-approved-r .content * {
    background: url('#{$imagePathToImgDir}icons/dots.gif');
}

.dropdown-menu {
    color: $dropdown-header-color;
}

//
#topbar_modules_social .form-control { margin-top: 0.5rem; }

// from tiki-cssmenus.less
.cssmenu_horiz ul li,
.cssmenu_vert ul li,
.cssmenu_horiz ul ul li,
.cssmenu_vert ul ul li {
//    background: $dropdown-bg;
}

.cssmenu_horiz > li:hover,
.cssmenu_horiz > li.sfHover,
.cssmenu_vert > li:hover,
.cssmenu_vert > li.sfHover {
//    background: $dropdown-link-hover-bg;
    //    /* only transition out, not in */
    -webkit-transition: none;
    -moz-transition: none;
    -o-transition: none;
    transition: none;
}

//.cssmenu_horiz > li:hover,
//.cssmenu_horiz > li.sfHover,
.topbar .nav > li > a:hover,
.topbar .nav > li > a:focus {
    background: $tiki-cssmenu_horiz_li_hover_bg;
}

.cssmenu_horiz ul,
.cssmenu_vert ul {
    border: $tiki-cssmenu_ul_border; //    $dropdown-border-color;
}

.cssmenu_horiz ul li a,
.cssmenu_vert ul li a,
.cssmenu_horiz ul li button.btn-link.link-list,
.cssmenu_vert ul li button.btn-link.link-list {
    background: $tiki-cssmenu_ul_li_a_bg; //    $dropdown-bg;
    color: $tiki-cssmenu_ul_li_a_color; //    $dropdown-link-color;
    //    padding-top: ; (tiki-cssmenus.less edited to conform to BS dropdown-link top and bottom padding - 3px.)
    //    padding-bottom: ;
}


.cssmenu_horiz ul li button.btn-link.link-list,
.cssmenu_vert ul li button.btn-link.link-list {
    width: 100%;
    border-radius: 0px;
    text-align: left;
}


.cssmenu_horiz > ul > li:hover > a,
.cssmenu_vert > ul > li:hover > a,
.cssmenu_horiz > ul > li:hover > form > button.btn-link.link-list,
.cssmenu_vert > ul > li:hover > form > button.btn-link.link-list {
    color: $tiki-cssmenu_ul_li_hover_a_color; //    $dropdown-link-hover-color;
    background: $tiki-cssmenu_ul_li_hover_a_bg; //    $dropdown-link-hover-bg;
}

// styling for both css and generated arrows 
.sf-arrows .sf-with-ul:after {
    border: 5px solid transparent;
    border-top-color: $link-color; // $dropdown-link-color; // /* edit this to suit design (no rgba in IE8) */
}

// styling for right-facing arrows
.cssmenu_vert.sf-arrows li > .sf-with-ul:after {
    border-color: transparent;
    border-left-color: $link-color; /* edit this to suit design (no rgba in IE8) */
}

.sf-arrows ul .sf-with-ul:after,
.cssmenu_vert.sf-arrows ul > li > .sf-with-ul:after {
    border-color: transparent;
    border-left-color: $dropdown-link-color; /* edit this to suit design (no rgba in IE8) */
}

.sf-arrows ul li > .sf-with-ul:focus:after,
.sf-arrows ul li:hover > .sf-with-ul:after,
.sf-arrows ul .sfHover > .sf-with-ul:after {
    border-color: transparent;
    border-left-color: $dropdown-link-hover-color;
}

.cssmenu_vert.sf-arrows li > .sf-with-ul:focus:after,
.cssmenu_vert.sf-arrows li:hover > .sf-with-ul:after,
.cssmenu_vert.sf-arrows .sfHover > .sf-with-ul:after {
    border-color: transparent;
    border-left-color: $dropdown-link-hover-color; // white;
}

// Rules for conforming to div.topbar (navbar) instance - Commented out pending color organization of navbar options.
//.topbar,
//    //.topbar .cssmenu_horiz ul,
//.topbar .navbar-default .navbar-nav > li,
//.topbar .nav > li {
//    background: $topbar_bg; //    $navbar-dark-bg;
//    color: $topbar_color; //    $navbar-dark-color;
//    > a {
//        color: $topbar_link_color; // $navbar-dark-link-color;
//        //        background: $navbar-dark-link-bg;
//        padding-top: $topbar_link_padding_top; //    $navbar-padding-y;
//        padding-bottom: $topbar_link_padding_bottom; // $navbar-padding-y;
//    }
//    > a:hover,
//    > a:focus {
//        color: $topbar_link_hover_color; //    $navbar-dark-hover-color;
//    }
//}

.topbar .cssmenu_horiz ul {
    background: $dropdown-bg;
}

.topbar .cssmenu_horiz.sf-arrows > .menuSection0 > .sf-with-ul:after {
    border: 5px solid transparent;
    border-top-color: $navbar-dark-color; // $dropdown-link-color; // /* edit this to suit design (no rgba in IE8) */
}

.topbar .cssmenu_horiz.sf-arrows > .menuSection0:hover > .sf-with-ul:after,
.topbar .cssmenu_horiz.sf-arrows > .menuSection0.sfhover > .sf-with-ul:after {
    border-top-color: $navbar-dark-hover-color;
}

// Used for action icons dropdown - This seems to be .dropdown-header now, and is a Bootstrap variable (GC-L August 2022)
//.dropdown-menu .dropdown-title,
//.dropdown-menu li label {
//    color: $dropdown-title-color;
//}

// To override The dropdown menu text-align: left that (wrongly) ensures proper alignment if parent has it changed (e.g., modal footer)
.dropdown-menu {
    text-align: start !important;
}

// tiki-file_galleries.less
.thumbinfosothers {
    color: $gray-200; // #888
}

table.treetable.objectperms td.added {
    background-color: $success; // #dfd
}

table.treetable.objectperms td.removed {
    background-color: $warning; // #fdd
}

// tiki-js.js, browse_file_gallery.tpl
//.thumbnailcontener {
//    border: solid 1px $thumbnail-border; // #d3d3d3
//}

// jquery-tiki/files.js
.progressBarInProgress {
    background-color: $info;
    color: $white;
}

.progressBarComplete {
    background-color: $success;
    color: $white;
}

.progressBarError {
    background-color: $warning;
    color: $white;
}

.progressContainer {
    border: solid 1px $modal-content-border-color;
    background-color: $modal-content-bg;
}

// tiki-forums.less
//* Forum filter collapsible panel. Adds +/-*/
.filter-panel-heading a:after {
    color: $gray-500;
}

// tiki-maps.less
.olControlMousePosition {
    background: rgba(0, 0, 0, 0.75);
    color: $body-bg; // #fff
}

.olControlScaleLineTop,
.olControlScaleLineBottom {
    background-color: rgba(255, 255, 255, 0.5);
}

.ui-selectmenu-icon {
    background-color: inherit;
    border: solid 5px transparent !important;
    -webkit-box-shadow: -5px 0 5px 2px rgba(0, 0, 0, .1), -1px 0 0 rgba(0, 0, 0, .1), -2px 0 0 rgba(255, 255, 255, .25);
    box-shadow: -5px 0 5px 2px rgba(0, 0, 0, .1), -1px 0 0 rgba(0, 0, 0, .1), -2px 0 0 rgba(255, 255, 255, .25);
}

// tiki-minor_features.less
.dirsitetrail {
    color: $breadcrumb-bg; // lightgray
}

.dirsitecats {
    color: $breadcrumb-bg; // lightgray
}

#resultzone > div:hover {
    background: $success;
}

// tiki-miscellaneous_global.less
.searchresults blockquote em,
.highlight,
.btn-primary.highlight a,
.btn-primary a.highlight {
    background: $danger;
    color: $white;
    border-color: darken($danger, 10%);
}

.btn-primary.highlight:hover {
    background: darken($danger, 15%);
}

.btn.active {
    &.btn-link {
        color: darken($link-color, 5%);
        text-decoration: underline;
        background-color: transparent;
        border-color: transparent;
        &:hover {
            color: $link-hover-color;
            background-color: transparent;
            border-color: transparent;
        }
    }
}

// Smarty {button} maeks .btn-default but sometimes .btn-link is added by hand. Actually Smarty {button} probably should make just .btn.
.btn-primary.btn-link,
.btn-primary.btn-link:hover {
    background: transparent;
    border: none;
}

.btn-primary:focus {
    color: color-yiq($primary);
}

// Ajax, jquery. etc.
// Ajax Loading Overlay
#ajaxLoadingBG {
    background: transparent url('#{$imagePathToImgDir}overlay-light.png');
}

#ajaxLoading {
    color: $gray-300;
    background: transparent url('#{$imagePathToImgDir}loading-light.gif') no-repeat 50% 50%;
}

// cookie consent style
//#cookie_consent_div {
//    padding: $alert-padding-x $alert-padding-y;
//    border: 1px solid darken($info, 10%);
//    color: $white;
//    background-color: $info;
//}

//#cookie_consent_div.banner {
//    padding: $alert-padding-x $alert-padding-y;
//    border: 1px solid $info;
//}

#cookie_consent_div .description a {
    color: adjust-hue($primary, 30%);
    font-weight: bold;
}

// print mode only - to make sure print templates will use and print on seamless white bg color
html#print,
body.print * { // wiki page print view
    background: #ffffff;
    color: #000000;
}

body.fullscreen {
    background: #ffffff;
}

.attention {
    color: $danger;
}

#debugconsole {
    background: rgba(lighten($body-bg, 30%), 0.9); // Todo - what's the way to specify backgrounds?
    color: rgba($navbar-light-color, 0.9);
    border: 2px solid rgba($navbar-light-color, 0.9);
}

#debugconsole form {
    color: rgba($navbar-light-color, 0.9);
}

#debugconsole a {
    color: rgba($navbar-light-color, 0.9);
}

#debugconsole a.btn {
    color: rgba($navbar-light-color, 0.9);
}

// /* Icons */
a.icon,
img.icon {
    background: transparent;
}

div #metadata fieldset.tabcontent, div #metadata div.tabs {
    background-color: transparent;
}

.openid_url {
    background: #ffffff url('#{$imagePathToImgDir}icons/login-OpenID-bg.gif') 1px 1px no-repeat;
}

// Input fields auto-fill/
// Webkit-based browser specific (Google Chrome, Chromium, etc.)
input:-webkit-autofill {
    background-color: $input-bg !important; /* needs important because Chrome has it already important */
    background-image: none !important;
    color: $input-color !important; /* the Google guys forgot the number-one rule... when they specify background they should specify forgeround color too ;) */
}

// ColorBox
#cboxTitle {
    background-color: $body-bg;
}

#captchaImg {
    border: 1px solid $border-color;
}

// tiki-modal_and_managestream.less
form.simple label.error {
    background: url('#{$imagePathToImgDir}icons/error.png') no-repeat 0 4px;
    color: $danger;
}

form.simple label .warning {
    color: $danger;
}

.tiki-modal .mask {
    background-color: $body-bg;
}

.ui-dialog {
    background: $body-bg;
    color: $body-color;
}

.cssmenu_horiz ul li.selected a,
.cssmenu_vert ul li.selected a,
.cssmenu_horiz ul li a:hover,
.cssmenu_vert ul li a:hover,
.cssmenu_horiz ul li.selected button.btn-link.link-list,
.cssmenu_vert ul li.selected button.btn-link.link-list,
.cssmenu_horiz ul li button.btn-link.link-list:hover,
.cssmenu_vert ul li button.btn-link.link-list:hover {
    text-decoration: none;
    color: $dropdown-link-hover-color;
    background-color: $dropdown-link-hover-bg;
}



// tiki-modules.less
.box-quickadmin .cssmenu_horiz ul li {
    background-color: $body-bg;
}

.box-switch_lang .box-data img.highlight {
    border: .1em solid $danger;
}

.box-switch_lang .box-data .highlight {
    border: .1em solid $danger;
}

.box-switch_lang .flags .highlight {
    border: solid 1px $info;
}

//div.cvsup { Why specify a color for this? a) It's just module content. b) The color context may not be clear so causes problems. -- g_c-l
//    color: $gray-300;
//}

//.fixed-top,
//.layout_social .topbar_modules,
//.layout_social_modules .topbar_modules {
//    h1.sitetitle > a,
//    h2.sitesubtitle {
//        color: $navbar-dark-color;
//    }
//    .navbar-inverse .navbar-collapse,
//    .navbar-inverse .navbar-form,
//    .navbar-inverse {
//        border-color: transparent;
//    }
//}

.navbar-light {
    .dropdown-toggle,
    a.nav-link.dropdown-toggle,
    h1.sitetitle a,
    h2.sitesubtitle,
    .cssmenu_horiz .menuLevel0 > a {
    color: $navbar-light-color
    }
}

.navbar-dark {
    .dropdown-toggle,
    a.nav-link.dropdown-toggle,
    h1.sitetitle a,
    h2.sitesubtitle,
    .cssmenu_horiz .menuLevel0 > a {
    color: $navbar-dark-color
    }
}

// Cancelling the hardcoded direction of the padding in the navbar set at vendor_bundled/vendor/twbs/bootstrap/scss/_navbar.scss line:71
// Padding (any) is not needed in LTR and padding-left is not wanted in RTL languages

.navbar-nav {
    padding: 0;
}

// tiki-mytiki.less
// /***** Messages *****/
.prio1,
.prio2,
.prio3,
.prio4,
.prio5 {
//    border: 1px solid $panel-default-border;
}

.prio5 {
//    background: inherit;
    color: $body-color;
    a { color: $body-color; }
}

.prio4 {
//    background: $success;
    color: $success;
//    border: $success;
    a {
        color: $success;
    }
}

.prio3 {
//    background: $info;
    color: $info;
//    border: 1px solid $info;
    a {
        color: $info;
    }
}

.prio2 {
//    background: $warning;
    color: $warning;
//    border: $warning;
    a {
        color: $warning;
    }

}

.prio1 {
//    background: $danger;
    color: $danger;
//    border: $danger;
    a {
        color: $danger;
    }
}

.messureadflag {
    background: $gray-500;
}

.messureadhead {
    background: $gray-500;
}

.messureadbody {
    background: $gray-300;
}

.readlink {
    color: $body-color; // black;
}

// /* webmail & groupmail */
.webmail_item {
    font-size: 0.8rem;
}

.webmail_list .odd {
    background: $table-accent-bg;
}

// extra small buttons
.webmail_list .btn {
    padding: 0.2rem 0.4rem;
    font-size: 0.7rem;
    line-height: 1.3;
}

.webmail_list .webmail_read {
}

.webmail_list .webmail_replied {
}

.webmail_list .webmail_taken {
}

.webmail_message {
}

.webmail_message_headers {
}

.webmail_message_headers th {
}

// tiki-sheets.less
.tiki_sheet table td {
    // /* override .tabcontent table td */
    border: 1px solid $border-color;
}

// /* odd and even classes for tr, td, and li */
.odd {
    background: $table-bg;
    color: $body-color;
}

.even {
    background: $table-accent-bg;
    color: $body-color;
}

// odd checkbox columns
.objectperms .checkBoxHeader:nth-of-type(odd) > div > label,
.objectperms td.checkBoxCell:nth-of-type(odd),
.objectperms .checkBoxHeader:nth-of-type(odd) > .checkBoxLabel { background: $tiki-table-column-bg-odd; }

// tiki-toolbars.less
.helptool-admin {
    // /* right justified section of toolbars */
    border-left: medium double $gray-200;
}

.toolbar-list {
    border-left: medium double $gray-200;
}

.toolbars-picker {
    //    /* colours, smilies etc */
    background: $body-bg;
    border: thin solid $body-color;
    color: $body-color;
}

.toolbars-picker a {
    border: 1px solid $body-bg;
    color: $body-color;
}

.toolbars-picker a:hover {
    border: 1px solid $danger;
    background: $gray-300;
    color: $body-color;
}

// /* New Toolbars */
.textarea-toolbar > div,
.textarea-toolbar > ul {
    background-color: $gray-200;
    border: outset 1px $gray-200;
}

a.toolbar,
li.toolbar {
    /* each tool button */
    border: none;
    background: transparent;
    color: $body-color;
    text-shadow: 1px 1px 4px rgba(0,0,0,.2);
}

a.toolbar:hover,
li.toolbar:hover {
    color: lighten($body-color, 25%);
    text-shadow: -1px -1px 4px rgba(0,0,0,.2);
}

a.toolbar:active,
li.toolbar:active {
    color: $danger;
    text-shadow: 2px 2px 4px rgba(0,0,0,.5);
}



// tiki-translation.less
#intertrans-indicator {
    background-color: $tiki-intertrans_background;
    color: $success;
}

#intertrans-form {
    background-color: $card-bg;
    border: 1px solid $card-border-color;
    color: $body-color;
}

#edit_translations tr.last {
    border-bottom: 2px solid $success;
}

ul.all_languages > li {
    border: 1px solid $success;
}

// /* mouseover plugin */
.plugin-mouseover {
    background: $popover-bg;
    border: 1px solid $popover-border-color;
}

// /* wikiplugin_tracker */
.mandatory_note {
    color: $danger;
}

// /* page contribution by author / wikiplugin_author */
.author0 {
    color: $success;
}

.author1 {
    color: $info;
}

.author2 {
    color: $info;
}

.author3 {
    color: $danger;
}

.author4 {
    color: adjust-hue($success, 50);
}

.author5 {
    color: adjust-hue($info, 70);
}

.author6 {
    color: adjust-hue($warning, 50);
}

.author7 {
    color: adjust-hue($danger, 50);
}

.author8 {
    color: adjust-hue($success, 100);
}

.author9 {
    color: adjust-hue($info, 100);
}

.author10 {
    color: adjust-hue($warning, 100);
}

.author11 {
    color: adjust-hue($danger, 100);
}

.author12 {
    color: adjust-hue($success, 170);
}

.author13 {
    color: adjust-hue($info, 140);
}

.author14 {
    color: adjust-hue($warning, 160);
}

.author15 {
    color: adjust-hue($danger, 160);
}

.structuremenu .menuSection {
    border-left: 1px dotted $gray-500;
}

// /* Inline CkEditor */
.cke_editable:hover {
    outline: $gray-500 dotted 1px;
}

// /* Background for CKEditor */
.tiki .cke_wysiwyg_frame,
.tiki .cke_wysiwyg_div {
    background: $tiki-editor-bg; // $body-bg;
    color: $tiki-editor-text-color; // $body-color;
}

.tiki_plugin {
    background-color: transparent; // /* was #f8f8f8; */
    border: 1px solid $gray-300;
}

.unsavedChangesInEditor {
    border: 1px solid;
    border-color: $warning;
}

// /* Auto TOC */
.autotoc > .nav {
    background: $card-bg;
    border: 1px solid $card-border-color;
    border-radius: $border-radius;
}

.autotoc * {
    color: $link-color;
}

.autotoc .nav > li > a:hover,
.autotoc .nav .nav > li > a:hover {
    color: $link-hover-color;
//    background: $navbar-dark-link-hover-bg;
}

.plugin-form-float {
    background: $body-bg;
    color: $body-color;
    border: solid 2px $body-color;
}

// /* CKeditor contrast */
body.wikitext {
    background: $body-bg;
    color: $body-color;
}

.editable-inline {
    padding-right: 20px;
    display: inline-block;
    .icon {
        font-size: small;
    }
}

.editable-inline.loaded {
    background: $popover-bg;
    padding: 6px;
    border: 1px solid #eee;
    border-radius: 4px;
    z-index: 2;
}

.editable-inline.failure {
    .icon {
        opacity: 50%;
    }
}

.editable-inline.modified {
    border: solid 2px $danger;
    padding: 2px;
}

.editable-inline.unsaved {
    border: solid 2px $danger;
}

.structure_select .cssmenu_horiz ul li {
    border: 1px solid $gray-500;
}

// .admintoclevel .actions input {
//     border: solid 1px $gray-500;
// }

// /* Fullscreen textareas */
.TextArea-fullscreen,
.CodeMirror-fullscreen {
    &, & .edit-zone-footer {
        background-color: $body-bg;
    }
}

.TextArea-fullscreen .actions,
.CodeMirror-fullscreen .actions {
    background-color: $body-bg;
    border-top: $gray-300 1px solid;
}

// /* Autosave Preview handle */
#autosave_preview {
    background-color: $body-bg;
    color: $body-color;
}

#autosave_preview_grippy {
    background-color: $gray-300;
    background-image: url('#{$imagePathToImgDir}icons/shading.png');
}

// /* Namespace styling */
.wiki .namespace {
    background: $gray-300;
}

.site_report a {
    border-left: 1px solid $gray-500;
    border-right: 1px solid $gray-500;
}

.quotebody {
    border-left: 2px solid $gray-300;
}

// /* wikiplugin tracker */
.mandatory_star {
    color: $danger;
    font-size: 120%;
}

.trackerplugindesc {
    color: $gray-800;
}

.charCount {
    color: $gray-800;
}

// /* img plugin */ wikiplugin_img.php, article.tpl
.imgbox {
    border: 1px solid $popover-border-color;
    background-color: $popover-bg;
}

// /* wikiplugin_carousel v3 */
.ic_button {
    border: 2px solid $pagination-border-color;
}

.ic_active {
    border: 2px solid $pagination-active-border-color;
}

//.ic_caption { Commented pending color organization of navbar options.
//    background: $navbar-dark-bg;
//    color: $navbar-dark-color;
//}

.wp-cookie-consent-required {
    color: $danger;
}

.wp-sign {
    color: $tooltip-color;
    background-color: $tooltip-bg;
    a,
    a:visited {
        color: adjust-hue($tooltip-color, 30%);
        &:hover {
            color: adjust-hue($tooltip-color, 45%);
            text-decoration: none;
        }
    }
}

// /* TOC */
.toc {
    border-top: 1px dotted $gray-300;
    border-bottom: 1px dotted $gray-300;
}

// /* Wiki diff styles */
.diff td {
    border: 1px solid $gray-700;
}

.diff div {
    border-top: 1px solid $gray-300;
}

.diffadded {
    background: $success;
    color: lighten($success,50%);
}

.diffdeleted {
    background: $danger;
    color: lighten($danger,50%);
}

.diffadded a,
.diffadded a:hover {
    color: lighten($success,100%);
}

.diffdeleted a,
.diffdeleted a:hover {
    color: lighten($danger,100%);
}

.diffinldel {
    background: $warning;
}

.diffbody {
    background: $gray-200;
    color: $gray-700;
}

.diffchar {
    color: lighten($danger, 50%);
}

.diffadded .diffchar {
    color: lighten($success, 50%);
}

//.searchresults blockquote em.hlt1,
//.searchresults blockquote em.hlt6,
//.highlight_word_0 {
//    color: $success;
//    background: $success;
//}

//.searchresults blockquote em.hlt2,
//.searchresults blockquote em.hlt7,
//.highlight_word_1 {
//    color: $info;
//    background: $info-;
//}

//.searchresults blockquote em.hlt3,
//.searchresults blockquote em.hlt8,
//.highlight_word_2 {
//    color: $panel-warning-text;
//    background: $warning;
//}

//.searchresults blockquote em.hlt4,
//.searchresults blockquote em.hlt9,
//.highlight_word_3 {
//    color: $panel-danger-text;
//    background: $danger;
//}

//.searchresults blockquote em.hlt5,
//.searchresults blockquote em.hlt10,
//.highlight_word_4 {
//    color: adjust-hue($panel-danger-text, 20);
//    background: adjust-hue($danger, 20);
//}

/* Structures drill-down menu */
div.drillshow {
    border: 1px solid $gray-300;
}

// Breadcrumb
.breadcrumb {
    font-style: $tiki-breadcrumb-font-style; // italic;
 //   font-size: $breadcrumb-font-size; // 90%; Defined by Bootstrap variable
//    display: $breadcrumb-display; // block;
}

.nav-breadcrumb {
    display: flex;
    justify-content: space-between;
}


// jQuery-UI
.tiki .ui-widget-content,
span.plugin-mouseover {
    background: $modal-content-bg;
    color: $body-color;
    border: 1px solid $modal-content-border-color;
}

.tiki .ui-widget-header {
    background: $modal-content-bg;
    color: $body-color;
    border-color: $modal-content-border-color;
}

.tiki .ui-dialog-content {
    background: $modal-content-bg;
    color: $body-color;
    select,
    input,
    optgroup,
    textarea {
        background: $input-bg;
        color: $input-color;
    }
}

.tiki .ui-widget button {
    background: $light; // $btn-primary-bg; Temporary comment out May 2022 - Gary
    color: $dark; // $btn-primary-color;
}

.tiki.tiki-listpages {
    .ui-widget.ui-widget-content {
        border: 1px solid $border-color;
        background: $input-bg;
        color: $input-color;
        .ui-menu-item-wrapper {
            padding: 0.25rem 0.25rem 0.25rem 1.5rem;
        }
        .ui-state-active {
            margin: 0;
            background: $link-color;
            color: white;
            border: none;
        }
    }
}

// Example: tracker field type "icon". Bootstrap modal with jquery-ui contents
.tiki .modal-content .ui-state-default { color: $tiki-modal-link-color; }
.tiki .modal-content .ui-state-hover:hover
//.tiki .modal-content .ui-state-focus,
//.tiki .modal-content .ui-widget-content .ui-state-focus,
//.tiki .modal-content .ui-widget-content .ui-state-focus:hover
 { color: $tiki-modal-link-hover-color; }


// To correct login dropdown color
.dropdown-menu { color: $dropdown-link-color; }

.tiki .col1 .table-responsive .table { // border should be on the table itself, not the containing div - g_c-l
    border: 1px solid $table-border-color; // Changed from $card-border-color; why not use closest class?
}

//

.codecaption {
    display: inline-block;
    color: $code-color;
    background: $code-bg;
    border: 1px solid lighten($code-color, 60%);
    border-bottom: none;
    padding: 2px 9.5px;
    font-size: 0.8em;
    font-weight: bold;
}

code,
pre.codelisting {
    background: $code-bg;
    border: $border-width solid transparent;
    padding: $kbd-padding-y $kbd-padding-x;
}
code {
    color: $code-color;
}
pre.codelisting {
    color: $kbd-bg;
    border-color: $border-color;
    border-radius: $border-radius;
}
pre.codelisting code {
    color: inherit;
    white-space: pre-wrap;
}

// edit menu contextual icons
.edit-menu {
    position: absolute;
    top: 6px;
    right: 2px;
}

@include media-breakpoint-up(md) {
    .edit-menu { display: none; }
    .navbar-default:hover .edit-menu { display: block; }
}

@include media-breakpoint-down(xs) {
    .navbar-default .edit-menu { top: 48px; }
}

// Make hierarchical arrangement of admin options more clear
.adminoptionboxchild {
    border-bottom: 1px solid $hr-color;
    legend {
        font-size: $tiki-secondary-legend-font-size;
    }
}

// Make links in highlighted adminoptions visible with nice contrast
div.highlight.adminoptionbox a {
    color: color-contrast($danger) !important; // returns color contrast to danger color
}

// Admin navbar switch

input[type="checkbox"].preffilter-toggle-round + label {
    background-color: $gray-300;
}

input[type="checkbox"].preffilter-toggle-round + label:before {
    color: $input-color;
    background-color: $input-bg;
    border-color: darken($input-bg, 10%);
}

input[type="checkbox"].preffilter-toggle-round + label:after {
}

// Method based on https://codepen.io/davidhalford/pen/wlDxL
input[type="checkbox"].preffilter-toggle-round:checked + label:before {
    background-color: $success;
    border-color: darken($primary, 10%);
    $n: $success;
    $color-brightness: round((red($n) * 299) + (green($n) * 587) + (blue($n) * 114) / 1000);
    $light-color: round((red(#ffffff) * 299) + (green(#ffffff) * 587) + (blue(#ffffff) * 114) / 1000);

    @if abs($color-brightness) < ($light-color/2){
        color: white;
    }

    @else {
        color: black;
    }
    }

//jQuery-ui
.tiki .ui-widget {
    font-family: $font-family-base;
    font-size: $font-size-base;
}

// Hack to give .btn-secondary color to the "Files" button in tiki-page_bar.tpl.
.btn-primary.btn-files {
    @include button-variant($secondary, $secondary, $secondary);
}

// code for the design of the checkbox for interactive translation

.intertrans {
    .switch {
        display: inline-block;
        width: 40px;
        height: 20px;
        margin: 6px;
        //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
        transform: translateY(50%);
        position: relative;
        input {
            display: none;
        }
    }
    .slider {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
        border-radius: 30px;
        //Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
        box-shadow: 0 0 0 2px $tiki-color_pigeon_post_approx, 0 0 4px $tiki-color_bright_gray_approx;
        cursor: pointer;
        border: 4px solid transparent;
        overflow: hidden;
        //Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10)
        transition: .4s;
        &:before {
            position: absolute;
            content: "";
            width: 100%;
            height: 100%;
            background: $tiki-color_picton_blue_approx;
            //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
            border-radius: 30px;
            //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
            transform: translateX(-30px);
            //Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10)
            transition: .4s;
        }
    }
    input:checked + .slider {
        //Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
        box-shadow: 0 0 0 2px $tiki-color_gray_suit_approx,0 0 2px $tiki-color_zircon_approx;
        &:before {
            //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
            transform: translateX(0px);
            background: $tiki-color_pizazz_approx;
        }
    }
}

.permission_table {
    .form-row {
        margin-left: 0; margin-right: 0;
        > .col { padding-left: 15px; padding-right: 15px; }
    }
}

.tiki-admin_modules {
    .t_navbar .btn {
        margin-right: 5px;
    }
}

@media (max-width: breakpoint-max(sm)) {
    .navbar-nav {
        padding: 0 15px;
        margin: 15px 0;
    }

    .tiki-view_tracker, .tiki-admin_tracker_fields, .tiki-lastchanges,
    .tiki-admin_survey_questions, .tiki-assignuser, .tiki_user_messages,
    .tiki-view_banner {
        .t_navbar {
            .btn-group > .btn:not(.dropdown-toggle),
            &.btn-group > .btn:not(.dropdown-toggle) {
                margin-right: 5px;
                margin-bottom: 5px;
                border-radius: 0.25rem;
            }
        }
    }

    #pagehistory .multi {
        .input-group-append {
            display: block;
            margin: 0 !important;
            .btn {
                width: 100%;
                margin-top: 5px;
                border-radius: 0.25rem;
            }
        }
    }

    .t_navbar {
        .btn-group { display: inline-block; }
    }

    .tiki-admin_menu_options {
        #preview_code { white-space: normal; }
    }

    .tiki-wizard_admin {
        #wizardBody {
            margin-top: 2em;
            .media { display: block; margin-top: 1.5rem; }
        }
    }

    .tiki-page_contribution {
        .wikitext { word-break: break-word; }
    }

    .nav-breadcrumb {
        display: block;
        .breadcrumb {
            width: 100%;
            & + form { display: block !important; }
        }
    }

    .tiki-edit_translation, .tiki-edit_structure {
        .ui-dialog { width: 100% !important; }
    }

    #page-data.col-sm-9 { padding-left: 0; padding-right: 0; }
    .syslog-table textarea { min-height: 5.5em; }
    .tiki .ui-dialog { width: 80vw !important; }
}

blockquote {
    color: $blockquote-color; // #7a7a7a;
    border-left: .25rem solid $blockquote-left-border-color; //#e5e5e5;
}

.to-translate{
    color : $danger;
}

// Smartmenus megamenu
.dropdown-menu.mega-menu a { color: $dropdown-link-color; }
a.dropdown-item { color: $dropdown-link-color; }

// Navbar background color consistency
.bg-light-parent {
    background: $light;
}
.bg-dark-parent {
    background: $dark;
}