/*
 * cssjs/search.css
 *
 * OMG Search style sheets
 *
 * Copyright 2023 Philippe CROUÉ philippe@croue.com under GNU licence
 *
 */

:root {

    --searchTabsContentPadding: 7px;
    --searchTabsContentMinHeight: 240px;
    --searchTabsPadding: 7px 13px;
    --searchTabsBorderRadius: 7px;

    --searchTabsBorderWeight: 1px;

    --searchTabsPageBgColor: white;
    --searchTabsBgColor: lightgrey;
    --searchTabsHoverBgColor: #ffffd0;
    --searchTabsBorderColor: grey;
}

/* Search tabs */

TABS, TABS TABSCONTENT {
    display: inline-block;
    width: 100%;
}
TABS TABSHEADER {
    display: flex;
    display: -ms-flexbox;
    display: -webkit-flex;
    flex-direction: row;
    flex-wrap: nowrap;
}
TABS TABSCONTENT {
    margin: 0;
    padding: var(--searchTabsContentPadding);
    min-height: var(--searchTabsContentMinHeight);
    border-left: var(--searchTabsBorderWeight) solid var(--searchTabsBorderColor);
    border-right: var(--searchTabsBorderWeight) solid var(--searchTabsBorderColor);
    border-bottom: var(--searchTabsBorderWeight) solid var(--searchTabsBorderColor);
}
TABS TABSHEADER TAB {
    padding: var(--searchTabsPadding);
    background-color: var(--searchTabsBgColor);
    border: var(--searchTabsBorderWeight) solid var(--searchTabsBorderColor);
    border-radius: var(--searchTabsBorderRadius) var(--searchTabsBorderRadius) 0 0;
    cursor: pointer;
}
TABS TABSHEADER TAB:HOVER {
    background-color: var(--searchTabsHoverBgColor);
}
TABS TABSHEADER TAB.currentTab {
    background-color: var(--searchTabsPageBgColor);
    border-bottom: var(--searchTabsBorderWeight) solid var(--searchTabsPageBgColor);
}
TABS TABSHEADER TAB:last-child {
    flex: 1;
    background-color: var(--searchTabsPageBgColor);
    border-left: none;
    border-right: none;
    border-top: none;
    border-bottom: var(--searchTabsBorderWeight) solid var(--searchTabsBorderColor);
    border-radius: none;
    cursor: none;
}

/* Responsive updates */

@media only screen and (max-width: 640px) {

    TABS TABSHEADER TAB {
        font-size: 80%;
    }
}