/**
 * core/accordion - Tabs
 */

/* Heading that precedes the tabs */
.wp-block-heading:has(+ .wp-block-accordion.ceba-tabs) {
	justify-content: center;
	inline-size: 100%;
	margin-block-end: var(--wp--preset--spacing--30);
	margin-inline: auto;
}

.wp-block-accordion.ceba-tabs {
	display: contents;

	/* Accordion item */
	> .wp-block-accordion-item {
		display: contents;

		/* Accordion heading */
		> .wp-block-accordion-heading {
			order: 0;
			inline-size: 50%;
			transition: none;
			z-index: 2;
		}

		/* Toggle button */
		.wp-block-accordion-heading__toggle {
			display: block;
			padding: 0;
			background-color: var(--wp--preset--color--base);
			border: 4px solid var(--wp--preset--color--base);
			border-inline: 0;
			line-height: 1;
			overflow: visible;
		}

		/* Toggle button title */
		.wp-block-accordion-heading__toggle-title {
			display: block;
			position: relative;
			padding: var(--wp--preset--spacing--20) 28px;
			color: var(--wp--preset--color--contrast);
			text-align: center;
			transition: color 0.1s ease-out 0.05s;
			z-index: 1;
		}

		/* Pill indicator shape */
		.wp-block-accordion-heading__toggle-title::before {
			position: absolute;
			inset-block-start: 0;
			inset-inline-start: 0;
			block-size: 100%;
			inline-size: 100%;
			background-color: var(--wp--preset--color--accent-1);
			border-radius: 100px;
			content: '';
			transition: translate 0.1s ease-out;
			z-index: -1;
		}


		/* Accordion panel */
		> .wp-block-accordion-panel {
			position: relative;
			order: 1;
			inline-size: 100%;
			margin-block-start: var(--wp--preset--spacing--60) !important;
			padding: 0;
			z-index: 1;

			.wp-block-heading mark {
				white-space: nowrap;
			}
		}

		/* First accordion item button */
		&:first-child {
			.wp-block-accordion-heading__toggle {
				border-inline-start: 4px solid var(--wp--preset--color--base);
				border-start-start-radius: 100px;
				border-end-start-radius: 100px;
			}

			/* Position the default indicator shape */
			.wp-block-accordion-heading__toggle-title::before {
				translate: 100% 0;
			}
		}

		/* Last accordion item button */
		&:last-child {
			.wp-block-accordion-heading__toggle {
				border-inline-end: 4px solid var(--wp--preset--color--base);
				border-start-end-radius: 100px;
				border-end-end-radius: 100px;
			}

			/* Position the default indicator shape */			/* Position the default indicator shape */
			.wp-block-accordion-heading__toggle-title::before {
				translate: -100% 0;
			}
		}

		/* Open accordion item */
		&.is-open {
			> .wp-block-accordion-heading {
				pointer-events: none;
				z-index: 3;
			}

			.wp-block-accordion-heading__toggle-title {
				color: var(--wp--preset--color--base);
			}

			/* Position the active pill indicator shape */
			.wp-block-accordion-heading__toggle-title::before {
				translate: 0 0;
				box-shadow: 4px 0 8px 0 rgb(0 0 0 / 25%);
			}
		}

		&:not(.is-open) > .wp-block-accordion-heading:hover {
			background-color: transparent;
		}
	}
}

@media (width >= 600px) {
	.wp-block-heading:has(+ .wp-block-accordion.ceba-tabs) {
		inline-size: auto;
		margin-block-end: 0;
		margin-inline: 0 var(--wp--preset--spacing--30);
	}

	.wp-block-accordion.ceba-tabs {
		> .wp-block-accordion-item {
			> .wp-block-accordion-heading {
				inline-size: unset;
			}
		}
	}
}