/* ####################################
   Tabs

   - Critical Rendering Path: Optional
   ################################## */

.tabs {
    position: relative;
    clear: both;
    padding-bottom: calc(var(--site-tabs-padding) + calc(var(--site-tabs-border-width) * 2)); /* Addition of top and bottom vertical padding + border of .tab */
    margin-bottom: var(--site-tabs-margin-bottom);
}

    .tabs ul.tabList {
        display: flex;
        align-items: stretch;
        justify-content: flex-start;
        margin: 0 !important;
        padding: 0 !important;
    }

        .tabs ul.tabList li {
            list-style: none;
            box-sizing: border-box;
            margin: 0 0 calc(var(--site-tabs-border-width) * -1) !important;
            padding-left: var(--site-tabs-tab-gutters);
        }

            .tabs ul.tabList li:first-child {
                padding-left: 0;
            }

            .tabs ul.tabList li a:link {
                display: inline-flex;
                align-items: center;
                box-sizing: border-box;
                width: 100%;
                height: 100%;
                padding: calc(var(--site-tabs-padding) * 0.5) var(--site-tabs-padding);
                font-size: 110.53%; /* 21px if the site started at 19px. */
                border-top-left-radius: var(--site-tabs-tab-border-radius);
                border-top-right-radius: var(--site-tabs-tab-border-radius);
            }

                .tabs ul.tabList li a:link:not(:hover) {
                    text-decoration: none !important;
                    color: var(--site-tabs-tab-inactive-text-color);
                    background: var(--site-tabs-tab-inactive-bg);
                    border-color: var(--site-tabs-tab-inactive-border-color);
                    border-width: var(--site-tabs-border-width);
                    border-style: solid;
                }

                .tabs ul.tabList li a:hover {
                    text-decoration: none !important;
                    color: var(--site-tabs-tab-inactive-hover-text-color);
                    background: var(--site-tabs-tab-inactive-hover-bg);
                    border-color: var(--site-tabs-tab-inactive-hover-border-color);
                    border-width: var(--site-tabs-border-width);
                    border-style: solid;
                }

            .tabs ul.tabList li.selected {
                padding-right: 0;
            }

                .tabs ul.tabList li.selected a:link {
                    position: relative;
                    z-index: 3;
                    margin-bottom: calc(var(--site-tabs-border-width) * -1);
                    /*font-size: 1.125rem;*/
                    color: inherit;
                    background-color: #fff;
                    border-color: var(--site-tabs-border-color);
                    border-width: var(--site-tabs-border-width);
                    border-style: solid;
                    border-bottom: 0;
                }

    /*
    .tabs.tabCount2 ul.tabList li { max-width: 50%; }
    .tabs.tabCount3 ul.tabList li { max-width: 33.33%; }
    .tabs.tabCount4 ul.tabList li { max-width: 25%; }
    .tabs.tabCount5 ul.tabList li { max-width: 20%; }
    .tabs.tabCount6 ul.tabList li { max-width: 16.67%; }
    .tabs.tabCount7 ul.tabList li { max-width: 14.28%; }
    .tabs.tabCount8 ul.tabList li { max-width: 12.5%; }
    .tabs.tabCount9 ul.tabList li { max-width: 11.11%; }
    .tabs.tabCount10 ul.tabList li { max-width: 10%; }
    */
    
    .tabs.space-evenly.tabCount2 ul.tabList li { width: 50%; }
    .tabs.space-evenly.tabCount3 ul.tabList li { width: 33.33%; }
    .tabs.space-evenly.tabCount4 ul.tabList li { width: 25%; }
    .tabs.space-evenly.tabCount5 ul.tabList li { width: 20%; }
    .tabs.space-evenly.tabCount6 ul.tabList li { width: 16.67%; }
    .tabs.space-evenly.tabCount7 ul.tabList li { width: 14.28%; }
    .tabs.space-evenly.tabCount8 ul.tabList li { width: 12.5%; }
    .tabs.space-evenly.tabCount9 ul.tabList li { width: 11.11%; }
    .tabs.space-evenly.tabCount10 ul.tabList li { width: 10%; }

    .tabs .tabContent {
        position: relative;
        display: block;
        overflow: hidden;
    }

    .tabs .tab { /* Matches tabs in the CMS visual editor and on the front end. */
        box-sizing: border-box;
        width: 100%;
        padding: var(--site-padding);
        border-color: var(--site-tabs-border-color);
        border-width: var(--site-tabs-border-width);
        border-style: solid;
        border-bottom-left-radius: var(--site-tabs-block-border-radius);
        border-bottom-right-radius: var(--site-tabs-block-border-radius);
    }

        .tabs .tabContent .tab { /* Matches tabs on the front end only. */
            position: absolute;
            opacity: 0;
        }

            .tabs .tab > :first-child {
                margin-top: 0 !important;
            }

            .tabs .tab > :last-child {
                margin-bottom: 0 !important;
            }

.tabs[class*=bg-] {
    background-color: inherit;
}

    .tabs[class*=bg-] ul.tabList li.selected a:link {
        border: 0;
    }

    .tabs[class*=bg-] .tab {
        border: 0;
    }

    .tabs[class*=bg-] .tab {
        color: var(--color);
        background: var(--bg);
    }

    .tabs[class*=bg-] ul.tabList li.selected a:link {
        border-color: var(--border-color);
    }

    .tabs[class*=bg-] ul.tabList li.selected a:link {
        color: var(--color);
        background: var(--bg);
    }

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

    .tabs ul.tabList li a:link {
        padding: calc(var(--site-tabs-padding) * 0.5);
        font-size: 84.21%; /* 16px if the site started at 19px. */
    }

    .tabs .tabContent .tab {
        padding: calc(var(--site-tabs-padding) * 0.5);
    }

}

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

    .tabs ul.tabList { 
        flex-wrap: wrap;
    }

        .tabs ul.tabList li {
            width: 50% !important;
            max-width: 50% !important;
            padding-left: var(--site-tabs-tab-gutters-stacked);
            margin-bottom: var(--site-tabs-tab-gutters-stacked) !important;
        }

        .tabs ul.tabList li:nth-child(2n) {
            padding-right: 0;
        }

        .tabs ul.tabList li:nth-child(2n+1) {
            padding-left: 0;
        }

        .tabs ul.tabList li:last-child:not(:nth-child(2n)) {
            width: 100% !important;
            max-width: 100% !important;
        }

            .tabs ul.tabList li a:link {
                border-radius: 0;
            }

            .tabs:not([class*=bg-]) ul.tabList li a:link {
                border: var(--border-color);
                border-width: var(--site-tabs-border-width);
                border-style: solid;
            }

            .tabs ul.tabList li:first-child a:link {
                border-top-left-radius: var(--site-tabs-tab-border-radius);
            }

            .tabs ul.tabList li:nth-child(2) a:link {
                border-top-right-radius: var(--site-tabs-tab-border-radius);
            }

}