/*
	README

	Modify this file as much or as little as needed.

	This file is shared across all CCL widgets in the Date List family. This enables the ability to
	a family of widgets in a single update without touching the structure of the widget and without needing
	to duplicate efforts across several widget-specific CSS files.
*/

.asm-date-list {
	--widget-title-mobile: var(--asm-ftw-semi-bold) var(--asm-fts-xl)/var(--asm-ftl-dense) var(--asm-font-family);
	--widget-title: var(--asm-ftw-semi-bold) var(--asm-fts-3xl)/var(--asm-ftl-dense) var(--asm-font-family);
	--slide-title-mobile: var(--asm-ftw-semi-bold) var(--asm-fts-body)/var(--asm-ftl-dense) var(--asm-font-family);
	--slide-title: var(--asm-ftw-semi-bold) var(--asm-fts-lg)/var(--asm-ftl-compact) var(--asm-font-family);
	--day-time-details: var(--asm-ftw-medium) var(--asm-fts-sm)/var(--asm-ftl-dense) var(--asm-font-family);
	--month-text-mobile: var(--asm-ftw-medium) var(--asm-fts-xs)/var(--asm-ftl-dense) var(--asm-font-family);
	--month-text: var(--asm-ftw-medium) var(--asm-fts-body)/var(--asm-ftl-dense) var(--asm-font-family);
	--day-text-mobile: var(--asm-ftw-semi-bold) var(--asm-fts-2xl)/var(--asm-ftl-dense) var(--asm-font-family);
	--day-text: var(--asm-ftw-semi-bold) var(--asm-fts-6xl)/var(--asm-ftl-dense) var(--asm-font-family);
}

.asm-date-list .widget-title {
	font: var(--widget-title-mobile);
	color: var(--asm-sw-black);
}

@media (min-width: 40em) {
	.asm-date-list .widget-title {
		font: var(--widget-title);
	}
}

.asm-date-list .mini-date-section .date-month {
	font: var(--month-text-mobile);
}

@media (min-width: 40em) {
	.asm-date-list .mini-date-section .date-month {
		font: var(--month-text);
	}
}

.asm-date-list .mini-date-section .date-day {
	font: var(--day-text-mobile);
}

@media (min-width: 40em) {
	.asm-date-list .mini-date-section .date-day {
		font: var(--day-text);
	}
}

.asm-date-list .mini-date-section .date-month,
.asm-date-list .mini-date-section .date-day {
	line-height: var(--leading-none);
}

.asm-date-list .slide .slide-title {
	font: var(--slide-title-mobile);
	color: var(--asm-sw-black);
}

@media (min-width: 40em) {
	.asm-date-list .slide .slide-title {
		font: var(--slide-title);
	}
}

.asm-date-list .slide .slide-title > a {
	color: inherit;
}

.asm-date-list .slide .content-section .date-details {
	font: var(--day-time-details);
	color: var(--asm-sw-grey-dark);
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
}

.asm-date-list .slide .button-text {
	color: var(--asm-sw-grey-dark);
}

@media (min-width: 40em) {
	.asm-date-list .slide .button-text {
		color: var(--asm-sw-black);
	}
}