/* components/disclosure: a chip with a chevron and a list that drops down under it, aligned to its end.
   The same rules style the <details><summary> (no script) and the <button aria-expanded> (disclosure.js).
   The chip and the items are buttons (components/button); here is what makes them a disclosure, and
   their colours, which are the disclosure tokens of css/tokens.css (by default the primary and
   secondary variants), so a site colours the picker and the share menu apart from the menu. */
@layer components {
	.dv-disclosure {
		position: relative;
		font-size: var(--font-size-small);
	}

	.dv-disclosure summary::-webkit-details-marker {
		display: none;
	}

	.dv-disclosure .dv-disclosure-button {
		display: flex;
		gap: 0.4em;
		padding: var(--space-1) var(--space-2);
		font-size: var(--font-size-small);
		border-radius: var(--radius-pill);
		list-style: none;
	}

	/* The chip's colours, except under keyboard focus: there the button's focus rule wins, on every
	   background, whatever the link order of the stylesheets. */
	.dv-disclosure .dv-disclosure-button:not(:focus-visible) {
		color: var(--disclosure-chip-color);
		background: var(--disclosure-chip-background);
		border-color: var(--disclosure-chip-border);
	}

	.dv-disclosure .dv-disclosure-button:hover:not(:focus-visible) {
		color: var(--disclosure-chip-hover-color);
		background: var(--disclosure-chip-hover-background);
		border-color: var(--disclosure-chip-hover-border);
	}

	/* The chevron: points down when closed, up when open. */
	.dv-disclosure .dv-disclosure-button::after {
		content: "";
		flex: none;
		inline-size: 0.4em;
		block-size: 0.4em;
		border-inline-end: 2px solid;
		border-block-end: 2px solid;
		transform: translateY(-0.15em) rotate(45deg);
		transition: transform var(--motion-duration) ease-out;
	}

	.dv-disclosure [open] > .dv-disclosure-button::after,
	.dv-disclosure .dv-disclosure-button[aria-expanded="true"]::after {
		transform: translateY(0.15em) rotate(-135deg);
	}

	/* The list drops down under the chip; the links keep a full touch target. */
	.dv-disclosure .dv-disclosure-list {
		position: absolute;
		inset-block-start: calc(100% + var(--space-1));
		inset-inline-end: 0;
		display: block;
		min-inline-size: 100%;
		max-inline-size: calc(100vw - 1em);
		margin: 0;
		padding: var(--space-1) 0;
		font-size: var(--font-size-body);
		list-style: none;
		background: var(--disclosure-panel-background);
		border: 2px solid var(--disclosure-panel-border);
		border-radius: var(--radius-panel);
		box-shadow: var(--shadow-panel);
	}

	.dv-disclosure .dv-disclosure-list[hidden] {
		display: none;
	}

	.dv-disclosure .dv-disclosure-item {
		display: flex;
		justify-content: flex-start;
		inline-size: 100%;
		padding: var(--space-2) var(--space-3);
		font-size: var(--font-size-body);
		line-height: var(--font-line-height);
		text-align: start;
		white-space: nowrap;
		border: 0;
		border-inline-start: 0.3em solid transparent;
	}

	/* The items' colours, again not under keyboard focus. */
	.dv-disclosure .dv-disclosure-item:not(:focus-visible) {
		color: var(--disclosure-item-color);
		background: var(--disclosure-item-background);
	}

	.dv-disclosure .dv-disclosure-item:hover:not(:focus-visible) {
		color: var(--disclosure-item-hover-color);
		background: var(--disclosure-item-hover-background);
	}

	/* The current item: bold, underlined (components/button) and a bar at the start, not only a colour. */
	.dv-disclosure .dv-disclosure-item[aria-current] {
		border-inline-start-color: var(--disclosure-item-current-marker);
	}

	.dv-disclosure .dv-disclosure-item:focus-visible {
		outline-offset: calc(-1 * var(--focus-outline-width));
	}

	/* The status line of an action item: nothing until its script fills it, then a few lines of text
	   under the button on the item's surface, wrapped (an address can be long), never wider than a
	   readable measure. */
	.dv-disclosure .dv-disclosure-status {
		margin: 0;
		padding: 0 var(--space-3);
		max-inline-size: 20em;
		font-size: var(--font-size-small);
		white-space: normal;
		overflow-wrap: anywhere;
		color: var(--disclosure-item-color);
		background: var(--disclosure-item-background);
	}

	.dv-disclosure .dv-disclosure-status:not(:empty) {
		padding-block: var(--space-1) var(--space-2);
	}
}