Select

/*
 * Bare: no border, fill or container. The wrapper keeps the Select's height
 * and its focus ring; only the border and background are cleared, and the
 * state shows in the text color: secondary at rest, default on hover and
 * while open.
 */
.pds-select--bare {
	min-width: 0;
	width: fit-content;
}

.pds-select--bare .pds-select__input-inner {
	column-gap: var(--pds-spacing-2xs);
}

.pds-select--bare .pds-select__input-wrapper {
	background-color: transparent;
	border-color: transparent;
	color: var(--pds-color-foreground-default-secondary);
	padding-inline: var(--pds-spacing-2xs);
}

.pds-select--bare .pds-select__input-wrapper:hover,
.pds-select--bare .pds-select__input-wrapper[aria-expanded='true'] {
	color: var(--pds-color-foreground-default);
}

.pds-select--bare .pds-select__input-wrapper:hover .pds-select__trigger-icon,
.pds-select--bare
	.pds-select__input-wrapper[aria-expanded='true']
	.pds-select__trigger-icon {
	color: var(--pds-color-foreground-default);
}

/*
 * The list is as wide as its longest option, not as narrow as the trigger. The
 * list is rendered in a portal, outside `.pds-select--bare`, and the Select
 * gives it the trigger's width, so this finds it through the open bare trigger.
 * A workaround for the proposal; the real Select would put a class on the
 * list.
 */
body:has(.pds-select--bare .pds-select__input-wrapper[aria-expanded='true'])
	.pds-select__dropdown {
	min-width: max-content;
}