@use '_variables.scss' as *;

.adpresso-html5-upload-wrapper {
	display: flex;
	flex-direction: column;
	gap: 1em;
	max-width: 100%;

	.adpresso-html5-preview {
		width: 150px;
		height: 150px;
		background: $color-divider;
		border: 0.12em solid $color-border;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		border-radius: 0.4em;
		position: relative;
		overflow: hidden;

		.adpresso-image-placeholder {
			color: $color-text-grey;
			padding: 1em;
			font-size: $font-size;
		}

		.adpresso-file-display {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			gap: 1em;
			padding: 1em;

			.adpresso-file-icon {
				font-size: 48px;
				width: 48px;
				height: 48px;
				color: $color-text-active;
			}

			.adpresso-file-name {
				font-size: 12px;
				word-break: break-all;
				color: $color-primary;
				font-weight: 500;
				line-height: 1.3;
			}
		}

		.spinner {
			margin: 0;
		}
	}

	.adpresso-html5-actions {
		display: flex;
		flex-direction: row;
		gap: 1em;
		align-items: flex-start;

		.adpresso-btn {
			width: auto;
		}
	}
}