/*
Resources:
https://getbootstrap.com/docs/5.0/forms/overview/
https://www.tjvantoll.com/2013/04/15/list-of-pseudo-elements-to-style-form-controls/
*/

/****************/
/* custom list  */
/****************/

/* li::marker { content: "• "; } /* ::marker is bad, its shown even if list-style:none */

@layer normalize {

ul {
	list-style-type: '•  '; 	/* ·•●⏺‣▶⏵✔⊚○◌🞅🞇🞉🖝 */
	padding-inline-start: 1em;
}
ul > li::marker {
	font-size: 1em;
}

	/*****************/
/* custom select */
/*****************/
:where(select:not([size], [multiple])) {
	appearance: none;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='4'><path d='M4 0h6L7 4'/></svg>");
	background-repeat: no-repeat;
	background-position: 100% 50%;
	background-size: 1em;
	padding-right: 1.3em !important;
	/*
	only possible if in :where() so background-color can be overwritten
	xbackground: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='4'%3E%3Cpath d='M4 0h6L7 4'/%3E%3C/svg%3E") no-repeat right center / 1em;
	xtext-overflow: ellipsis;
	*/
}

}

/***************************/
/* custom check-/radiobox  */
/***************************/

input:is([type=radio], [type=checkbox]) {
    padding:0 !important;
	appearance: none;
	transform:rotate(.002deg); /* improve rendering in ff, chrome */

    width: 1.3em;
	height: 1.3em;
	flex-grow:0;
    vertical-align: -15%;
	background-color: #fff;
	border: solid 1px;

	border-width: var(--control-border-width, 1px);
	border-color: var(--color-line, currentColor);

	position: relative;
	border-radius: .15em;
	padding: 0;

	&:checked {
		border-color: var(--color, blue);
	}
	&::before {
		content: "";
		position: absolute;
		inset: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		font-family: Arial, Helvetica, sans-serif;
		font-weight: normal;
		font-size: .65em;
		line-height:1.1;
	}
	&:checked::before {
		background-color: var(--color, blue);
	}

	/* indicator, z-index can not be behinde checkbox, only behinde ::before */
	&:not(:disabled)::after {
		content: '';
		position: absolute;
		inset: -60%;
		border-radius: 50%;
		transition: background-color .3s;
	}
	&:hover::after {
		background-color: #0001;
	}

}
/* checkbox */
input[type=checkbox] {
	&:checked::before { content: "✔"; }
}
/* radio */
input[type=radio] {
	border-radius: 999px;
	&::before {
		border-radius: inherit;
		border: .19em solid #fff;
	}
}
/* indeterminate */
input:is([type=radio],[type=checkbox]):indeterminate::before {
	color: currentColor;
	color: #000;
	font-size: 1em;
	content: "−"; /* − ﹣*/
	opacity:.6;
	font-weight:500;
}


/***************************/
/* color input             */
/***************************/

input[type=color] {
	padding: 0;
	border-radius: 99em;
	width: 1.4em;
	height: 1.4em;
	border-width: 1px;
	overflow: hidden;
	box-shadow: 0 0 .5em #0003;
	cursor: pointer;
    vertical-align:-0.3em;
}
input[type=color]::-moz-color-swatch {
	border: 0;
}
input[type=color]::-webkit-color-swatch {
	border: 0;
}
input[type=color]::-webkit-color-swatch-wrapper {
	padding: 0;
}

/***************************/
/* scrollbars              */
/***************************/

html {
	--scrollbar-color-track: var(--color-area, #f4f4f4);
	--scrollbar-color-thumb: var(--color, #ccc);
	scrollbar-color: var(--scrollbar-color-thumb) var(--scrollbar-color-track);
}

::-webkit-scrollbar-track { background: var(--scrollbar-color-track); }/* remove after safari 26.2 */
::-webkit-scrollbar-thumb { background-color: var(--scrollbar-color-thumb); }

select, textarea { scrollbar-width: thin; }


/***************************/
/* range inputs            */
/***************************/
label.btn {
    position:relative;
}
label.btn > :is([type=radio],[type=checkbox]) {
	position:absolute;
	inset:0;
	width:auto !important;
	height:auto !important;
    appearance: none;
    border:0 !important;
	background:none !important;
	border-radius:inherit;
	pointer-events:none;
	&::after, &::before {
		content:none;
	}
}
label.btn:has(>:is([type=radio],[type=checkbox])) {
	&::before {
		content:' ';
		display:inline-block;
		min-width:1rem;
	}
	&:has(:checked) {
		background-color: var(--color-dark);
		&::before {
			content:'✔';
		}
	}
}

/***************************/
/* range inputs            */
/***************************/

input[type=range] {
	background-color: transparent;
	border: 0;
    appearance: none;
	padding: 0;

	/* where(webkit, moz) not working for pseudo :( */
	&::-webkit-slider-runnable-track {
		box-sizing: border-box;
		block-size: .5em;
		background: #fff;
		border: 1px solid #0008;
		border-radius: 1em;
		cursor: pointer;
	}
	&::-moz-range-track {
		box-sizing: border-box;
		block-size: .5em;
		background: #fff;
		border: 1px solid #0008;
		border-radius: 1em;
		cursor: pointer;
	}

	&::-webkit-slider-thumb {
		box-sizing: border-box;
		width: 1.3em;
		height: 1.3em;
		background: var(--color);
		border-radius: 100%;
		cursor: pointer;
		margin-block-start: -.47em;
		-webkit-appearance: none;
	}
	&::-moz-range-thumb {
		box-sizing: border-box;
		width: 1.3em;
		height: 1.3em;
		background: var(--color);
		border-radius: 100%;
		cursor: pointer;
		border-color:transparent;
	}
	&:hover::-webkit-slider-thumb {
		box-shadow: 0 0 0 .5em #0001;
	}
	&:hover::-moz-range-thumb {
		box-shadow: 0 0 0 .5em #0001;
	}


}


/* autofill (chrome) */
input:-webkit-autofill { /* also works for firefox! */
	filter: none;
	box-shadow: 0 0 0 100px var(--color-light) inset;
}

::selection {
	background: hsl(from var(--color) h s l / 0.3);
}

/* Spin Buttons
- bigger chromes spinners
- hide firefox spnners
*
input[type=number] {
    appearance:textfield;
}
@supports selector(::-webkit-inner-spin-button) {
	input[type="number"] {
		padding-right:1.2em;
	}
	::-webkit-inner-spin-button {
		position: absolute;
		right: 0;
		top: -1px;
		bottom: -1px;
		padding-left:.2em;
		padding-right:.2em;
	}
}
/**/


/***************************/
/* details / summary       */
/***************************/
details { border-block-end: 1px solid var(--color-line); transition-duration:.3s; }
summary {
    padding-block: .5rem;
    padding-inline: 0;
	line-height:1; /* to center floated ::after */
	--line-height:1; /* to center floated ::after */
}
details[open] > summary { margin-block-end: .5rem; }
details[open] { padding-block-end: 1rem; }


summary { list-style-type: none; }
summary::-webkit-details-marker { display: none; }
summary::after {
	line-height:.9;
	content:'▾'; /* not working in all browsers: ⏵❯ unknown support: ⟩⟩ */
	transform: rotate(-90deg);
	width: 1rem;
	height: 1rem;
	float: right;
	transition: transform .2s;
}
details[open] > summary::after {
	transform: rotate(0deg);
}