/*
	README

	Modify this file as much or as little as needed.

	This file is shared across all ASM widgets in the Slider 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-slider {
	--title-text: var(--asm-ftw-semi-bold) var(--asm-fts-xl)/var(--asm-ftl-dense) var(--asm-font-family);
	--pagination-text: var(--asm-ftw-medium) var(--asm-fts-sm)/var(--asm-ftl-dense) var(--asm-font-family);
	--slide-title-text: var(--asm-ftw-bold) var(--asm-fts-lg)/var(--asm-ftl-dense) var(--asm-font-family);
	--slide-date-text: var(--asm-ftw-medium) var(--asm-fts-sm)/var(--asm-ftl-dense) var(--asm-font-family);
	--date-month-text: var(--asm-ftw-medium) var(--asm-fts-xs)/var(--asm-ftl-dense) var(--asm-font-family);
	--date-day-text: var(--asm-ftw-semi-bold) var(--asm-fts-2xl)/var(--asm-ftl-dense) var(--asm-font-family);
}

.asm-slider .header .title {
	font: var(--title-text);
}

.asm-slider .header .pagination-text {
    font: var(--pagination-text);
}

.asm-slider .slide-top .mini-date-section .date-month {
	font: var(--date-month-text);
}

.asm-slider .slide-top .mini-date-section .date-day {
	font: var(--date-day-text);
}

.asm-slider .slide .slide-title {
	font: var(--slide-title-text);
	color: var(--asm-sw-black);
}

.asm-slider .slide .date-section {
	font: var(--slide-date-text);
	color: var(--asm-sw-grey-dark);
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
}