@use "@wordpress/base-styles/variables" as variables;
@use "@wordpress/base-styles/colors" as colors;

.fsb-option-form {

	ul {
		padding-left: 1.5em;
		list-style: disc outside;
	}
}

.fsb-option-breakpoint {
	display: flex;
	gap: variables.$grid-unit-20;
	align-items: center;
	margin-bottom: variables.$grid-unit-20;

	@media screen and (max-width: 782px) {
		flex-direction: column;
	}
}

.fsb-option-breakpoint__device {
	display: flex;
	flex-flow: column;
	align-items: center;

	svg {
		fill: colors.$gray-800;
	}
}

.fsb-option-breakpoint__sign {
	font-size: 20px;

	@media screen and (max-width: 782px) {
		transform: rotate(90deg);
	}
}

.fsb-option-breakpoint__input {
	display: flex;
	align-items: stretch;

	input {
		max-width: 100%;
		margin: 0;
		border-radius: variables.$radius-small 0 0 variables.$radius-small;

		&:focus {
			z-index: 1;
		}
	}

	span {
		display: flex;
		align-items: center;
		padding: 0 variables.$grid-unit-10;
		background: colors.$white;
		border: variables.$border-width solid colors.$gray-600;
		border-left: none;
		border-radius: 0 variables.$radius-small variables.$radius-small 0;
	}
}

.fsb-option-default-values {
	display: flex;
	align-items: center;
	gap: variables.$grid-unit-40;

	@media screen and (max-width: 782px) {
		flex-direction: column;
	}
}

.fsb-option-default-values__col {
	display: flex;
	gap: variables.$grid-unit-10;
	align-items: center;
}

.fsb-option-default-values__device {
	display: flex;
	flex-flow: column;
	align-items: center;
}

.fsb-option-default-values__input {
	display: flex;
	align-items: stretch;

	input {
		max-width: 100%;
		margin: 0;
		border-radius: variables.$radius-small 0 0 variables.$radius-small;

		&:focus {
			z-index: 1;
		}
	}

	select {
		margin: 0;
		border-left: none;
		border-radius: 0 variables.$radius-small variables.$radius-small 0;
	}
}