@import '../../../../../static/sass/frontend/4-components/star-rating';

// dynamic data
.ct-dynamic-data {

	a {
		text-decoration: none;
		--theme-link-initial-color: initial;
	}

	// woo sale price defaults
	.sale-price {
		display: inline-flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		column-gap: 5px;

		del {
			order: 2;
			font-size: 80%;
		}

		ins {
			text-decoration: none;
		}
	}

	// product brands
	.ct-product-brands {
		display: inline-flex;
		align-items: center;
		flex-wrap: wrap;
		gap: var(--product-brands-gap, 10px);

		.ct-media-container {
			max-width: var(--product-brand-logo-size, 60px);
		}
	}
}

// dynamic media
.ct-dynamic-media {
	display: flex;
	margin: 0;

	img {
		box-sizing: border-box;
		vertical-align: bottom;
	}

	.ct-dynamic-media-inner {
		position: relative;
		width: 100%;
		height: 100%;
		overflow: hidden;
		will-change: transform;
		box-sizing: border-box;

		&[data-hover] img {
			transition: transform 0.5s ease;
		}

		&[data-hover="zoom-in"] {

			&:hover img {
				transform: scale(1.1);
			}
		}

		&[data-hover="zoom-out"] {

			img {
				transform: scale(1.1);
			}

			&:hover img {
				transform: scale(1.0);
			}
		}
	}


	// video indicator
	.ct-video-indicator {
		position: absolute;
		inset: 0;
		z-index: 3;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		transition: opacity 0.12s cubic-bezier(0.455, 0.03, 0.515, 0.955),
					visibility 0.12s cubic-bezier(0.455, 0.03, 0.515, 0.955);

		svg {
			border-radius: 100%;
			transition: transform 0.12s cubic-bezier(0.455, 0.03, 0.515, 0.955);
		}
	}


	// image placeholder
	.ct-dynamic-data-placeholder {
		display: flex;
		width: 100%;
		overflow: hidden;
		box-sizing: border-box;
		border: 1px dashed rgb(58 79 102 / 25%) !important;
		background: rgb(58 79 102 / 2%);

		.ct-dynamic-data-placeholder-illustration {
			width: 100%;
			stroke-dasharray: 3;
			stroke: rgb(58 79 102 / 25%);
		}
	}

	&.wp-block-cover .ct-dynamic-data-placeholder {
		position: absolute;
		inset: 0;
	}
}