details {
	outline: 1px solid transparent;
}

details,
search {
	width: 100%;
}

main > div:has(> aside + dialog + section) > aside > div > form > search {
	grid-template-columns: calc(3em + (var(--largeSpacing) * 2)) minmax(0, 1fr) 3em;
}

search,
details summary {
	min-height: 2em;
	font-weight: bold;
}

search,
details summary {
	border-bottom: 2px solid transparent;
}

details summary {
	overflow: hidden;
}

details summary::-webkit-details-marker {
	display: none;
}

details[open] summary {
	cursor: pointer;
}

details summary > small:last-child {
	min-width: 0;
	max-width: 50%;
	margin-left: auto;
	overflow: hidden;
	color: oklch(from var(--contrastOverlayColor) l c h / .7);
	font-size: .75em;
	font-weight: normal;
	text-overflow: ellipsis;
	white-space: nowrap;
}

details summary > small:last-child:empty {
	display: none;
}

search:has(input:not(:placeholder-shown)),
search:has(input:focus),
details[open] summary {
	border-color: var(--primaryColor);
}

/* Icon found on Inventory.css */
search > span.mdi-magnify,
details summary:before {
    display: flex;
    align-items: center;
    justify-content: center;
	height: 100%;
	min-width: 3em;
    margin: 0 var(--largeSpacing);
	transform: scale(1.5);    
	backdrop-filter: unset;
    -webkit-backdrop-filter: unset;
	background-color: unset;
}

main > div:has(> aside + dialog + section) > aside > div > form > search > span.mdi-magnify {
	width: auto;
}

main > div:has(> aside + dialog + section) > aside > div > form > search > button {
	width: 3em;
}

/* Arrow indicator */
search button,
details summary:after {
	content: "\F035F"; /* mdi-menu-right */
	display: flex;
    align-items: center;
    justify-content: center;
	min-width: 3em;
	height: 2em;
	margin-left: auto;
	color: rgba(0, 0, 0, 0.25);
    transition: all ease-out 250ms;
}

details summary:has(> small:last-child:not(:empty)):after {
	margin-left: 0;
}

details summary:hover:after {
	color: oklch(from var(--contrastOverlayColor) l c h / 0.75);
}

details[open] summary:after {
	color: rgba(0, 0, 0, 1.00);
	transform: rotate(90deg);
}

details > div {
    display: grid;
    justify-items: center;
    grid-template-columns: 1fr 1fr;
    gap: var(--largeSpacing);
    border-radius: 0 0 var(--borderRadius) var(--borderRadius);
	background-color: oklch(from var(--highlightColor) l c h / 0.25);
	overflow: auto;
}

/* Open the tab when summary is checked */
details[open] > div {
	max-height: 0;
	padding: 0 var(--largeSpacing);
	animation: detailsOpen 500ms ease-in forwards;
}
@keyframes detailsOpen {

	from {
		max-height: 0;
		padding: 0 var(--largeSpacing);
	}

	to {
		max-height: 50vh;
		padding: calc(var(--largeSpacing) / 2) var(--largeSpacing) calc(var(--largeSpacing) / 4);
	}

}