@use "../variables";
@import "@automattic/color-studio/dist/color-variables";
@import "@wordpress/base-styles/breakpoints";
@import "@wordpress/base-styles/mixins";

.plugins-browser-item {
	width: 100%;
	background-color: $studio-white;
	box-sizing: border-box;
	cursor: pointer;
	display: block;
	float: left;
	margin: 18px 0 0 0;
	position: relative;
	overflow: hidden;

	&.is-placeholder {
		cursor: default;
	}

	.plugin-icon {
		width: 44px;
		height: 44px;
		margin-right: 0;

		&.is-placeholder {
			animation: loading-fade 1.6s ease-in-out infinite;
		}
	}

	.plugins-browser-item__title,
	.plugins-browser-item__author,
	.plugins-browser-item__last-updated {
		text-overflow: ellipsis;
		white-space: nowrap;
		margin-left: calc(47px + 16px); // icon width + margin
	}

	.plugins-browser-item__title {
		overflow: hidden;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		white-space: unset;
	}

	.plugins-browser-item__ratings {
		display: flex;
		justify-content: flex-end;

		.plugins-browser-item__rating-star {
			margin-right: 4px;
			margin-left: 16px;
		}

		.plugins-browser-item__rating-value {
			font-size: $font-body-extra-small;
			line-height: 20px;
			font-weight: 500;
			color: var(--studio-gray-80);
			margin-right: 5px;
		}

		.plugins-browser-item__number-of-ratings {
			font-size: $font-body-extra-small;
			line-height: 20px;
			font-weight: 400;
			color: var(--studio-gray-60);
		}
	}

	.plugins-browser-item__description {
		margin: 12px 0 24px 0;
		font-family: "SF Pro Text", $sans;
		font-size: $font-body-small;
		font-weight: 400;
		line-height: 20px;
		color: $studio-gray-80;

		// limit to 2 lines
		height: calc(20px * 3); // line height * number of lines
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	&.compact {
		.plugin-icon {
			width: 44px;
			height: 44px;
			margin-right: 16px;
		}

		.plugins-browser-item__link {
			padding: 16px;
		}

		.plugins-browser-item__title {
			margin-top: -1px;
			font-size: $font-body;
			margin-left: 0;
		}

		.plugins-browser-item__description {
			display: block;
			font-size: $font-body-small;
			margin: 0;
			text-overflow: ellipsis;
			white-space: nowrap;
			height: auto;
		}

		@include break-medium {
			// select first row for a 2 column grid
			&:first-of-type,
			&:nth-of-type(2) {
				margin-top: 24px;
			}
			width: calc(50% - 9px); // 2 column grid with 18px gutter
		}

		@include break-wide {
			// select first row for a 3 column grid
			&:first-of-type,
			&:nth-of-type(2),
			&:nth-of-type(3) {
				margin-top: 24px;
			}
			width: calc(33% - 10px); // 3 column grid with 20px gutter
		}
	}

	&.extended {
		@include break-large {
			width: calc((100% - 18px) / 2); // 2 column grid with 18px gutter
		}

		@include break-wide {
			width: calc((100% - 36px) / 3); // 3 column grid with 18px gutter
		}
	}

	&.incompatible {
		.plugins-browser-item__link {
			.plugins-browser-item__incompatible {
				margin-bottom: 16px;
				font-size: $font-body-small;
				color: $studio-blue-40;
			}

			*:not(.plugins-browser-item__incompatible) {
				opacity: 0.6;
			}
		}
	}
}

.plugins-browser-item__info {
	overflow: hidden; // lazy clearfix
}

.plugins-browser-item__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 24px;
	box-sizing: border-box;
	border: 1px solid var(--studio-gray-5);
	border-radius: 4px;

	&:focus,
	&:hover {
		border-color: var(--studio-gray-30);
	}
}

.plugins-browser-item__title,
.plugins-browser-item__author,
.plugins-browser-item__description {
	overflow: hidden;

	.is-placeholder & {
		color: transparent;
		background-color: var(--color-neutral-0);
		animation: loading-fade 1.6s ease-in-out infinite;
	}
}

.plugins-browser-item__header {
	min-height: 66px;
}

.plugins-browser-item__title {
	color: var(--color-neutral-100);
	font-weight: 500;
	font-size: $font-body;
	line-height: 20px;
}

.plugins-browser-item__author {
	color: var(--studio-gray-60);
	font-family: "SF Pro Text", $sans;
	font-weight: 500;
	font-size: $font-body-small;
	line-height: 20px;
	padding-bottom: 6px;
}

.plugins-browser-item__author-name {
	color: var(--color-link);
}

.plugins-browser-item__last-updated,
.plugins-browser-item__rating-value,
.plugins-browser-item__active-installs {
	color: var(--studio-gray-60);
	font-size: $font-body-extra-small;
}

.plugins-browser-item__untested-notice {
	display: flex;
	color: var(--studio-gray-60);
	fill: var(--studio-gray-60);
	font-size: $font-body-small;
	margin-bottom: 16px;

	.plugins-browser-item__untested-text {
		margin-left: 6px;
	}
}

.plugins-browser-item__last-updated {
	margin-top: 2px;
	min-height: 18px;
}

.plugins-browser-item__active-installs {
	margin-top: 5px;
	text-align: right;
}

.plugins-browser-item__pricing,
.plugins-browser-item__installed {
	font-size: $font-body-small;
	font-weight: 500;
	line-height: 20px;
	color: var(--studio-gray-80);
}

.plugins-browser-item__active {
	margin-left: 25px;

	.badge {
		border-radius: 4px;
		font-size: $font-body-extra-small;
	}

	.badge--success {
		color: var(--studio-celadon-80);
		font-weight: 600;
		background-color: #abe8bc; // TODO: add this color somewhere
	}

	.badge--info {
		color: var(--color-neutral-80);
		font-weight: 600;
		background-color: var(--color-neutral-10);
	}
}

.plugins-browser-item__pricing-placeholder {
	width: 150px;

	@extend %placeholder;
}

.plugins-browser-item__installed-and-active-container {
	display: flex;
	width: 100%;
	justify-content: space-between;
	align-items: center;
}

.plugins-browser-item__installed {
	display: flex;
	animation: appear 0.15s ease-in;

	.gridicon {
		margin-top: 3px;
		margin-right: 6px;
		border-radius: 50%;
	}

	.gridicon.checkmark {
		color: var(--studio-gray-60);
		border: 1px solid var(--studio-gray-60);
	}
}

.plugins-browser-item__footer {
	margin-top: auto;
	margin-bottom: auto;
	display: flex;
	justify-content: space-between;
}

.plugins-browser-item__period,
.plugins-browser-item__requires-plan-upgrade {
	color: var(--studio-gray-50);
	font-family: "SF Pro Text", $sans;
	font-weight: 400;
	font-size: $font-body-small;
}

.plugins-browser-item__requires-plan-upgrade {
	margin-left: 5px;
}
