.toolbar-element .toolbar--file-input-container {
	display: flex;

	&.-loading {
		opacity: 0.8;
	}

	> input.file-input {
		// Hide in a way such that screen readers can still access the
		// input.
		opacity: 0;
		width: 0;
		// Override the existing min-width set for other inputs
		min-width: 0 !important;
		max-width: 0;
		height: 0;

		// Needed when the input is a button.
		overflow: hidden;
		padding: 0;
		margin: 0;
	}

	> label {
		display: block;
		flex-grow: 1;

		// Override existing padding rules.
		padding: 0 !important;
		padding-bottom: 5px;

		// Default border color if color-mix is not supported
		--active-border-color: rgba(100, 100, 100, 0.5);

		--active-border-color: color-mix(in srgb, var(--foreground-color-1), transparent);

		.cancel-button {
			padding-left: 3px;
			padding-right: 3px;
		}

		> .toolbar--file-input-description {
			background-color: var(--background-color-3);
			color: var(--foreground-color-3);

			border: 1px dashed var(--active-border-color);
			padding: 10px;
			margin-top: 10px;

			display: flex;
			flex-direction: column;
			align-items: center;
			text-align: center;

			--action-color: var(--primary-action-foreground-color);
			--icon-color: var(--action-color);

			> span {
				// Allow `\n`s to create new lines
				white-space: pre-wrap;

				> b {
					color: var(--action-color);
					cursor: pointer;
				}
			}

			> .icon {
				$size: min(50vw, 42px);
				width: $size;
				height: $size;

				margin-bottom: 8px;

				display: block;
			}
		}

		&:active,
		&:hover,
		&.drag-target {
			--active-border-color: var(--foreground-color-1);
		}

		&.drag-target > .toolbar--file-input-description {
			border-width: 2px;
		}
	}
}