/*
    Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property
    - The "symbol *" part is to solve Firefox SVG sprite bug
 */
*:where(
		:not(
				html,
				iframe,
				canvas,
				img,
				svg,
				video,
				details,
				summary,
				svg *,
				symbol *
			)
	) {
	all: unset;
	display: revert;
}

/* Preferred box-sizing value */
:where(*, *::before, *::after) {
	box-sizing: border-box;
	border: 0px solid transparent;
}

/* Reapply the pointer cursor for anchor tags */
:where(a, button) {
	cursor: revert;
}

/* Remove list styles (bullets/numbers) */
:where(ol, ul, menu) {
	list-style: none;
}

/* For images to not be able to exceed their container */
:where(img) {
	max-width: 100%;
}

/* removes spacing between cells in tables */
:where(table) {
	border-collapse: collapse;
}

/* Safari - solving issue when using user-select:none on the <body> text input doesn't working */
:where(input, textarea) {
	-webkit-user-select: auto;
}

/* revert the 'white-space' property for textarea elements on Safari */
:where(textarea) {
	white-space: revert;
}

/* minimum style to allow to style meter element */
:where(meter) {
	-webkit-appearance: revert;
	appearance: revert;
}

/* reset default text opacity of input placeholder */
::placeholder {
	color: unset;
}

/* fix the feature of 'hidden' attribute.
   display:revert; revert to element instead of attribute */
:where([hidden]) {
	display: none;
}

/* revert for bug in Chromium browsers
	- fix for the content editable attribute will work properly.
   - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element */
:where([contenteditable]:not([contenteditable='false'])) {
	-moz-user-modify: read-write;
	-webkit-user-modify: read-write;
	overflow-wrap: break-word;
	-webkit-line-break: after-white-space;
	-webkit-user-select: auto;
}

/* apply back the draggable feature - exist only in Chromium and Safari */
:where([draggable='true']) {
	-webkit-user-drag: element;
}

:where(.revert *) {
	all: revert;
	accent-color: initial;
	background-color: initial;
	caret-color: initial;
	color: initial;
	scrollbar-color: initial;
	font-family: initial;
}
