/*
    Green Gradient Tabs Style

    Active Tab titles background is green #b7cb65.
    Content area is white background
    Whole tab item has light grey border.
*/
.is-style-gradient-green-tabs {
	--ubc-tabs-block-tab-nav-top-border-background: #b7cb65;
	--ubc-tabs-block-tab-nav-selected-text-color: black;
	--ubc-tabs-block-tab-nav-text-color: black;
	--ubc-tabs-block-content-border-color: #ccc;
	--ubc-tabs-block-accordion-trigger-background: linear-gradient(141deg, #b7cb65 0%, #78BE20 100%);
	--ubc-tabs-block-accordion-trigger-selected-background: linear-gradient(141deg, #b7cb65 0%, #78BE20 100%);
}

.is-style-gradient-green-tabs .ubc-accordion-tabs__tabs-panel .content {
	border-width: 1px;
}

/*
    CLF Tabs Style

    Active Tab titles background is ubc dark blue.
    Inactive tab titles background is ubc light blue
    Content area is white background with light blue border
*/
.is-style-clf {
	--ubc-tabs-block-tab-nav-top-border-background: transparent;
	--ubc-tabs-block-tab-nav-background: #2F5D7C;
	--ubc-tabs-block-tab-nav-text-color: #fff;
	--ubc-tabs-block-tab-nav-selected-background: #002145;
	--ubc-tabs-block-tab-nav-selected-text-color: #fff;
	--ubc-tabs-block-tab-nav-border-color: transparent;
	--ubc-tabs-block-content-border-color: #2F5D7C;
	--ubc-tabs-block-accordion-trigger-background: #2F5D7C;
	--ubc-tabs-block-accordion-trigger-selected-background: #002145;
}

/* Original css applies .5 opacity on inactive tabs. */
.is-style-clf .ubc-accordion-tabs__tab-list li a[role=tab],
.is-style-clf .ubc-accordion-tabs__tab-list li button[role=tab] {
	opacity: 1;
}

/*
 * UBC Secondary Blue BG Tabs Style
 *
 * Active Tab titles background is ubc secondary blue. Borders around tabs themselves
 * are secondary blue. The tab content doesn't have a border.
 */
.is-style-secondary-blue-bg .ubc-accordion-tabs__tab-list li a[role="tab"].is-selected,
.is-style-secondary-blue-bg .ubc-accordion-tabs__tab-list li button[role="tab"].is-selected {
	background: #0055B7;
	border: 1px solid #0055B7;
	color: #fff;
}

.is-style-secondary-blue-bg .ubc-accordion-tabs__tab-list li a[role="tab"]::before,
.is-style-secondary-blue-bg .ubc-accordion-tabs__tab-list li button[role="tab"]::before {
	--ubc-tabs-block-tab-nav-top-border-height: 0px;
}

.is-style-secondary-blue-bg .ubc-accordion-tabs__tab-list li a[role="tab"],
.is-style-secondary-blue-bg .ubc-accordion-tabs__tab-list li button[role="tab"] {
	color: #0055B7;
	border-top: 1px solid #0055B7;
	border-left: 1px solid #0055B7;
	opacity: 1;
}

.is-style-secondary-blue-bg .ubc-accordion-tabs__tab-list li:last-of-type a[role="tab"],
.is-style-secondary-blue-bg .ubc-accordion-tabs__tab-list li:last-of-type button[role="tab"] {
	border: 1px solid #0055B7;
}

.is-style-secondary-blue-bg.ubc-accordion-tabs.tabs-allowed .ubc-accordion-tabs__tabs-trigger:hover,
.is-style-secondary-blue-bg.ubc-accordion-tabs.tabs-allowed .ubc-accordion-tabs__tabs-trigger:focus,
.is-style-secondary-blue-bg.ubc-accordion-tabs.tabs-allowed .ubc-accordion-tabs__tabs-trigger:active {
	background-color: #0055B7;
	color: #fff;
}

.is-style-secondary-blue-bg .ubc-accordion-tabs__tabs-panel .content {
	margin-top: 1px;
	border-top: 1px solid #0055B7;
	border-right: 0;
	border-bottom: 0;
	border-left: 0;
}