/* INPUT */
dtx-input, dtx-textarea {
	position: relative;
	width: 100%;
	min-height: 55px;
	border-radius: var(--border-radius, 12px);
	border: 1px solid var(--border);
	background: var(--border);
	transition: .2s;

	label {
		position: absolute;
		inset: calc(50% - .6rem) 0 auto 12px;
		color: var(--text-light);
		line-height: 1.2;
		transition: .2s;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		pointer-events: none;
	}

	input, textarea {
		width: 100%;
		padding: 24px 12px 8px 12px;
		border: none;
		background: transparent;
		outline: none;
	}
	textarea {
		max-height: 250px;
		padding: 26px 12px 6px;
		field-sizing: content;
		resize: none;
		line-height: 1.5;
	}

	input::placeholder, textarea::placeholder { color: transparent; user-select: none; }

	&:focus-within, &:has(input:not(:placeholder-shown)) {
		label {
			top: 8px;
			font-size: .8rem;
			color: var(--accent);
		}
	}
	&:focus-within { border-color: var(--accent); }

	&:has(input:user-invalid), &:has(textarea:user-invalid) {
		border: 1px solid var(--error);
		label { color: var(--error); }
		label::after {
			content: '(' attr(title) ')';
			margin-left: 8px;
			color: inherit;
		}
	}

	dtx-slot-end {
		position: absolute;
		inset: 0 0 0 auto;
		display: flex;
	}

	&:has(input:is(:-webkit-autofill, :autofill)) {
		border-color: transparent;
		input { border-radius: inherit; }
		* { color: #000 !important; }
	}

	input:is([type="date"], [type="time"]) { min-height: 53px; }
	&:is([type="date"], [type="time"])::after,
	input:is([type="date"], [type="time"])::-webkit-calendar-picker-indicator {
		position: absolute;
		inset: 0 0 auto auto;
		width: 52px;
		height: 49px;
		border-radius: 11px;
		opacity: 0;
	}
	&:is([type="date"], [type="time"])::after {
		content: 'calendar_today';
		padding: 15px 14px;
		font-size: 22px;
		font-family: 'Material Symbols Outlined';
		opacity: .7;
		pointer-events: none;
	}
	&[type="time"]::after { content: 'schedule'; }
}

/* TEXTAREA - hide scrolled text behind label */
dtx-textarea:is(:focus-within, :has(textarea:not(:placeholder-shown))) label {
	inset: 0 20px auto 0 !important;
	padding: 8px 12px;
	border-radius: 12px;
	background: var(--border);
	font-size: .8rem;
	color: var(--accent);
	mask-image: linear-gradient(to bottom, black 80%, transparent);
}

input:is([type="date"], [type="time"]) {
	position: relative;
	/* text-align: center; */

	&::-webkit-calendar-picker-indicator {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		padding: 0;
		opacity: 0;
	}
}

dtx-file-input {
	position: relative;
	width: 100%;
	min-height: 53px;
	border-radius: var(--border-radius, 12px);
	border: 2px dashed var(--light-dark);
	transition: .2s;

	label {
		position: absolute;
		inset: calc(50% - .6rem) 0 auto 12px;
		color: var(--text-light);
		line-height: 1.2;
		transition: .2s;
		pointer-events: none;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	&.filled label {
		top: 8px;
		font-size: .8rem;
		color: var(--accent);
	}

	input {
		width: 100%;
		padding: 28px 12px 9px;
		outline: none;
		opacity: 0;
		cursor: pointer;
		transition: .2s;
	}
	&.filled input { opacity: 1; }
	::file-selector-button { display: none; }

	dtx-button.icon {
		position: absolute;
		inset: 0 0 0 auto;
		width: 53px;
		height: 51px;
		padding: 14px;
	}

	&:has(input:focus-visible) { outline: 2px solid var(--outline); }

	&.dragover { background: var(--accent-light); }

	&.small {
		width: 53px;
		border-color: transparent;

		label { display: none; }
	}
}

/* CHIPS */
dtx-chips-input {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	width: 100%;
	min-height: 55px;
	padding: 28px 8px 8px;
	border-radius: var(--border-radius, 12px);
	border: 1px solid var(--border);
	background: var(--border);
	transition: .2s;

	label {
		position: absolute;
		inset: 8px auto auto 12px;
		color: var(--accent);
		font-size: .8rem;
		line-height: 1.1;
		transition: .2s;
		pointer-events: none;
	}

	input {
		flex-grow: 1;
		padding: 8px 4px 7px;
		border: none;
		background: transparent;
		outline: none;
	}

	chips-container { display: contents; }
	.chip {
		display: flex;
		align-items: center;
		gap: 6px;
		border-radius: 50px;
		padding: 6px 6px 6px 14px;
		background: var(--accent-light);

		dtx-button {
			width: 12px;
			height: 12px;
			padding: 12px;

			span.material-symbols-outlined { font-size: 20px;}
		}
	}

	&:state(user-invalid) {
		border: 1px solid var(--error) !important;
		label { color: var(--error) !important; }
		label::after {
			content: '(' attr(title) ')';
			margin-left: 8px;
			color: inherit;
		}
	}

	&:has(input:focus) { border-color: var(--accent); }

	::-webkit-calendar-picker-indicator { color: transparent; }
}

/* SELECT */
dtx-select, dtx-multiple-select {
	position: relative;
	width: 100%;
	min-height: 55px;
	border-radius: var(--border-radius, 12px);
	border: 1px solid var(--border);
	background: var(--border);
	transition: .2s;

	label {
		position: absolute;
		inset: calc(50% - .6rem) 48px auto 12px;
		color: var(--text-light);
		line-height: 1.2;
		transition: .2s;
		pointer-events: none;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	/* marker */
	&::after {
		content: 'keyboard_arrow_down';
		position: absolute;
		inset: 13px 12px auto auto;
		color: var(--text-light);
		font-family: 'Material Symbols Outlined';
		font-size: 28px;
		transition: rotate .3s;
		pointer-events: none;
	}
	&:has(:popover-open)::after { rotate: 180deg; }

	button.trigger {
		position: absolute;
		inset: 0;
		display: block;
		padding: 24px 48px 8px 12px;
		text-align: start;
		white-space: nowrap;
		text-overflow: ellipsis;
		background: transparent;
		&:active { scale: 1; }
	}

	&:has(button.trigger:not(:empty)) label {
		top: 8px;
		font-size: .8rem;
		color: var(--accent);
	}

	&:has(.trigger:focus-visible) { outline: 2px solid var(--outline); }

	dtx-slot-end {
		position: absolute;
		inset: 0 0 0 auto;
		display: flex;
	}

	select-picker {
		position-area: center bottom;
		width: calc(anchor-size(width) + 2px); /* to account for the border width of the anchor */
		max-height: 400px;
		margin-top: 4px;
		border: none;
		border-radius: 12px;
		background: var(--border);
		overflow: hidden auto;
		scrollbar-color: #999 transparent;
		scrollbar-width: auto;
	}

	dtx-option {
		display: block;
		margin: 4px;
		padding: 16px 12px;
		border-radius: 8px;
		color: var(--text-light);
		cursor: pointer;
		transition: .2s;

		&:hover { filter: brightness(.6); }
		&[selected] {
			position: relative;
			display: flex;
			align-items: center;
			gap: 12px;
			color: var(--text);
			background: var(--accent-light);

			&::after {
				content: 'check';
				margin: -5px 0 -5px auto;
				color: var(--text);
				font-family: 'Material Symbols Outlined';
				font-size: 24px;
			}
		}
	}

	.select-picker-search {
		position: sticky;
		top: 0;
		width: calc(100% - 8px);
		margin-inline: 4px;
		padding: 16px 12px 12px;
		border: none;
		border-bottom: 1px solid var(--background-transparent);
		color: var(--text-light);
		background: inherit;
		outline: none;
		z-index: 1;
		transition: .2s;

		&:focus { border-bottom-color: currentColor; box-shadow: 0 1px 0; }
	}

	&:state(user-invalid) {
		border: 1px solid var(--error);
		label { color: var(--error) !important; }
		label::after {
			content: '(' attr(title) ')';
			margin-left: 8px;
			color: inherit;
		}
	}

	&[type="inline"] {
		width: fit-content;
		background: transparent;
		border: none;
		label { display: none; }

		&::after { top: 14px; }

		.trigger {
			position: static;
			width: fit-content;
			padding: 20px 40px 20px 8px;
		}
		select-picker {
			width: max-content;
			margin-top: 8px;
		}
	}
}

/* BUTTON */
button, dtx-button {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	width: 100%;
	padding: 16px;
	border-radius: 12px;
	border: none;
	cursor: pointer;
	user-select: none;
	overflow: hidden;
	white-space: nowrap;
	transition: .2s, height 0s, font-size 0s;

	&.primary { color: var(--background); background: var(--text); }
	&.accent { color: var(--background); background: var(--accent); --loading-color: var(--background); }
	&.danger { color: var(--background); background: var(--error); }
	&.secondary { color: var(--text); background: transparent; }
	&.link {
		padding-inline: 0;
		color: var(--text);
		background: transparent;
	}
	&.outline {
		color: var(--text);
		background: transparent;
		box-shadow: 0 0 0 1px inset var(--border);
	}
	&.outline.primary { box-shadow: 0 0 0 1px inset var(--text); color: var(--text); }
	&.outline.accent { box-shadow: 0 0 0 1px inset var(--accent); color: var(--accent); }
	&.danger.secondary { color: var(--error); }

	&.pill { border-radius: 50px; }

	&.loading :is(span, button) { color: transparent !important; }
	&.loading::before {
		content: '';
		position: absolute;
		inset: 0;
		background: inherit;
		z-index: 1;
	}
	&.small {
		padding: 8px;
		gap: 8px;

		span.material-symbols-outlined { font-size: 20px; }
	}

	&:hover, &:focus-visible { filter: brightness(.8); }
	&:active { scale: .98; }

	button, span.material-symbols-outlined { color: inherit; }
}
dtx-button {
	button { display: contents; pointer-events: none; }

	&.stack {
		flex-direction: column;
		padding: 20px;

		&:active { scale: .95; }
	}

	&.icon {
		display: flex;
		justify-content: center;
		width: 53px;
		flex-shrink: 0;
		aspect-ratio: 1;

		&:active { scale: .9; }
		&:not(.danger):hover { background: var(--accent-light); }
	}
	&:not(.stack, [type="icon"]) span { margin-block: -5px; }
	&:not(.stack, [type="icon"]) span:first-child { margin-inline: -4px -2px; }
}

body:is(.dark, .spotify, .black) dtx-button {
	&.invert-icon img { filter: invert(1); }
}

/* CHECKBOX */
input[type="checkbox"] {
	appearance: none;
	position: relative;
	width: 20px;
	height: 20px;
	border: 1px solid var(--background);
	border-radius: 6px;
	background: var(--border);
	transition: .2s;

	&:checked { background: var(--accent-light); }

	&::before {
		content: '';
		position: absolute;
		inset: 3px 3px 4px;
		background: var(--accent);
		clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 0%, 70% 0%, 70% 100%);
		rotate: 45deg;
		opacity: 0;
		transition: .2s;
	}
	&:checked::before { opacity: 1; }
}

/* RADIO GROUP */
dtx-radio-group {
	display: flex;
	gap: 12px;
	width: fit-content;

	label:empty { display: none; }

	options {
		position: relative;
		display: flex;
		align-items: center;
		gap: 4px;
		padding: 4px;
		border-radius: 12px;
		background: var(--border);
		transition: box-shadow .2s;
	}

	options label {
		position: relative;
		display: flex;
		align-items: center;
		padding: 8px 12px 8px 10px;
		border-radius: 8px;
		color: var(--text);
		transition: color .2s, background .35s;

		input {
			appearance: none;
			position: absolute;
			inset: 0;
			border-radius: 8px;
			cursor: pointer;
		}

		&:has(input:checked) { color: var(--text); }
	}

	options::before {
		content: '';
		position: absolute;
		position-anchor: --active;
		inset: anchor(top) anchor(right) anchor(bottom) anchor(left);
		border-radius: 8px;
		background: var(--background-light);
		transition: .2s;
		pointer-events: none;
	}
	options input:checked { anchor-name: --active; }

	&.stepper {
		counter-reset: step;

		options {
			gap: 28px;
			padding: 0;
			background: transparent;

			&::before {
				border-radius: 12px;
				border: 1px solid var(--light-dark);
				background: transparent;
			}
		}

		options label {
			padding: 8px;

			&::before {
				counter-increment: step;
                content: counter(step);
                display: grid;
                place-items: center;
                width: 22px;
                height: 22px;
                margin-right: 8px;
                border-radius: 6px;
                background: var(--light-dark);
			}

			&:not(:last-child)::after {
				content: '';
				position: absolute;
				inset: 50% -28px auto auto;
				height: 1px;
				width: 28px;
				background: var(--light-dark);
			}
		}
	}
}

/* SWITCH */
dtx-switch {

	label {
		display: flex;
		gap: 12px;
		align-items: center;
		padding: 16px 0;
		cursor: pointer;
	}

	&[type="switch"] {
		width: 100%;
		border-radius: 12px;
		border: 1px solid var(--border);

		label {
			justify-content: space-between;
			width: 100%;
			padding: 15px 12px;
		}

		&.outline label {
			padding: 14px 12px;
			border-radius: 12px;
			border: 1px solid var(--border);
		}

		input {
			appearance: none;
			position: relative;
			width: 40px;
			height: 24px;
			border-radius: 8px;
			border: none;
			background: var(--border);
			transition: .2s;

			&:checked { background: var(--accent); }

			&::before {
				all: initial; /* reset the normal input[type="checkbox"] styles */
				content: '';
				position: absolute;
				inset: 3px 19px 3px 3px;
				border-radius: 6px;
				background: var(--background);
				transition: .15s;
			}
			&:checked::before { inset: 3px 3px 3px 19px; }
		}
	}
}

/* ACCORDION */
details {
	position: relative;
	width: 100%;
	border-radius: var(--border-radius, 12px);
	border: 1px solid var(--border);
	background: var(--background);
	transition: .3s allow-discrete;

	summary {
		position: relative;
		padding: 24px 56px 24px 16px;
		cursor: pointer;
		outline: none;

		&::marker { content: ''; }

		&::after {
			content: 'keyboard_arrow_down';
			position: absolute;
			inset: 18px 12px auto auto;
			color: var(--text-light);
			font-family: 'Material Symbols Outlined';
			font-size: 28px;
			transition: rotate .3s;
		}
	}
	&[open] summary::after { rotate: 180deg; }

	&:has(summary:focus-visible) { outline: 2px solid var(--outline); }

	&::details-content {
		height: 0;
		transition: height .3s ease, content-visibility .3s ease allow-discrete;
		overflow: clip;
	}
	&[open]::details-content { height: auto; }

	.details {
		display: flex;
		flex-direction: column;
		gap: 12px;
		border-top: 1px solid var(--border);
		border-radius: 0;
		padding: 12px;
	}
}

/* should be last to override the above styles */
fieldset {
	border: none;
	display: contents;

	&:not([plain]) {
		> * { border-radius: 4px; }

		> *:first-child {
			border-radius: 12px 12px 4px 4px;
			& > input { border-radius: 12px 12px 4px 4px; }
			& > dtx-slot-end > * { border-radius: 11px 11px 4px 4px; }
		}
		> *:last-child {
			border-radius: 4px 4px 12px 12px;
			& > input { border-radius: 4px 4px 12px 12px; }
			dtx-slot-end > * { border-radius: 4px 4px 11px 11px; }
		}
	}
}

form.invalid {
	dtx-input:has(input:invalid),
	dtx-chips-input:invalid,
	dtx-select:invalid, dtx-multiple-select:invalid {

		border: 1px solid var(--error);
		label { color: var(--error) !important; }
		label::after {
			content: '(' attr(title) ')';
			margin-left: 8px;
			color: inherit;
		}
	}

	dtx-radio-group:has(:invalid) options { box-shadow: 0 0 0 1px var(--error); }
}