@use "../kit-deps" as *;
@use "typography" as *;

.file-upload {
	display: inline-flex;
	align-items: center;
	gap: $space-2;
	min-height: $control-height-md;
	padding: $space-2 $space-3;
	border: $border-width-base solid $color-secondary;
	border-left-width: $border-width-accent;
	border-radius: $border-radius-sm;
	color: $color-secondary;
	background: $surface-panel-muted;
	font-size: $font-size-sm;
	font-weight: $font-weight-bold;
	text-transform: uppercase;
	cursor: pointer;
	transition-duration: $motion-base;
	transition-timing-function: $motion-ease;
	transition-property: color, background, border-color;

	input[type="file"] {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

	@include hover_touch {
		color: $color-black;
		background: $color-secondary;
	}

	&:focus-within {
		@include focus_ring;
	}
}

.file-upload-panel {
	width: 100%;
	max-width: 760px;
	@include hard_panel($border-color-muted, $border-width-accent);
}

.file-upload-form {
	display: flex;
	flex-direction: column;
	gap: $space-4;
	margin: 0;
}

.file-upload-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: $space-4;
	padding: $space-4 $space-4 0;
}

.file-upload-heading {
	display: flex;
	flex-direction: column;
	gap: $space-1;
	min-width: 0;
}

.file-upload-title {
	margin: 0;
	color: $color-text-light;
	font-size: $font-size-lg;
	font-weight: $font-weight-bold;
	line-height: $line-height-snug;
	text-transform: uppercase;
}

.file-upload-description {
	margin: 0;
	color: $color-text-medium;
	font-size: $font-size-sm;
	line-height: $line-height-relaxed;
}

.file-upload-dropzone {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: $space-4;
	margin: 0 $space-4;
	padding: $space-5;
	border: $border-width-base dashed $color-secondary;
	border-radius: $border-radius-md;
	background: rgba($color-secondary, 0.08);
	cursor: pointer;
	transition-duration: $motion-base;
	transition-timing-function: $motion-ease;
	transition-property: background, border-color;

	input[type="file"] {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

	@include hover_touch {
		border-color: $color-primary;
		background: rgba($color-primary, 0.1);
	}

	&:focus-within {
		@include focus_ring;
	}
}

.file-upload-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: $control-height-lg;
	height: $control-height-lg;
	color: $color-black;
	background: $color-secondary;
	font-size: $icon-size-lg;
}

.file-upload-body {
	display: flex;
	flex-direction: column;
	gap: $space-1;
	min-width: 0;
}

.file-upload-primary {
	color: $color-text-light;
	font-size: $font-size-base;
	font-weight: $font-weight-bold;
	line-height: $line-height-snug;
	text-transform: uppercase;
}

.file-upload-secondary {
	color: $color-text-medium;
	font-size: $font-size-sm;
	line-height: $line-height-normal;
}

.file-upload-preview {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
	gap: $space-3;
	margin: 0 $space-4;

	&[hidden] {
		display: none;
	}
}

.file-upload-preview-item {
	position: relative;
	min-width: 0;
	margin: 0;
	border: $border-width-base solid $border-color-muted;
	border-radius: $border-radius-sm;
	background: $surface-panel-muted;
}

.file-upload-preview-remove {
	position: absolute;
	top: $space-2;
	right: $space-2;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: $control-icon-rail-sm;
	height: $control-icon-rail-sm;
	padding: 0;
	border: $border-width-base solid $color-error;
	color: $color-error;
	background: $surface-panel;
	font-size: $icon-size-sm;
	cursor: pointer;
	transition-duration: $motion-base;
	transition-timing-function: $motion-ease;
	transition-property: color, background, border-color;

	@include hover_touch {
		color: $color-black;
		background: $color-error;
	}

	&:focus-visible {
		@include focus_ring;
	}
}

.file-upload-preview-visual {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1;
	background: $surface-panel;
}

.file-upload-preview-visual img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.file-upload-preview-type {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: $control-height-lg;
	min-height: $control-height-lg;
	padding: $space-2;
	color: $color-black;
	background: $color-secondary;
	font-size: $font-size-sm;
	font-weight: $font-weight-bold;
	line-height: $line-height-base;
	text-transform: uppercase;
}

.file-upload-preview-item figcaption {
	display: flex;
	flex-direction: column;
	gap: $space-1;
	overflow: hidden;
	padding: $space-2;
}

.file-upload-preview-name {
	overflow: hidden;
	color: $color-text-light;
	font-size: $font-size-xs;
	font-weight: $font-weight-bold;
	line-height: $line-height-snug;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.file-upload-preview-meta {
	color: $color-text-medium;
	font-size: $font-size-xs;
	font-weight: $font-weight-bold;
	line-height: $line-height-snug;
	text-transform: uppercase;
}

.file-upload-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: $space-2;
	padding: 0 $space-4 $space-4;
}

@include media_down("md") {
	.file-upload-header {
		flex-direction: column;
		align-items: stretch;
	}

	.file-upload-dropzone {
		grid-template-columns: 1fr;
	}

	.file-upload-actions {
		justify-content: stretch;

		.btn {
			width: 100%;
		}
	}
}