@import (reference) '~jodit/src/styles/variables';

.jodit-ui-form-button-generator {
	width: 400px;

	@media (max-width: @screen-xs) {
		width: 100%;
	}

	&__row {
		display: flex;
	}

	&__col {
		width: calc(50% - var(--padding-default) / 2);
		padding-right: var(--padding-default);
	}

	&__col + &__col {
		margin-left: var(--padding-default);
	}

	&__title {
		padding: 2px 4px;
		margin-bottom: calc(var(--padding-default) / 2);
		background: #f5f5f5;
		font-weight: 700;
	}

	&__group {
		margin-bottom: var(--padding-default);
	}

	&__title,
	label {
		display: flex;
		align-items: center;
		user-select: none;
	}

	input[type='checkbox'] {
		width: 16px;
		height: 16px;
		border: 1px solid var(--color-border);
		appearance: none;

		&:focus {
			outline: 0;
		}

		&:checked {
			background-color: var(--color-background-selection);
			background-image: data-uri('../../assets/check.svg');
			background-position: center;
			background-repeat: no-repeat;
			background-size: 100%;
		}
	}
}