/* #region tab-container */

/* hides raw un-upgraded content (all sections stacked/visible) during the gap before the custom element's constructor runs and wraps/hides inactive sections */
tab-container:not(:defined) {
    visibility: hidden;
    opacity: 0;
}
tab-container:not(:defined) > * {
    display: none;
}

tab-container {
    border: 1px solid var(--color-text);
    display: flex;
    flex-direction: column;
    overflow-y: hidden; /* force overflow to tab-container>div */
    transition: opacity .15s ease-out;
}


/* #region nav */
tab-container > nav {
    overflow-x: auto;
    overflow-y: hidden;
    background: var(--color-header-border);
    padding-top: 0.1em;
    display: flex;
    flex-shrink: 0;
}
/* NOTE: nav requires everything nested in a div to allow overflow-x without causing overflow-y issue... further notes can be found in the component class */
tab-container > nav > div {
    padding: 0 0.2em;
    display: flex;
    column-gap: 0.2em;
    border-bottom: 1px solid var(--color-text);
    flex-shrink: 0;
    flex-grow: 100;
}

tab-container > nav.sticky {
    position: sticky;
    top: 0;
    z-index: 2;
}

/* #region button */
tab-container > nav button {
    padding: 0;
    border-top-left-radius: 0.5em;
    border-top-right-radius: 0.5em;
    background: var(--color-header);
    color: var(--color-header-text);
    border: none;
    outline: none;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.75em 3em;
    flex-shrink: 0;
}


/* buttons get 50% opacity when disabled, but in this case we need the button to maintian full opacity for the white bottom-border to overlap the tab-bars bottom-border. solution is to pass the opacity down to children */
tab-container > nav button[disabled] {
    opacity: 1;
}

tab-container > nav button[disabled] > * {
    opacity: 0.5;
}

    tab-container > nav button.active {
        cursor: default;
        background: var(--color-container) !important;
        border-top: 1px solid var(--color-text) !important;
        border-left: 1px solid var(--color-text);
        border-right: 1px solid var(--color-text);
        border-bottom: 1px solid var(--color-container) !important;
        /* translate to overlap container's bottom border. this allows .current-tab to hide the bottom border when selected 
            NOTE: a ton of testing went into this... margin was causing everything to move. previously using padding/margin all kindsa stuff and it was constantly off by 1px it was painful
                    this nudges downward without effecting surroundings and its much more elegant.
        */
        transform: translateY(1px);

        z-index: 2;
    }
tab-container > nav button.active:not(.error):not(.warning) {
    color: var(--color-text) !important;
}
tab-container > nav button.active.error {
    border-top-color: var(--color-error) !important;
    border-left-color: var(--color-error);
    border-right-color: var(--color-error);
}
tab-container > nav button.active.warning {
    border-top-color: var(--color-warning) !important;
    border-left-color: var(--color-warning);
    border-right-color: var(--color-warning);
}


tab-container > nav button i {
    margin-right: .25em;
    margin-left: -.25em;
}

@media (hover: hover) {
    tab-container > nav button:not(.active):enabled:hover {
        background: var(--color-text) !important;
        color: var(--color-text-text) !important;
        border-bottom: 1px solid var(--color-text); /* this fills up the bottom 1px to line up with tab-container > nav border */
    }
    tab-container > nav button.error:not(.active):enabled:hover {
        background: var(--color-error) !important;
        color: var(--color-error-text) !important;
    }
    tab-container > nav button.warning:not(.active):enabled:hover {
        background: var(--color-warning) !important;
        color: var(--color-warning-text) !important;
    }
}

@media screen and (max-width: 767px) {
    tab-container > nav.vertical-mobile button {
        height: auto;
        flex-direction: column;
        padding-top: .25em;
    }

    tab-container > nav.vertical-mobile button i {
        margin: 0;
    }
}

@media only screen and (max-width: 800px) {
    tab-container > nav.icon-mobile button {
        flex-direction: column;
    }

    tab-container > nav.icon-mobile button i {
        margin: 0;
    }
}

@media only screen and (max-width: 500px) {
    tab-container > nav.icon-mobile button span {
        display: none;
    }

    tab-container > nav.icon-mobile button i {
        margin: 0;
    }
}

/* #endregion button */

/* #endregion nav */


/* #region content */
tab-container > div {
    padding: 0.5em 0.75em;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    overflow-y: auto;
}
tab-container > div >section { 
    flex-grow: 1;
}
tab-container > div > section:not(.active) {
    display: none;
}
/* #endregion */



/* #endregion */



/* #region tab-scroller */

tab-scroller {
    position: relative;
}
tab-scroller:not(:empty) {
    border-bottom: 2px solid var(--color-text);
    padding: 0 0 0.5em 0 !important;
}
tab-scroller > div {
    display: flex;
    overflow-y: hidden;
    overflow-x: auto;
}

tab-scroller > div > * {
    outline: none;
    border-width: 0;
    padding: 0.25em;
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    min-width: 6em;
    text-decoration: none !important;
    color: var(--color-text) !important;
    font-weight: normal !important;
    line-height: 1.25em;
}


/* minor fix/overrides */
tab-scroller > div .material-icons { cursor: pointer; }
tab-scroller > div > a:not(.jstree-anchor):focus {
    font-weight: normal !important;
}


tab-scroller > div > .active {
    background: var(--color-accent) !important;
    color: var(--color-accent-text) !important;
    opacity: 1 !important;
}


tab-scroller:not(:empty)::after {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 1.5em;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none !important;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    content: "arrow_drop_down";
    background: var(--color-text);
    color: var(--color-text-text);
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
    font-size: 1em;
    line-height: 0.25em;
    padding: 0.25em 0 0.125em 0;
}


tab-scroller.open::after { content: "arrow_drop_up"; }
tab-scroller.open > div { flex-wrap: wrap; }

@media (hover:hover) {
    tab-scroller > div > *:not(.active):not([disabled]):hover {
        background: var(--color-text) !important;
        color: var(--color-text-text) !important;
    }
}

@media only screen and (max-device-width: 767px) {
    tab-scroller  {
        font-size: 1.5rem;
    }
}
@media only screen and (min-device-width: 768px) {
    tab-scroller:not(:empty) { padding-bottom: 0 !important; }
    tab-scroller:not(:empty)::after { display: none; }
    tab-scroller .btn-icon { display: none; }
}


@media only screen and (max-width: 500px) {
    tab-scroller > div > * {
        min-width: 25vw !important;
        max-width: 25vw !important;
        font-size: 0.9em;
    }
}

@media screen and (max-device-width: 500px) {
    tab-scroller {
        font-size: 2rem
    }
}
/* #endregion */