// WordPress base styles
@import "../node_modules/@wordpress/base-styles/variables";

.fsb-option-form {

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

.fsb-option-breakpoint {
	display: flex;
	gap: $grid-unit-20;
	align-items: center;
	margin-bottom: $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: $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: $radius-block-ui 0 0 $radius-block-ui;
	}

	span {
		display: flex;
		align-items: center;
		padding: 0 $grid-unit-10;
		background: $gray-100;
		border: #8c8f94 solid $border-width;
		border-left: none;
		border-radius: 0 $radius-block-ui $radius-block-ui 0;
	}
}

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

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

.fsb-option-default-values__col {
	display: flex;
	gap: $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: $radius-block-ui 0 0 $radius-block-ui;
	}

	select {
		margin: 0;
		border-left: none;
		border-radius: 0 $radius-block-ui $radius-block-ui 0;
	}
}