.file-input:where(input[type="file"]) {
	max-width: 100%;
	padding: 8px;
	box-sizing: border-box;
	border: 1px solid var(--sui-color-outline-primary);
	border-radius: calc(var(--sui-roundness-normal) + 4px);
	color: var(--sui-color-neutral-secondary);
	background-color: var(--sui-color-surface);
	font: inherit;
	cursor: pointer;
}

.file-input:where(input[type="file"])::file-selector-button {
	height: 32px;
	margin-inline-end: var(--sui-base-padding);
	padding-inline: var(--sui-base-padding);
	border: 0;
	border-radius: var(--sui-roundness-normal);
	color: var(--sui-color-on-key-primary);
	background-color: var(--sui-color-key-primary);
	font: inherit;
	cursor: pointer;
}

.file-input:where(input[type="file"]):where(:hover)::file-selector-button {
	opacity: 0.9;
}

.file-input:where(input[type="file"]):where(.secondary)::file-selector-button {
	border: 1px solid var(--sui-color-key-tertiary);
	color: var(--sui-color-key-primary);
	background-color: transparent;
}

.file-input:where(input[type="file"]):where(.secondary):where(
	:hover
)::file-selector-button {
	background-color: var(--sui-color-key-tertiary);
	opacity: 1;
}

.file-input:where(input[type="file"]):where(.tertiary)::file-selector-button {
	border: 1px solid var(--sui-color-outline-secondary);
	color: var(--sui-color-neutral-secondary);
	background-color: transparent;
}

.file-input:where(input[type="file"]):where(.tertiary):where(
	:hover
)::file-selector-button {
	background-color: var(--sui-color-highlight-secondary);
	opacity: 1;
}

.file-input:where(input[type="file"]):where(.shy)::file-selector-button {
	color: var(--sui-color-neutral-secondary);
	background-color: transparent;
}

.file-input:where(input[type="file"]):where(.shy):where(
	:hover
)::file-selector-button {
	background-color: var(--sui-color-highlight-secondary);
	opacity: 1;
}

.file-input:where(input[type="file"]):where(.dragover) {
	border-color: var(--sui-color-key-primary);
	background-color: var(--sui-color-key-tertiary);
}

.file-input:where(input[type="file"]):where(.error) {
	border-color: var(--sui-color-error);
}

.file-input:where(input[type="file"]):where(:disabled) {
	color: var(--sui-color-on-neutral-tertiary);
	background-color: var(--sui-color-disabled-fill);
	cursor: default;
}

.file-input:where(input[type="file"]):where(:disabled)::file-selector-button {
	color: var(--sui-color-on-neutral-tertiary);
	background-color: var(--sui-color-neutral-tertiary);
	cursor: default;
	opacity: 1;
}