$color-primary: #2563eb;
$color-white: #fff;
$color-grey: #e2e8f0;

.masteriyo-tab-panel {
	.masteriyo-tab-panel-menu {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-gap: 13px;
		text-align: center;

		.masteriyo-tab-panel-menu-item {
			all: unset;
			padding: 8px 16px;
			background-color: rgba($color-primary, 0.03);
			border-radius: 2px;
			color: $color-primary;
			font-size: 14px;
			font-weight: 600;
			cursor: pointer;
			line-height: 19px;

			&.is-active {
				background-color: $color-primary;
				color: $color-white;
				position: relative;

				&::after {
					content: "";
					width: 0;
					height: 0;
					border-left: 6px solid transparent;
					border-right: 6px solid transparent;
					border-top: 7px solid $color-primary;
					position: absolute;
					top: 100%;
					left: 50%;
					transform: translateX(-50%);
				}
			}
		}
	}

	.masteriyo-tab-panel-body {
		margin-top: 25px;
	}

	.masteriyo-multi-select {
		& > div {
			border: 1px solid $color-grey;
			margin-top: 8px;
		}
	}
}

.block-editor-block-inspector {
	.components-panel__body {
		border: none;
		border-top: 0;
	}
}

.components-panel {
	&[data-masteriyo-inspector-controls] {
		.components-panel__body {
			&.block-editor-block-inspector__advanced {
				display: none;
			}
		}
	}
}

//Design Tab.
.masteriyo-design-card {
	margin: 0 17px;

	&__items {
		border-radius: 2px;
		overflow: hidden;
		border: 1px solid rgba($color-primary, 0.1);
		transition: all 300ms;

		&:not(:last-child) {
			margin-bottom: 24px;
		}

		&:hover,
		&:after {
			box-shadow: 0 8px 16px rgba(#64748b, 0.1), 0 4px 4px rgba(#64748b, 0.1);
		}

		&--active {
			box-shadow: 0 8px 16px rgba(#64748b, 0.1), 0 4px 4px rgba(#64748b, 0.1);
			border: 1px solid rgba($color-primary, 0.5);
		}
	}

	.preview-image {
		img {
			display: block;
		}
	}

	.status {
		padding: 15px;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		font-size: 13px;
		font-weight: 500;
		background-color: rgba($color-primary, 0.03);
	}

	.active-label {
		color: $color-primary;
	}
}

.coming-soon-notice {
	margin-top: 80px;
	margin-bottom: 80px;
	text-align: center;

	& > span {
		display: block;

		&:nth-child(2) {
			color: $color-primary;
			font-size: 20px;
			font-weight: 600;
			margin-top: 8px;
		}
	}
}