// Inter Font Family Import
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap");

@import '../../../user-registration-pro/assets/css/variables/variables';

$download_btn_dark: #0170b9;

// File Upload field design in builder
.ur-field {
	.dropzone {
		padding: 20px;
		margin-bottom: 10px;
		border: 2px dashed $color_gray_four;

		.dz-message {
			text-align: center;
			margin: 2em 0;

			svg {
				width: 40px;
				height: 40px;
				padding: 4px;
				margin: 0 auto;
				background: $color_gray_four;
				border-radius: 4px
			}

			.user-registration-file-upload-title {
				color: $color_gray_one;
				display: block;
				font-size: 16px;
				margin-top: 8px;
			}

			.user-registration-file-upload-hint {
				color: $color_gray_three;
				font-size: 14px;
			}
		}
	}
}

// New Files Styles.

.urfu-no-files-found-message {
	background: #efefef;
	padding: 5px 15px;
	border-radius: 3px;
}

.urfu-file-uploaded {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
	gap: 1em;
    background: #f3f3f3;
    padding: 12px;
    border-radius: 4px;
    box-sizing: border-box;

	.urfu-file-details {
		background: #fcfcfc;
		box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.045);
		border-radius: 4px;
		border: 1px solid #b0b0b0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 6px;
		gap: 0.4em;

		&.admin-side {
			border: 1px solid #9db0ff;
		}

		.urfu-file-thumb {
			display: inherit;

			img {
			border-radius: 2px;
			height: 50px;
			width: 50px;
			max-height: 50px;
			}
		}

		.urfu-file-heading {
			flex-grow: 1;
			overflow: hidden;

			.urfu-file-name {
				font-style: normal;
				font-weight: 400;
				font-size: 14px;
				line-height: 19px;
				margin-top: 0px;
				margin-bottom: 0px;
				color: #1d2327;

				// Clamping text
				display: -webkit-box;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
				overflow: hidden;
			}

			.urfu-file-size {
				font-style: normal;
				font-weight: 400;
				font-size: 12px;
				line-height: 13px;
				color: #b0b0b0;
			}
		}

		.urfu-file-action {
			display: flex;
			align-items: center;
			gap: 0.6em;
			margin-right: 3px;

			.urfu-download {
				transition: all 0.3s ease-in-out;
				color: #b0b0b0;

				&:hover {
					filter: invert(39%) sepia(52%) saturate(714%)
					hue-rotate(164deg) brightness(91%) contrast(97%);
				}
			}

			.urfu-remove {
			transition: all 0.3s ease-in-out;
			color: #b0b0b0;

				&:hover {
					filter: invert(13%) sepia(96%) saturate(6976%)
					hue-rotate(6deg) brightness(101%) contrast(115%);
				}
			}
		}
	}
}



.urfu-single-user-view-field {
	flex: 0 0 100%;
	width: 100%;
	display: flex;
	// flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	margin-bottom: 20px;
	border-bottom: 1px solid $border_color;

	.urfu-thumbnail {
		width: 64px;
		height: 64px;
		flex: 0 0 64px;
		// margin-right: 15px;
		border-radius: 3px;
		overflow: hidden;

		@media (max-width: 991px) {
			flex: 0 0 40px;
			width: 40px;
			height: 40px;
		}

		img {
			width: 100%;
			max-height: 100% !important;
		}

	}

	.urfu-details {
		text-align: left;
		font-size: 14px;
		flex: 1;

		.urfu-size {
			color: $gray_base;
		}

		.urfu-filename {
			overflow: hidden;
			max-width: 200px;

			span {
				color: $color_gray_three;

				// Clamping text
				display: -webkit-box;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
				overflow: hidden;
			}
		}

		@media screen and (max-width: 768px) {
			flex: 100%;
		}
	}

	.urfu-download-file {
		margin-right: 10px;
		color: #475bb2;
		text-decoration: none;
		padding: 2px;
		border-radius: 20px;
		border: 2px solid #475bb2;
		display: flex;
		align-items: center;
		justify-content: center;

		span {
			display: block;

			&::before {
				position: relative;
				top: 0;
			}
		}
	}

	&:last-child {
		border-bottom: 0;
		padding-bottom: 0;
		margin-bottom: 0;
	}
}

.user-registration-membership_page_user-registration-users {
	.user-registration-user-form-details {
		.urfu-file-uploaded {
			display: block;
		}
	}
}