/* wrapper */
.priority-group {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

/* item */
.priority-checkbox, .priority-radio {
	--pc-size: 16px;
	--pc-color: #a9a9a9;
	--pc-caption-color: inherit;
	--pc-border-width: 1px;
	--pc-check-color: #333;

	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	padding: 6px 8px;
	user-select: none;
	font-weight: 400;
	line-height: 1.2;

	transition: transform .25s ease, opacity .2s ease;
}

/* input */
.priority-checkbox input {
	display: none;
}

/* box */
.priority-checkbox .pc-box {
	position: relative;
	display: inline-block;
	width: var(--pc-size);
	height: var(--pc-size);
	border: var(--pc-border-width) solid var(--pc-color);
	box-sizing: border-box;
	background: transparent;
	transition: all .2s ease;
	flex: 0 0 auto;
}

/* default + false = checkbox */
.priority-checkbox:not([data-value="true"]) .pc-box,
.priority-checkbox[data-value="false"] .pc-box {
	border-radius: .25em;
}

/* true = circle */
.priority-checkbox[data-value="true"] .pc-box {
	border-radius: 50%;
}

/* icon - CR style animation */
.priority-checkbox .pc-box .pc-icon {
	position: absolute;
	display: block;
	width: 75%;
	height: 75%;
	top: 50%;
	left: 50%;
	background-color: var(--pc-check-color);

	transform: translate(-50%, -50%) scale(3) rotateZ(-20deg);
	opacity: 0;
	transition: all .3s ease-in;

	-webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 8l3 3 7-7' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 8l3 3 7-7' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* checked icon */
.priority-checkbox input:checked + .pc-box > .pc-icon {
	transform: translate(-44%, -50%) scale(1) rotateZ(0deg);
	opacity: 1;
}

/* caption */
.priority-checkbox .pc-caption {
	font-weight: 400;
	opacity: 1;
	color: var(--pc-caption-color, inherit);
	transition: opacity .2s ease, color .2s ease, font-weight .2s ease;
}

/* checked caption */
.priority-checkbox input:checked ~ .pc-caption {
	font-weight: 700;
}

/* disabled */
.priority-checkbox input:disabled ~ .pc-caption {
	opacity: .45;
}

.priority-checkbox input:disabled + .pc-box {
	opacity: .45;
}

.priority-checkbox:has(input:disabled) {
	cursor: default;
}

/* lock mode */
.priority-group.lock-active .priority-checkbox input:not(:checked) + .pc-box {
	opacity: .3;
}

.priority-group.lock-active .priority-checkbox input:not(:checked) ~ .pc-caption {
	opacity: .45;
}

/* hover */
.priority-checkbox:hover .pc-box {
	transform: scale(1.05);
}

/* click */
.priority-checkbox:active .pc-box {
	transform: scale(0.95);
}

/* input */
.priority-radio input {
	display: none;
}

/* radio circle */
.priority-radio .pc-box {
	position: relative;
	display: inline-block;
	width: var(--pc-size);
	height: var(--pc-size);
	border: var(--pc-border-width) solid var(--pc-color);
	border-radius: 50%;
	box-sizing: border-box;
	background: transparent;
	transition: all .2s ease;
	flex: 0 0 auto;
}

/* inner dot */
.priority-radio .pc-box .pc-icon {
	position: absolute;
	display: block;
	width: 50%;
	height: 50%;
	top: 50%;
	left: 50%;
	background-color: var(--pc-check-color);
	border-radius: 50%;

	transform: translate(-50%, -50%) scale(0);
	opacity: 0;
	transition: all .2s ease-in;
}

/* checked radio */
.priority-radio input:checked + .pc-box > .pc-icon {
	transform: translate(-50%, -50%) scale(1);
	opacity: 1;
}

/* caption */
.priority-radio .pc-caption {
	font-weight: 400;
	opacity: 1;
	color: var(--pc-caption-color, inherit);
	transition: opacity .2s ease, color .2s ease, font-weight .2s ease;
}

/* checked caption */
.priority-radio input:checked ~ .pc-caption {
	font-weight: 700;
}

/* disabled */
.priority-radio input:disabled ~ .pc-caption {
	opacity: .45;
}

.priority-radio input:disabled + .pc-box {
	opacity: .45;
}

.priority-radio:has(input:disabled) {
	cursor: default;
}