/*
	README

	Modify this file as much or as little as needed.

	This file is shared across all CCL 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.
*/

.core-slider {
	--widget-counter-size: 13px;
	--slide-author-size: 12px;
	--slide-must-read-size: 13px;
	--slide-min-read-size:13px;
	--slide-time-icons-size: 16px;
	--robins-egg: #c1e3ec;
	--shadow: 0px 0px 32px black;
}

.core-slider .slide .slide-title i {
	margin-left: 10px;
}

.core-slider .detail-row {
	display: flex;
	align-items: center;
}

.core-slider .slide .details .author.blog {
	display: inline-block
}

.core-slider .details .info-item.author.blog > span {
	font-size: var(--slide-author-size);
	background-color: var(--robins-egg);
	font-weight: var(--font-weight-strong);
	color: var(--navy);
	display: inline-block;
	align-items: center;
	padding: 4px 10px;
	margin-bottom: 18px;
}

.core-slider .details .info-item {
	font-size: var(--slide-must-read-size);
	color: var(--white);
	font-style: italic;
	text-shadow: var(--shadow);
	font-weight: var(--font-weight-normal);
}

.core-slider .details .info-item.time {
	text-transform: uppercase;
}

.core-slider .details .info-item i {
	color: var(--robins-egg);
	font-size: var(--slide-time-icons-size);
}

.core-slider .counter {
	color: var(--white);
	font-size: var(--widget-counter-size);
	font-weight: var(--font-weight-strong);
}

.core-slider .details .info-item.blog {
	gap: 3px;
}

.core-slider .arrow-cont .custom-arrow {
	width: var(--widget-arrow-wh);
	height: var(--widget-arrow-wh);
	background-color: var(--gray);
	border: 2px solid white;
	color: var(--navy);
}

@media screen and (min-width: 64em) {
	.core-slider {
		--widget-counter-size: 16px;
		--slide-must-read-size: 15px;
		--slide-author-size: 14px;
		--slide-min-read-size: 14px;
		--slide-time-icons-size: 18px;
	}

	.core-slider .arrow-cont .custom-arrow {
		font-size: 24px;
	}
	
}

@media screen and (min-width: 80em) {
	.core-slider .details .info-item.author.blog > span {
		margin-bottom: 0;
	}
}