$theme-info-height: 54px;

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

.theme__upsell {
	flex: 0 0 auto;
	padding: 5px 10px 0 0;
	color: var(--color-neutral-light);
}

.theme__upsell-icon svg {
	transform: scale(0.8);
	border: 2px solid var(--color-neutral-20);
	border-radius: 100%;
	display: inline-block;
	width: 22px;
	height: 22px;
	z-index: 0;
	padding: 0 1px 1px 0;
	box-sizing: border-box;

	&:hover {
		border-color: #000;
	}
}

// Calc height according to .theme width
.theme__content {
	padding-top: 75%; // 4:3 screenshot ratio
	padding-bottom: $theme-info-height;
	position: relative;
	overflow: hidden;
}

.theme__update-alert {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1;
	padding: 1px;
	font-size: 0.75rem;
	.theme__update-alert-content {
		@keyframes theme__rotate-spinner {
			100% {
				transform: rotate(360deg);
			}
		}

		.theme__updating-animated {
			animation: 2s linear infinite;
			animation-name: theme__rotate-spinner;
		}

		svg {
			margin: 0 0.5rem -0.25rem;
		}
		span {
			line-height: 30px;
		}
		&.warning {
			background-color: #fcf9e8;
			border-left: 4px #dba617 solid;
		}
		&.success {
			background-color: #e4f8e9;
			border-left: 4px var(--color-success) solid;
		}
		&.info {
			background-color: #e4f0f8;
			border-left: 4px #0675c4 solid;
		}
		&.danger {
			background-color: #f8e4e4;
			border-left: 4px #c40606 solid;
		}
	}

	.theme__button-link.button.is-borderless {
		float: right;
		font-size: 0.75rem;
		line-height: 30px;
		margin-right: 0.5em;
	}
}

.theme__button-link {
	&.button.is-borderless {
		padding: 0;
	}
	&.components-button.is-link:not(:disabled) {
		color: var(--studio-gray-40);
	}
	&.components-button.is-link:hover:not(:disabled),
	&.components-button.is-link:active:not(:disabled) {
		color: var(--studio-gray-60);
	}
}

.theme__img {
	position: absolute;
	top: 0;
	display: block;
	box-sizing: border-box;
	padding: 1px;
	width: 100%;
}

.theme__site-preview {
	position: absolute;
	top: 0;
	display: block;
	box-sizing: border-box;
	padding: 1px;
	// The idea is to zoom-out the iframe to get most of the content
	// into the thumbnail and then we scale it down so it remains the
	// size of the parent component (357% * 0.28 ~= 100%)
	min-height: 375%;
	width: 357%;
	max-width: 357%;
	transform: scale(0.28);
	transform-origin: top left;
	translate: 0 -10px;
	pointer-events: none;
}

.theme__no-screenshot {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 54px;
	width: 100%;
	padding-top: 36%;
	background: var(--color-neutral-10);

	.gridicon {
		display: block;
		margin: -5% auto;
		fill: var(--color-neutral-0);
	}
}

.theme__more-button {
	border-left: 1px solid var(--color-neutral-0);
	height: $theme-info-height;
	display: flex;
	flex: 0 0 auto;
	transition: all 100ms ease-in-out;

	button {
		cursor: pointer;
		color: var(--color-neutral-light);
		padding: 15px 19px;
		font-size: $font-title-small;
		font-weight: 600;

		.is-active & {
			color: color-mix(in srgb, var(--color-surface) 20%, transparent);
		}

		.accessible-focus &:focus {
			z-index: z-index("root", ".accessible-focus .theme__more-button button:focus");
			box-shadow: inset 0 0 0 2px var(--color-primary-light);
		}
	}

	.gridicon {
		transition: all 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	}

	&.is-active {
		border-left-color: color-mix(in srgb, var(--color-neutral-0) 70%, transparent);
	}

	&:hover {
		background-color: color-mix(in srgb, var(--color-neutral-0) 70%, transparent);

		.gridicon {
			color: var(--color-primary);
		}
	}

	&.is-open {
		.gridicon {
			transform: rotate(90deg);
			color: var(--color-primary);
		}
	}
}
