.enb-tab {

	&:focus:not(:disabled) {
		outline: none;
		box-shadow: none;
	}

	&.components-button {
		font-size: 1em;
	}

	&.active {
		z-index: 2;
	}

	.enb-remove-button {
		position: absolute;
		inset-block-start: -10px;
		inset-inline-end: -10px;
		z-index: 2;
		display: grid;
		place-content: center;
		border-radius: 100%;
		opacity: 0;
		visibility: hidden;
		inline-size: 20px;
		min-inline-size: 20px;
		block-size: 20px;
		padding: 0;
		background-color: var(--enb-color-negative-600);
		transition: all 0.25s;

		svg {
			display: block;
			inline-size: 20px;
			block-size: auto;
			color: var(--enb-color-white);
		}
	}

	&:hover .enb-remove-button {
		opacity: 1;
		visibility: visible;
	}
}

.enb-add-new-tab,
.enb-add-new-tab:hover:not(:disabled,[aria-disabled="true"]) {
	border-radius: 50%;
	transition: background-color 0.25s;
}

.enb-add-new-tab:hover:not(:disabled,[aria-disabled="true"]):hover {
	background-color: var(--enb-color-200);
	color: var(--enb-color-900);
}

.enb-tab-panel {
	display: none;
	min-block-size: 120px;

	&[data-active="active"] {
		display: block;
	}
}

.enb-tab-content:has(> .enb-tablist .enb-tab:first-child.active) {

	> .enb-tab-content .enb-tab-panel:first-child {
		display: block;
	}
}