@import "../base/common";
@import "../base/themes/admin-menu-theme";

.block-control {
	@extend %default-border;

	padding: 16px;
	width: $block-control-width;
	max-width: $block-control-width;
	border-radius: $block-control-border-radius;
	display: grid;
	grid-template: "title";

	@include screen-max($screen-md3) {
		width: 290px;
		max-width: 290px;
	}

	@include screen-max($screen-sm2) {
		width: 100%;
		max-width: 100%;
	}

	&[data-initial-animation="true"] {
		transition: none;
	}

	.block-title {
		@extend %default-transition;
		@extend %unselectable;

		grid-area: title;
		display: grid;
		grid-template-columns: 1fr auto;
		grid-template-rows: 1fr;
		grid-gap: 16px;
		justify-content: space-between;
		align-items: center;

		.block-title-left-container {
			display: grid;
			justify-content: start;
			grid-template: "icon label" auto "icon demo" auto / auto 1fr;
			align-items: center;

			&[data-demo="false"] {
				grid-template: "icon label" auto "icon label" auto / auto 1fr;
			}

			.title-icon {
				@extend %default-transition;

				grid-area: icon;
				width: $block-title-icon-size;
				height: $block-title-icon-size;
				margin-right: 10px;

				svg {
					@extend %default-transition;

					width: $block-title-icon-size;
					height: $block-title-icon-size;

					* {
						@extend %default-transition;
					}
				}
			}

			.title-text {
				@extend %p2-bold;

				grid-area: label;
				text-transform: capitalize;

				.pro-block-card-title-suffix {
					margin: 0 5px;
					font-weight: bold;
				}
			}

			.title-demo {
				@extend %p2-regular;

				grid-area: demo;

				a {
					@extend %default-transition;

					width: fit-content;
					color: $text-faded-color;

					&:hover {
						color: inherit;
					}
				}
			}
		}

		.block-title-right-container {
			.pro-block-card-info-button {
				@extend %flex-center-all;

				color: $red-500;
				background: white;
				border-radius: 100%;

				@extend %pointer;

				svg {
					@include size(25);
					@extend %unselectable;
				}
			}
		}
	}

	&[data-enabled="false"] {
		background-color: $gray-400;

		.block-title {
			color: $gray-500;

			.title-icon {
				fill: $gray-500;

				svg {
					fill: $gray-500 !important;

					* {
						fill: $gray-500 !important;
					}
				}
			}
		}
	}
}