:root {
	--animated-color: var(--neutral-ultra-light);
	--active-tab-bg: var(--neutral-ultra-light);
}

:where(.fr-tabs) {
	width: 100%;
	display: grid;
}

:where(.fr-tabs__list) {
	position: relative;
}

:where(.fr-tabs__link) {
	position: relative;
	z-index: 1;
	cursor: pointer;
	/* overflow: hidden; */
}

/* Set Links to full width on Vertical Tab */
:where(.fr-tabs__list.vertical .fr-tabs__link) {
	width: 100%;
}

.fr-tabs__link.brxe-block {
	width: auto;
}

/* Set tab link bg to transparent if animated mode is active */
.fr-tabs__link.fr-tabs__link--trans {
	background-color: transparent!important;
}

.fr-tabs__content-item-wrapper {
	display: none;
}

/* .fr-tabs__link.active {
	background-color: var(--active-tab-bg);
} */

.fr-tabs__content-wrapper.active,
.fr-tabs__content-item-wrapper.active {
	display: block;
}

.fr-tabs__animation {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	width: calc(100% / var(--tabCount));
	transition-timing-function: ease-in-out;
	transform: translateX(calc(var(--i) * 100%));
}

/* TODO im removing this for now, and lets see if eventually there is an isolated case where it might be in use */
/* TODO this overflow for scroll is actually better to turn into a toggle on bricks builder ?? */
.fr-tabs__list, .fr-tabs__list.brxe-div  {
	max-width: 100%;
	/*overflow-x: scroll;*/
	flex-direction: row;
	flex-wrap: nowrap;
	display: flex;
}

/* Placeholder styles */

/* .fr-tabs__content-item {
	padding: var(--space-m);
	background-color: var(--neutral-light);
} */

:where(.fr-tabs__content-item-wrapper) {
	contain: paint;	
}

/* .fr-tabs__list {
	visibility: hidden;
}

.fr-tabs__list.fr-tabs__list--horizontal {
	flex-direction: row;
	visibility: visible;
}

.fr-tabs__list.fr-tabs__list--vertical {
	flex-direction: column;
	visibility: visible;
} */


/* FIXES AND OVERWRITES */

/* Fix default list styling */
.fr-tabs__nav > ul,
.fr-tabs__content-wrapper > ul,
.fr-tabs > ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

.fr-tabs__nav > li,
.fr-tabs__content-wrapper > li,
.fr-tabs > li {
	list-style-type: none;
}


/* Builder overwrites  */

.fr-tabs .brxe-image.tag {
	width: 100%;
}

.fr-tabs__content-item-wrapper.brxe-block {
	display: none;
}
.fr-tabs__content-item-wrapper.brxe-block.active {
	display: block;
}


/* Hide scrollbar when tabs are smaller than window */

/* TODO im removing this for now, and lets see if eventually there is an isolated case where it might be in use */
/* is also commented out in JS, but the script is there */
/*
.fr-tabs__list.fr-tabs__list--no-scroll {
	overflow-x: hidden;
	scrollbar-width: none; /* For Firefox */
	/*-ms-overflow-style: none; /* For Internet Explorer and Edge */
/*}

.fr-tabs__list.fr-tabs__list--no-scroll::-webkit-scrollbar {
	display: none; /* For Chrome, Safari and Opera */
/*}
*/


/* Accordion way */

.fr-tabs.fr-tabs--accordion .fr-tabs__list {
	display: flex!important;
	flex-direction: column!important;
}

.fr-tabs.fr-tabs--accordion .fr-tabs__animation {
	display: none!important;
}

.fr-tabs.fr-tabs--accordion .fr-tabs__content-wrapper {
	display: none!important;
}

.fr-tabs.fr-tabs--tabs .fr-tabs__list .fr-tabs__content-item-wrapper {
	display: none!important;
}


/* Change width to 100% for lists when accordion is active */

.fr-tabs.fr-tabs--accordion .fr-tabs__link {
	width: 100%;
}

.fr-builder-preview-content {
	display: block!important;
}

.fr-tabs__list.horizontal {
	flex-direction: row;
}

.fr-tabs__list.vertical {
	flex-direction: column;
}