@use "../../../scss/mixins/breakpoints";
@use "../../../scss/calypso-colors";

.jp-checkbox-answer__container {
	position: relative;

	margin-bottom: 1rem;
}

.jp-checkbox-answer__checkbox {
	display: flex;
	align-items: center;

	box-sizing: border-box;
	height: 100%;
	padding: 0.875rem 1rem;
	// Box padding + icon width + icon/text padding
	padding-inline-end: calc(1rem + 18px + 0.5rem);

	background: var(--jp-white);
	border: 1px solid var(--jp-gray-5);
	border-radius: var(--jp-border-radius);
	color: var(--jp-gray-100);

	&:focus-within {
		border-color: currentColor;
	}

	&.checked {
		background: var(--jp-gray-0);
	}
}

.jp-checkbox-answer__title {
	display: flex;
	align-items: center;
	flex: 1;

	box-sizing: border-box;
	height: 100%;
	padding: 0.875rem 1rem;
	// Box padding + icon width + icon/text padding
	padding-inline-end: calc(1rem + 18px + 0.5rem);

	background: var(--jp-white);
	border: 1px solid var(--jp-gray-5);
	border-radius: var(--jp-border-radius);
	color: var(--jp-gray-100);

	&:focus-within {
		border-color: currentColor;
	}

	&.checked {
		background: var(--jp-gray-0);
	}
}

.jp-checkbox-answer__checkbox-input {

	&[type="checkbox"],
	&[type="radio"] {
		width: 20px;
		min-width: 20px;
		height: 20px;
		margin: 0;
		margin-inline-end: 1rem;

		border: 1px solid currentColor;
		border-radius: 2px;

		&:checked::before {
			width: 18px;
			height: 18px;
			margin: 0;

			background-color: var(--jp-black);
			content: url(data:image/svg+xml,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M14.7791%204.00004L7.36198%2013.9753L3.06108%2010.7773%22%20stroke%3D%22white%22%2F%3E%3C%2Fsvg%3E);
		}

		&:focus {
			border-color: currentColor;
			box-shadow: none;
		}
	}
}

.jp-checkbox-answer__info {
	position: absolute;
	top: 0;
	right: 0;

	display: flex;
	align-items: center;

	height: 100%;
	// Box padding
	margin-inline-end: 1rem;

	[dir="rtl"] & {
		right: auto;
		left: 0;
	}
}
