.fsb-option-form ul {
	padding-left: 1.5em;
	list-style: disc outside;
}

.fsb-option-breakpoint {
	display: flex;
	gap: var(--wpds-dimension-gap-lg);
	align-items: center;
	margin-bottom: var(--wpds-dimension-gap-lg);

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

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

	svg {
		color: var(--wpds-color-foreground-content-neutral);
	}
}

.fsb-option-breakpoint__sign {
	font-size: var(--wpds-typography-font-size-xl);

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

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

	.fsb-option-breakpoint__input {
		margin: 0;
		border-radius: var(--wpds-border-radius-sm) 0 0 var(--wpds-border-radius-sm);

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

	.fsb-option-breakpoint__unit {
		align-content: center;
		padding: 0 var(--wpds-dimension-padding-sm);
		background: var(--wpds-color-background-surface-neutral-strong);
		border: var(--wpds-border-width-xs) solid var(--wpds-color-stroke-interactive-neutral);
		border-left: none;
		border-radius: 0 var(--wpds-border-radius-sm) var(--wpds-border-radius-sm) 0;
	}
}

.fsb-option-default-values {
	display: flex;
	align-items: center;
	gap: var(--wpds-dimension-gap-2xl);

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

.fsb-option-default-values__col {
	display: flex;
	gap: var(--wpds-dimension-gap-sm);
	align-items: center;
}

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

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

	.fsb-option-default-values__input {
		margin: 0;
		border-radius: var(--wpds-border-radius-sm) 0 0 var(--wpds-border-radius-sm);

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

	.fsb-option-default-values__unit {
		margin: 0;
		border-left: none;
		border-radius: 0 var(--wpds-border-radius-sm) var(--wpds-border-radius-sm) 0;
	}
}