.wp-block-greyd-tabs {
	--tabs-align-tabs: flex-start;
	--tabs-tab-gap: calc( 0.5vw + 0.3rem );
	--tabs-color: currentColor;
	--tabs-bg-color: var(--wp--preset--color--base, var(--wp--preset--color--color-33));
	--tabs-border-color: var(--wp--preset--color--mediumlight, var(--wp--preset--color--color-22));

	--tabs-content-padding: 0;
	--tabs-content-background: initial;
	--tabs-content-color: currentColor;
	--tabs-content-radius: 0;
	--tabs-content-border: none;
}

.wp-block-greyd-tabs .tabs {
	display: flex;
	justify-content: safe var(--tabs-align-tabs);
	gap: var(--tabs-tab-gap);
	overflow: auto;
}

.wp-block-greyd-tabs[data-overflow="stack"] .tabs {
	flex-wrap: wrap;
	overflow: hidden;
}

/** mobile overflow fix */
@media screen and (max-width: 480px) {
	.wp-block-greyd-tabs .tabs {
		/* justify-content: flex-start; */
		justify-content: var(--tabs-align-tabs, flex-start);
	}
}

.wp-block-greyd-tabs .greyd_tab {
	display: flex;
	align-items: center;
	cursor: pointer;
	white-space: nowrap;
}

:where(.wp-block-greyd-tabs .greyd_tab) {
	font: inherit;
}

.greyd_tab.is-active .icon-normal,
.greyd_tab:not(.is-active) .icon-active {
	display: none;
}

/*     .is-style-tab (default)
__________________________________
*/
.wp-block-greyd-tabs.is-style-tabs .tabs {
	position: relative;
	padding: 0 var(--tabs-tab-gap);
}

.wp-block-greyd-tabs.is-style-tabs .tabs::before {
	content: " ";
	position: absolute;
	display: block;
	left: 0;
	right: 0;
	bottom: 0;
	border-bottom: 1px solid var(--tabs-border-color);
}

.wp-block-greyd-tabs.is-style-tabs .greyd_tab {
	position: relative; /** fix for the ::before */
	color: var(--tabs-color);
	background: var(--tabs-bg-color);
	border: 1px solid var(--tabs-border-color);
	padding: calc( 0.5vw + 0.3rem ) calc( 1vw + 0.36rem ) calc( 0.5vw + 0.3rem - 1px );
}

.wp-block-greyd-tabs.is-style-tabs .greyd_tab.is-active {
	--tabs-bg-color: var(--wp--preset--color--background, var(--wp--preset--color--color-62));
	border-bottom: none !important;
}

/*     .is-style-chips
__________________________________
*/
.wp-block-greyd-tabs.is-style-chips {
	--tabs-bg-color: var(--wp--preset--color--background, var(--wp--preset--color--color-62));
}
.wp-block-greyd-tabs.is-style-chips .tabs {
	margin-bottom: max( var(--wp--style--block-gap), 1em );
}
.wp-block-greyd-tabs.is-style-chips .greyd_tab {
	color: var(--tabs-color);
	background: var(--tabs-bg-color);
	border: 1px solid var(--tabs-border-color);
	padding: calc( 0.5vw + 0.3rem ) calc( 1vw + 0.36rem );
	border-radius: 100vw;
}
.wp-block-greyd-tabs.is-style-chips .greyd_tab.is-active {
	--tabs-color: var(--wp--preset--color--background, var(--wp--preset--color--color-23));
	--tabs-bg-color: var(--wp--preset--color--foreground, var(--wp--preset--color--color-31));
	--tabs-border-color: var(--wp--preset--color--foreground, var(--wp--preset--color--color-31));
	border-bottom-color: var(--tabs-border-color);
}


/*              Panels
__________________________________
*/
.wp-block-greyd-tabs .panels {
	position: relative;
	isolation: isolate;
}

.wp-block-greyd-tabs .panel {
	position: relative;
	width: 100%;
	padding: var(--tabs-content-padding);
	background: var(--tabs-content-background);
	color: var(--tabs-content-color);
	border-radius: var(--tabs-content-radius);
}

.wp-block-greyd-tabs .panel:not(.is-active) {
	display: none;
}

/* show first tab on load */
.wp-block-greyd-tabs .panel:first-child:not(.is-active):not(:has( ~ .panel.is-active)) {
	display: block;
	transition: none;
}

/* fade */
.wp-block-greyd-tabs[data-transition="fade"] .panel {
	display: flex;
	flex-direction: column;
	transition: all .3s ease-out;
}

.wp-block-greyd-tabs[data-transition="fade"] .panel:not(.is-active) {
	display: flex;
	position: absolute;
	top: 0;
	opacity: 0;
	z-index: -1;
}

.wp-block-greyd-tabs[data-transition="fade"] .panel:first-child:not(.is-active):not(:has( ~ .panel.is-active)) {
	position: relative;
	opacity: 1;
	z-index: 0;
}

/* move horizontal */
.wp-block-greyd-tabs[data-transition="horizontal"] .panels {
	overflow: hidden;
}

.wp-block-greyd-tabs[data-transition="horizontal"] .panel {
	display: flex;
	flex-direction: column;
	transition: all .3s ease-out;
}

.wp-block-greyd-tabs[data-transition="horizontal"] .panel:not(.is-active) {
	display: flex;
	position: absolute;
	top: 0;
	opacity: 0;
	z-index: -1;
	transform: translateX(-102%);
}

.wp-block-greyd-tabs[data-transition="horizontal"] .panel.is-active ~ :not(.is-active) {
	transform: translateX(102%);
}

.wp-block-greyd-tabs[data-transition="horizontal"] .panel:first-child:not(.is-active):not(:has( ~ .panel.is-active)) {
	position: relative;
	opacity: 1;
	z-index: 0;
	transition: none;
	transform: none;
}

/* move vertical */
.wp-block-greyd-tabs[data-transition="vertical"] .panels {
	overflow: hidden;
}

.wp-block-greyd-tabs[data-transition="vertical"] .panel {
	display: flex;
	flex-direction: column;
	transition: all .3s ease-out;
}

.wp-block-greyd-tabs[data-transition="vertical"] .panel:not(.is-active) {
	display: flex;
	position: absolute;
	top: 0;
	opacity: 0;
	z-index: -1;
	transform: translateY(-102%);
}

.wp-block-greyd-tabs[data-transition="vertical"] .panel.is-active ~ :not(.is-active) {
	transform: translateY(102%);
}

.wp-block-greyd-tabs[data-transition="vertical"] .panel:first-child:not(.is-active):not(:has( ~ .panel.is-active)) {
	position: relative;
	opacity: 1;
	z-index: 0;
	transition: none;
	transform: none;
}