/* FILE: customize-controls/_control-checkbox.scss */

.customize-control-multicheckbox {
	--customize-control--color--selected: #3858e9;
	--customize-control--color--selected-text: #fff;
	// https://icon-sets.iconify.design/ph/pencil-line/
	--customize-control--icon--edit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%23000' d='m227.31 73.37l-44.68-44.69a16 16 0 0 0-22.63 0L36.69 152A15.86 15.86 0 0 0 32 163.31V208a16 16 0 0 0 16 16h44.69a15.86 15.86 0 0 0 11.31-4.69L227.31 96a16 16 0 0 0 0-22.63M51.31 160L136 75.31L152.69 92L68 176.68ZM48 179.31L76.69 208H48Zm48 25.38L79.31 188L164 103.31L180.69 120Zm96-96L147.31 64l24-24L216 84.68Z'/%3E%3C/svg%3E");

	&:has( .is-negative ) {
		--customize-control--color--selected: #e61919;
	}

	.is-inline,
	details ul {

		label {
			position: relative;
			display: block;
			padding: .5em .75em;
			margin: 0;
			line-height: 1.2;
			border: 1px solid;
			border-color: color-mix( in srgb, currentColor 25%, transparent );
			border-radius: .25em;
			overflow: hidden;
			cursor: pointer;
		}

		[type="checkbox"] {
			position: absolute;
			inset: 0;
			width: 100%;
			height: 100%;
			opacity: 0;
		}

		&:not(.is-inverted) label:has( [type="checkbox"]:checked ),
		&.is-inverted label:has( [type="checkbox"]:not(:checked) ) {
			background: var(--customize-control--color--selected);
			color: var(--customize-control--color--selected-text);
			box-shadow: none;
		}
	}

	.is-inline {
		display: flex;
		flex-wrap: wrap;
		gap: .5em;
		margin: 1em 0;

		label {
			background: #fff;
			color: #111;
			transition: box-shadow .3s;

			&:not( :hover, :focus, :focus-within ) {
				box-shadow: 0 .1em .2em rgba( #000, .1 );
			}
		}

		li {
			margin: 0;
		}
	}

	.is-negative {

		&:not(.is-inverted) label:has( [type="checkbox"]:checked ):not( :hover, :focus, :focus-within ),
		&.is-inverted label:has( [type="checkbox"]:not(:checked) ):not( :hover, :focus, :focus-within ) {
			text-decoration: line-through;
		}
	}

	details {
		padding: 1em;
		margin: .5em 0;
		background: #fff;
		color: #111;
		border: 1px solid;
		border-color: color-mix( in srgb, currentColor 25%, transparent );
		border-radius: .25em;
		transition: box-shadow .3s;

		&:not( :hover, :focus-within ) {
			box-shadow: 0 .1em .2em rgba( #000, .1 );
		}

		&:has( :checked ):not( [open] ) {
			background: var(--customize-control--color--selected);
			color: var(--customize-control--color--selected-text);
			box-shadow: none;

			summary::before {
				content: '';
				display: inline-block;
				width: 1.382em;
				height: 1.382em;
				margin-inline-end: .5em;
				margin-block-start: -.25em;
				background-color: currentColor;
				mask-image: var(--customize-control--icon--edit);
				mask-repeat: no-repeat;
				mask-size: 100% 100%;
				vertical-align: middle;
			}
		}

		ul {
			margin-top: 1em;

			label {
				border-style: dashed;
			}
		}

		li {
			margin: .5em 0;
		}

		// Used as a label.
		small {
			display: block;
			margin: 0 0 .5em;
			font-size: .75em;
			font-weight: 700;
			text-transform: uppercase;
		}

		code {
			font-size: inherit;
			background: color-mix( in srgb, currentColor 10%, transparent );
		}
	}

	summary {
		position: relative;
		padding-inline-end: 2em;
		font-weight: 700;
		list-style: none;
		cursor: pointer;

		&::after {
			content: '';
			position: absolute;
			width: 1em;
			height: 1em;
			top: 50%;
			inset-inline-end: .25em;
			background: radial-gradient( currentColor 50%, transparent 50% );
			background-size: .33em .33em;
			background-repeat: repeat-y;
			background-position: 50% 50%;
			border-radius: 0;
			transform: translateY( -50% );
			transition: transform .2s cubic-bezier( .175, .885, .32, 1.275 );
		}
	}

		[open] > summary::after {
			transform: translateY( -50% ) rotate( 90deg );
		}
}
