@import "@10up/component-tabs";

:root {
	--c-appender-button-bg: #000;
	--c-white: #fff;
	--c-gray: #777;
	--c-light-grey: #d3d3d3;
	--c-placeholder-text: #707070;
	--tab-item-width: 200px;
	--tab-item-height: 60px;
	--tenup-tabs-rich-text-color: #1e1e1e;
	--tenup-tabs-untitled-tab-color: #6c6c6c;
}

.wp-block[data-type="tenup/tabs"] {

	& .tab-group {

		& > .block-editor-inner-blocks .wp-block[data-type="tenup/tabs-item"] {

			&.has-child-selected,
			&.is-selected {
				display: block;
			}
		}

		& .tab-header {
			align-items: center;
			background-color: var(--c-white);
			box-sizing: border-box;
			display: flex;
			font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
			font-size: 13px;
			height: calc(var(--tab-item-height) - 2px);
			left: 0;
			padding: 6px 12px;
			position: absolute;
			text-align: center;
			top: calc(calc(-1 * var(--tab-item-height)) + 2px);

			& .rich-text {
				line-height: 1.2;
				position: relative;
				text-align: center;
				width: 100%;
			}
		}
	}

	&:not(.has-child-selected) {

		& .wp-block-tenup-tabs {

			&.components-tab-panel__tabs-item-is-editing .tab-group > .block-editor-inner-blocks .wp-block[data-type="tenup/tabs-item"] {

				&[data-is-tab-header-editing] {
					display: block;
				}
			}

			&:not(.components-tab-panel__tabs-item-is-editing) .tab-group > .block-editor-inner-blocks .wp-block[data-type="tenup/tabs-item"] {

				&:first-child {
					display: block;
				}
			}
		}
	}

	& .components-button {
		font-family: unset;
		font-size: unset;
	}
}

.wp-block-tenup-tabs {

	& .tab-group > .block-editor-inner-blocks {

		& > .block-editor-block-list__layout {

			& > .wp-block {

				& ~ .wp-block {
					display: none;
				}
			}
		}

		& .wp-block[data-type="tenup/tabs-item"] {
			display: none;
			margin-top: 0;
		}
	}

	& .tab-item {
		border: 1px solid var(--c-gray);
		display: inline-block;
		height: var(--tab-item-height);
		text-align: center;
		text-decoration: none;
		width: var(--tab-item-width);
	}

	& .components-tab-panel__tabs-item {

		& .components-button {
			border-radius: 0;
		}

		&.is-active {
			background: var(--c-white);
			border-bottom-color: var(--c-white);
			box-shadow: none;
			position: relative;
			z-index: 1;

			&::before {
				display: none;
			}
		}

		&.rich-text {
			align-items: center;
			display: flex;
			font-weight: 500;

			&:hover {
				color: var(--tenup-tabs-rich-text-color);
			}
		}

		&.untitled {
			color: var(--tenup-tabs-untitled-tab-color);
		}
	}

	& .add-tab-button {
		margin-left: 6px;
		margin-top: 11px;
	}

	& .components-tab-panel__tabs {

		& .components-text-control__input {
			margin-left: 5px;
		}

		& .untitled {
			color: var(--c-placeholder-text);
		}
	}

	&.components-tab-panel__tabs-item-is-editing .components-tab-panel__tabs {

		& > :not(.is-active) {
			border-bottom-color: var(--c-gray) !important;
		}

		& .is-active {
			border-bottom-color: var(--c-white) !important;
		}
	}
}

.components-button.tabs-item-appender.is-tertiary:not(:disabled) {
	background-color: var(--c-appender-button-bg);
	color: var(--c-white);

	&:hover {
		color: var(--c-light-grey);
	}
}