@use "../abstracts/variables" as variables;

.firevert-customizer {
	display: flex;
	flex-wrap: wrap;

	&__left-side,
	&__right-side {
		flex: 1;
		border: 1px solid variables.$border-color;
		border-top: unset;
		padding: 20px;

		@media #{variables.$xl} {
			padding: 20px 30px;
		}

		&--without-border-right {
			border-right: unset;
		}

		&--max-width-spectator-views {
			max-width: 500px;
			width: 100%;
		}
	}

	&__right-side {
		border-right: unset;

		&--power-widget {
			@media #{variables.$xl} {
				max-width: 490px;
			}
		}
	}

	&__content {
		display: flex;
		flex-direction: column;
		margin-block: 20px;
		gap: 20px;

		&--gap-unset {
			gap: unset;
		}

		&--spectator-views,
		&--promo-time-widget,
		&--power-widget {
			display: flex;
			flex-direction: column;
			row-gap: 20px;
			column-gap: 20px;

			@media #{variables.$xl} {
				display: grid;
				grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
				align-items: center;
				justify-items: start;
				flex-direction: unset;
			}

			& > * {
				width: 100%;
				max-width: none;
			}

			& > .firevert-color-picker {
				max-width: 160px;
			}
		}

		& > p {
			margin: 0 !important;
			padding: 0 !important;
		}
	}

	&__heading {
		font-size: 15px !important;
		line-height: 20px !important;
		font-weight: 600 !important;
		color: variables.$black !important;
		margin: 0 !important;
		padding: 0 !important;

		&::after {
			display: none !important;
		}
	}

	&__colors {
		display: flex;
		flex-direction: column;
		gap: 20px;
		margin-block: 20px;
		max-width: 300px;
	}

	&__right-side {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		border-left: unset;
	}

	&__preview {
		background-color: #f6f7f7;
		border-radius: variables.$border-radius-10;
		border: 1px dashed variables.$border-color;
		height: max-content;
		width: max-content;
		max-width: calc(100% - 100px);
		margin: 20px 0 20px 100px;
		padding: 10px;

		@media #{variables.$xl} {
			padding: 18px 36px;
		}

		&--power-widget {
			position: relative;
			width: 320px;
			height: 620px;
		}

		&--spectator-views,
		&--promo-time-widget {
			width: 100%;
			margin: 0;
			max-width: -webkit-fill-available;
			max-width: -moz-available;
			max-width: fill-available;
		}
	}

	&__preview-label {
		margin: 0 auto 0 100px;
		color: variables.$black;
		font-weight: 600;
		font-size: 15px;
		line-height: 20px;

		&--spectator-views,
		&--promo-time-widget {
			margin: 0 auto 13px 0;
		}
	}
}