/*
Block Name: Solutions Content Tabs
Description: A simple tab group (Autofilled with solutions content).
*/

.block-solutions-tabs .solutions-tabs-area.horizontal {display: grid;}
.block-solutions-tabs .solutions-tabs-area.vertical {display: flex; border: solid 1px var(--brand-5);}

.block-solutions-tabs .solutions-tabs-area.horizontal .solutions-tab-contents {border: 0;}
.block-solutions-tabs .solutions-tabs-area.horizontal .solutions-tab-content{border: 1px solid var(--brand-1);}

.block-solutions-tabs .solutions-tab-triggers {flex-basis: 25%; display: flex; flex-direction: column;}
.block-solutions-tabs .solutions-tabs-area.vertical .solutions-tab-triggers {background: #fff;}
.block-solutions-tabs .solutions-tabs-area.horizontal .solutions-tab-triggers{flex-direction: row; gap: .5rem;}
.block-solutions-tabs .solutions-tab-trigger {cursor: pointer; padding: 1rem; background-color: #fff; color: var(--brand-8); text-align: center; font-weight: 600;}
.block-solutions-tabs .solutions-tab-trigger.has-bg-color {color: #fff;}
.block-solutions-tabs .solutions-tab-trigger.active {background-color: #00cafb; color: #fff;}

.block-solutions-tabs .solutions-tab-contents {flex-basis: 75%; border-left: solid var(--brand-5) 1px; position: relative;}
.block-solutions-tabs .solutions-tab-content-wrapper{position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.block-solutions-tabs .solutions-tab-content { display: none; padding: 7rem 5rem; height: 100%;}
.block-solutions-tabs .solutions-tab-content.active {display: block;}

.block-solutions-tabs.purple-border .solutions-tab-contents{border: 1px solid #721BAA;}

.block-solutions-tabs h4 {color: var(--brand-4);}

@media(max-width: 768px){
    .block-solutions-tabs .container{max-width: 92%; width: 92%;}
    .block-solutions-tabs .solutions-tab-content{padding: 4rem 2rem;}
}