@charset "utf-8";

/* SPOTLIGHT */
.elements-spotlight {
	border-radius: var(--radius);
	display: block;
	margin-block: var(--margin-gap);
	padding: var(--cards-padding);
	}
.elements-spotlight-padding-grow {
	padding: var(--cards-padding-grow);
	}
.elements-spotlight-padding-small {
	padding: var(--space-10);
	}

/* ICON */
.elements-spotlight-icon {
	color: var(--color-icon);
	font-size: var(--icon);
	margin-bottom: var(--space-10);
	transition: color var(--animation-duration) var(--animation-easing);
	}

/* HEADER */
.elements-spotlight-header {
	color: var(--color-header);
	font-size: var(--font-size-md);
	font-weight: var(--font-weight-black);
	line-height: var(--line-height-tight);
	}
.elements-spotlight-size-small .elements-spotlight-header {
	font-size: var(--font-size-sm);
	}
.elements-spotlight-size-large .elements-spotlight-header {
	font-size: var(--font-size-2xl);
	}
.elements-spotlight-size-xlarge .elements-spotlight-header {
	font-size: var(--font-size-6xl);
	}

/* TEXT */
.elements-spotlight-text {
	color: var(--color-dimmed);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-medium);
	line-height: var(--cards-text-line-height);
	margin-top: var(--space-2);
	}
.elements-spotlight-size-small .elements-spotlight-text {
	font-size: var(--font-size-xs);
	}

/* FILL */
.elements-spotlight-fill-fit {
	width: fit-content;
	}

/* ALIGN */
.elements-spotlight-align-center {
	text-align: center;
	}
.elements-spotlight-align-right {
	text-align: right;
	}
.elements-spotlight-fill-fit.elements-spotlight-align-center {
	margin-inline: auto;
	}
.elements-spotlight-fill-fit.elements-spotlight-align-right {
	margin-inline-start: auto;
	}

/* LABEL LINK */
.elements-spotlight-label {
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-medium);
	margin-top: var(--space-10);
	text-transform: var(--buttons-case);
	}
.elements-spotlight-link {
	transition: color var(--animation-duration) var(--animation-easing);
	}
.elements-spotlight-link > i {
	color: var(--color-arrow);
	}
@media (hover: hover) and (pointer: coarse), (hover: hover) and (pointer: fine) {
	a.elements-spotlight:hover {
		background-color: var(--color-button);
		color: var(--color-button-text);
		}
	a.elements-spotlight:hover .elements-spotlight-text,
	a.elements-spotlight:hover .elements-spotlight-icon {
		color: var(--color-button-text);
		}
}