/*
 * Copyright (c) 2023 XMLmind Software. All rights reserved.
 *
 * This file is part of the XMLmind Web Help Compiler project.
 * For conditions of distribution and use, see the accompanying LEGAL.txt file.
 */

div#wh-navigation {
    flex-direction: row;
    font-family: var(--corp-font-family);
    font-size: var(--corp-font-size);
    line-height: var(--corp-line-height);
    font-weight: var(--corp-font-weight);
    font-style: normal;
    color: var(--corp-color);
    background-color: var(--corp-background-color);
}

div#wh-navigation [class^="wh-icon-"], 
div#wh-navigation [class*=" wh-icon-"] { /*span or a (possibly color=navy)*/
    color: var(--corp-color);
}

div#wh-navigation [class^="wh-icon-"]:before, 
div#wh-navigation [class*=" wh-icon-"]:before {
    font-size: var(--corp-icon-size);
    color: var(--corp-color);
}

div#wh-navigation [class^="wh-icon-"]:hover:before, 
div#wh-navigation [class*=" wh-icon-"]:hover:before {
    color: var(--corp-accent-color);
}

div#wh-separator {
    display: block;
    flex: none;
    width: calc(2 * var(--corp-border-width));
    cursor: col-resize;
    border-left-style: solid;
    border-left-color: var(--corp-border-color);
    border-left-width: var(--corp-border-width);
}

div#wh-separator:hover {
    background-color: var(--corp-border-color); /* Make it look thick. */
}

/*
 * --------------------------------------
 * Tabs
 * --------------------------------------
 */

#wh-tabs {
    flex: none;
    background-color: var(--corp-tabs-background-color);
    border-right-width: var(--corp-border-width);
    border-right-color: var(--corp-border-color);
    border-right-style: solid;
}

/*
 * Customize jquery.tabs.css.
 */
#wh-tabs li.tabs-tab {
    background-color: var(--corp-tabs-background-color);
    border-left-color: transparent; /*Hence invisible*/
}

#wh-tabs li.tabs-tab.tabs-selected:hover,
#wh-tabs li.tabs-tab:hover {
    background-color: var(--corp-hover-background-color);
    border-left-color: var(--corp-hover-border-color);
}

#wh-tabs li.tabs-tab:hover > [class^="wh-icon-"]:before,
#wh-tabs li.tabs-tab:hover > [class*=" wh-icon-"]:before {
    color: var(--corp-accent-color);
}

#wh-tabs li.tabs-tab.tabs-selected > [class^="wh-icon-"]:before,
#wh-tabs li.tabs-tab.tabs-selected > [class*=" wh-icon-"]:before {
    color: var(--corp-accent-color);
}

/*
 * --------------------------------------
 * Tab panels
 * --------------------------------------
 */

#wh-toc-container,
#wh-index-container,
#wh-search-container {
    display: flex;
    flex-direction: column;
    flex: auto;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.wh-form-title {
    font-size: var(--corp-heading-font-size);
    font-weight: var(--corp-heading-font-weight);
    color: var(--corp-heading-color);
}

#wh-toc-pane,
#wh-index-pane,
#wh-search-pane {
    display: block;
    flex: auto;
    margin: 0;
    padding: var(--corp-panel-padding);
    overflow: auto;
}

/*
 * --------------------------------------
 * TOC form
 * --------------------------------------
 */

#wh-toc-form {
    flex: none;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    padding: var(--corp-panel-padding) var(--corp-panel-padding)
                0 var(--corp-panel-padding);
}

.wh-form-spring {
    flex: auto;
    width: var(--corp-icon-size);
}

#wh-toc-expand-all,
#wh-toc-collapse-all,
#wh-toc-next,
#wh-toc-previous,
#wh-toc-print {
    flex: none;
    padding: 0;
    cursor: default;
}

#wh-toc-collapse-all,
#wh-toc-previous {
    margin-left: calc(var(--corp-icon-size) / 4);
}

#wh-toc-next,
#wh-toc-print {
    margin-left: var(--corp-icon-size);
}

/*
 * --------------------------------------
 * Index and Search forms
 * --------------------------------------
 */

#wh-index-form,
#wh-search-form {
    flex: none;
    display: block;
    padding: var(--corp-panel-padding);
}

#wh-index-group,
#wh-search-group {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    flex-wrap: wrap;
    margin-top: var(--corp-panel-padding);
}

#wh-index-field,
#wh-search-field {
    flex: auto;
    width: 2em; /* By default, width:auto is 20 chars. */
    min-width: 2em; 
    font-family: var(--field-font-family);
    font-size: inherit;
    color: inherit;
    background-color: var(--field-background-color);
    border-style: solid none solid solid;
    border-width: var(--corp-border-width);
    border-color: var(--corp-border-color);
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
}

#wh-index-field::-webkit-input-placeholder,
#wh-search-field::-webkit-input-placeholder {
    font-style: italic;
    color: var(--corp-placeholder-color);
    text-align: center;
}

#wh-index-field::-moz-placeholder,
#wh-search-field::-moz-placeholder {
    font-style: italic;
    color: var(--corp-placeholder-color);
    text-align: center;
}

#wh-index-field:-ms-input-placeholder,
#wh-search-field:-ms-input-placeholder {
    font-style: italic;
    color: var(--corp-placeholder-color);
    text-align: center;
}

#wh-index-field::placeholder,
#wh-search-field::placeholder {
    font-style: italic;
    color: var(--corp-placeholder-color);
    text-align: center;
}

/* Remove "X" from the following input[type=text] in IE and Edge. */
#wh-index-field::-ms-clear,
#wh-index-field::-ms-reveal,
#wh-search-field::-ms-clear,
#wh-search-field::-ms-reveal {
    display: none;
    width : 0;
    height: 0;
}

#wh-index-field:focus,
#wh-search-field:focus {
    outline: none;
    border-color: var(--corp-accent-color);
}

#wh-go-page,
#wh-do-search {
    flex: none;
    padding: 0 calc(var(--corp-icon-size) / 2);
    background-color: var(--corp-accent-color);
    -moz-border-radius: 0 calc(var(--corp-icon-size) / 4)
                        calc(var(--corp-icon-size) / 4) 0;
    -webkit-border-radius: 0 calc(var(--corp-icon-size) / 4)
                           calc(var(--corp-icon-size) / 4) 0;
    border-radius: 0 calc(var(--corp-icon-size) / 4)
                   calc(var(--corp-icon-size) / 4) 0;
}

div#wh-navigation [class^="wh-icon-"]#wh-go-page:before, 
div#wh-navigation [class*=" wh-icon-"]#wh-go-page:before,
div#wh-navigation [class^="wh-icon-"]#wh-do-search:before, 
div#wh-navigation [class*=" wh-icon-"]#wh-do-search:before {
    /* NOT corp-background-color=navigation-background-color which 
      when inherit ==> inherit color! */ 
    color: var(--field-background-color);
}

div#wh-navigation [class^="wh-icon-"]#wh-go-page:hover:before, 
div#wh-navigation [class*=" wh-icon-"]#wh-go-page:hover:before,
div#wh-navigation [class^="wh-icon-"]#wh-do-search:hover:before, 
div#wh-navigation [class*=" wh-icon-"]#wh-do-search:hover:before {
    color: inherit;
}

/*
 * --------------------------------------
 * Search form
 * --------------------------------------
 */

#wh-search-head {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
}

#wh-search-title,
#wh-cancel-search,
#wh-search-highlight {
    flex: none;
}

#wh-search-highlight {
    margin-left: var(--corp-icon-size);
}

/*
 * Customize jquery.toggle.css.
 */
div#wh-navigation #wh-search-highlight.toggle-checked:before {
    color: var(--corp-accent-color);
}
