@import "../../variables";

/**
 * Tabs Panel Control.
 */
.lazyblocks-control-tabs {
	> .components-tab-panel__tabs {
		display: inline-flex;
		flex-wrap: wrap;
		padding: 4px;
		margin-bottom: 12px;
		border: 1px solid #949494;
		border-radius: 2px;
		gap: 4px;

		// single tab
		> .lazyblocks-control-tabs-tab {
			height: auto !important;
			font-weight: 500;
			font-size: 13px;
			padding: 7px;
			margin: 0;
			color: #1e1e1e;
			cursor: pointer;
			background: none;
			border: none;
			border-radius: 2px;
			box-shadow: 0 0 0 transparent;

			&::before,
			&::after {
				content: none;
			}

			&.lazyblocks-control-tabs-tab-hidden:not(.is-active) {
				display: none;
			}

			svg {
				display: block;
				width: auto;
				height: 1.4em;
				margin-right: 0.3em;
			}

			&.is-active {
				position: relative;
				z-index: 1;
				background-color: #1e1e1e;
				color: #fff;
			}
		}
	}

	// wide
	&.lazyblocks-control-tabs-wide > .components-tab-panel__tabs > .lazyblocks-control-tabs-tab {
		flex: 1;
		justify-content: center;
		text-align: center;
	}

	.lazyblocks-control-tabs-separator {
		padding: 15px;
		margin-right: -15px;
		margin-left: -15px;
		border-top: 1px solid $color_gray;

		&:first-child {
			margin-top: -16px;
		}
	}
}