$profile-picture-size: 36px;
$border-color: #eee;


.marketplace-review-item__review-container,
.marketplace-create-review-item__container {
	border-top: 1px solid $border-color;
	padding: 32px 0;

	&:first-of-type {
		border-top: none;
		padding-top: 0;
	}

	&:last-of-type {
		padding-bottom: 0;
	}

	.marketplace-review-item__review-container-header {
		display: grid;
		grid-template-columns: calc($profile-picture-size + 8px) 1fr 100px;

		.marketplace-review-item__rating-data {
			display: flex;
			flex-direction: column;
			justify-content: center;

			.rating {
				margin-left: -1px;
			}
		}

		.marketplace-review-item__profile-picture {
			display: flex;
			flex-direction: column;
			justify-content: center;

			.marketplace-review-item__profile-picture-img,
			.marketplace-review-item__profile-picture-placeholder {
				height: $profile-picture-size;
				width: $profile-picture-size;
				border-radius: 50%;
			}

			.marketplace-review-item__profile-picture-placeholder {
				background-color: var(--studio-gray-20);
			}
		}

		.marketplace-review-item__date {
			color: var(--studio-gray-60);
			font-size: $font-body-small;
			text-align: right;
			align-self: center;
		}

		.marketplace-review-item__author {
			color: var(--studio-gray-100);
			font-size: $font-body-small;
		}
	}

	.marketplace-review-item__review-rating {
		margin-top: 16px;
		margin-bottom: 16px;
		display: flex;
		align-items: center;
		justify-content: space-between;

		h2 {
			font-family: "SF Pro Text", $sans;
			font-size: $font-title-small;
			font-weight: 500;
			line-height: 26px;
			overflow-wrap: anywhere;
			color: var(--studio-gray-100);
		}
	}

	.marketplace-review-item__content {
		color: var(--studio-gray-100);
		font-size: $font-body-small;
		margin-top: 16px;

		p {
			margin-bottom: 0;
		}

		&.edting {
			background-color: var(--studio-gray-0);
			padding: 16px;
		}
	}

	.marketplace-review-item__editor textarea {
		color: var(--studio-gray-100);
		background-color: var(--studio-gray-0);
		border-radius: 4px;
		font-size: $font-body-small;
		margin-top: 16px;
		padding: 16px;
		border: 0;

		p {
			margin-bottom: 0;
		}
	}
}


.marketplace-review-item__review-actions {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-top: 15px;
	font-size: $font-body-small;

	.marketplace-review-item__review-actions-editable {
		display: flex;
		align-items: center;

		.marketplace-review-item__review-submit {
			margin-left: 16px;
		}

		.marketplace-review-item__review-actions-editable-button {
			color: var(--studio-blue-50);
			margin-right: 15px;
			cursor: pointer;
			display: flex;
			align-items: center;
		}

		.gridicon {
			margin-right: 5px;
			color: var(--studio-gray-10);
		}
	}
}

.marketplace-review-item__pending-review,
.marketplace-review-item__error-message {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	align-self: stretch;

	.marketplace-review-item__card-icon {
		color: var(--studio-gray-10);
	}

	.marketplace-review-item__card-text {
		font-family: "SF Pro Text", $sans;
		font-size: $font-body-small;
		line-height: 20px;
	}
}

.marketplace-create-review-item__container {
	margin-top: 32px;
	padding: 40px;
	border: 1px solid $border-color;
	border-radius: 9px; /* stylelint-disable-line scales/radii */
}

.marketplace-create-review-item__thank-you {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 8px;
	text-align: center;

	h2 {
		font-family: Recoleta, sans-serif;
		font-size: $font-title-large;
		line-height: 40px;
		color: var(--studio-gray-100);
	}

	.marketplace-create-review-item__thank-you-subtitle {
		font-family: "SF Pro Text", $sans;
		font-size: $font-body-small;
		line-height: 20px;
		color: var(--studio-gray-60);
	}
}
