/* -------------------------------------------
    Product Image Comments
---------------------------------------------- */

@import '../../../assets/sass/config';
@import '../../assets/sass/mixins/mixins';
@import '../../assets/sass/mixins/direction';


.review-images {
	// Review with Image
	display: flex;
	align-items: center;
	margin-bottom: 2.5rem;

	>img,
	.video-attachment {
		display: inline-block;
		flex: 0 0 6rem;
		max-width: 6rem;
		margin-#{$right}: .6rem;
		cursor: pointer;
		border-radius: var(--alpha-border-radius-form);
		transition: box-shadow .3s;

		&:hover {
			box-shadow: 0 10px 20px -10px rgba(0, 0, 0, .2);
		}
	}

	.video-attachment {
		display: inline-flex;
		position: relative;

		&:before {
			content: '\f04b';
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			color: var(--alpha-change-color-dark-1s);
			font-family: "Font Awesome 5 Free";
			font-weight: 700;
			line-height: 1;
		}

		video {
			width: 100%;
			min-width: 6rem;
			min-height: 6rem;
			object-fit: cover;
			border-radius: var(--alpha-border-radius-form);
		}
	}
}

.comment-form p.comment-image-notice {
	margin-bottom: 2rem;
}

.review-form-section {
	.review-medias {
		margin-top: 3rem;
		margin-bottom: 1rem;
	}

	.file-input {
		display: inline-block;
		vertical-align: top;
		position: relative;
		width: auto;
		margin-#{$right}: 2rem;
		padding: 0;
		background-repeat: no-repeat;
		background-size: cover;
	}

	.file-input-wrapper {
		display: block;
		width: 8rem;
		height: 8rem;
		border-radius: 0.42rem;
		background-repeat: no-repeat;
		background-size: cover;
	}

	.btn-action {
		position: absolute;
		right: -1rem;
		top: -1rem;
		height: 2.2rem;
		width: 2.2rem;
		display: flex;
		justify-content: center;
		line-height: 2.2rem;
		font-size: 1rem;
		border-radius: 50%;
		background: var(--alpha-change-color-light-1);
		box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
		cursor: pointer;
		transition: box-shadow .3s;

		&:hover {
			box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
		}

		&:before {
			font-family: "Font Awesome 5 Free";
			font-weight: 600;
		}
	}

	input[type="file"] {
		width: 0 !important;
		height: 0 !important;
		overflow: hidden;
		opacity: 0;
	}

	.btn-upload:before {
		content: "\f304";
	}

	.btn-remove {
		top: auto;
		bottom: -10px;

		&:before {
			content: "\f00d";
			font-size: 12px;
		}
	}

	video {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}
