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

.block-editor-block-visibility-modal {
	z-index: z-index(".block-editor-block-visibility-modal");

	&__options {
		border: 0;
		padding: 0;
		list-style: none;
		margin: $grid-unit-30 0;

		&-item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 0 0 $grid-unit-20 0;
			gap: $grid-unit-30;
		}

		&-item:last-child {
			margin: 0;
		}

		&-item--everywhere {
			flex-direction: column;
			align-items: start;
		}

		&-checkbox--everywhere {
			font-weight: 600;
		}

		&-icon--checked {
			fill: $gray-300;
		}
	}

	&__sub-options {
		width: 100%;
		padding-inline-start: $grid-unit-15;
	}

	&__description {
		font-size: $font-size-small;
		color: $gray-700;
	}
}

.block-editor-block-visibility-info {
	padding-top: $grid-unit-05;
	padding-bottom: $grid-unit-05;
	margin: 0 $grid-unit-20 $grid-unit-20;
	display: flex;
	align-items: center;
	justify-content: start;
}