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

.lazyblocks-component-tabs {
	// tabs.
	.components-tab-panel__tabs {
		display: flex;
		flex-wrap: wrap;
		padding: 0 20px;

		.components-button {
			padding: 10px 16px;
			margin-bottom: -1px;
			font-weight: 500;
			color: inherit;
			text-decoration: none;
			border: 1px solid transparent;
			border-bottom: none;
			border-radius: $radius_large $radius_large 0 0;
			box-shadow: none;
			opacity: 0.4;
			transition: 0.15s opacity, 0.15s background-color, 0.15s border-color;

			&:hover {
				opacity: 0.8;
			}

			&.is-active {
				background-color: #fff;
				border-color: rgba(0, 0, 0, 7%);
				opacity: 1;
			}
		}
	}

	// tabs content.
	.components-tab-panel__tab-content {
		padding: 15px 20px;
		background-color: #fff;
		border: 1px solid rgba(0, 0, 0, 7%);
		border-radius: $radius_large;
	}
}