// =================================================================
// Calendar List Settings
// =================================================================

// Date Range Color
//
// Controls the color of the date range on the calendar listing template.
// By default, this is right after the topic.
//
// Styleguide Calendar.Calendar Listing.Date Range Color
//
// Access: Public
//
// @since 1.0.0
//
// Accessibility: AA

$color-calendar-heading-date-range:          $color-grayscale-6 !default;

// Event Link Color
//
// Controls the color of links on the calendar listing template.
//
// Styleguide Calendar.Calendar Listing.Event Link Color
//
// Access: Public
//
// @since 1.0.0
//
// Accessibility: AA

$color-calendar-event-link:                 $color-link !default;

// Event Link Hover Color
//
// Controls the color of links on the calendar listing template when you hover.
//
// Styleguide Calendar.Calendar Listing.Event Link Hover Color
//
// Access: Public
//
// @since 1.0.0
//
// Accessibility: AA

$color-calendar-event-link-hover:           $color-link !default;

// List Border
//
// Controls the border between events on the calendar listing template.
//
// Styleguide Calendar.Calendar Listing.List Border
//
// Access: Public
//
// @since 2.0.0

$border-calendar-list:                      $border !default;

// =================================================================
// Calendar List Styles
// =================================================================

// Handles styling for the calendar topic on the calendar listing page.
//
// Access: Public
//
// @since 2.0.0

.calendar-list-topic {
	@extend %font-size-6;
}

// Handles styling for the selected date range in the calendar listing page.
//
// Access: Public
//
// @since 2.0.0

.calendar-list-range {
	color: $color-calendar-heading-date-range;
}

// Handles styling for groups of events on a given day
// in the calendar listing page.
//
// Access: Public
//
// @since 2.0.0

.calendar-list-events {
	margin-bottom: var(--margin-large, #{$margin-large});
	padding: 0;
}

// Handles styling for an individual event on a given day
// in the calendar listing page.
//
// Access: Public
//
// @since 2.0.0

.calendar-list-event {
	font-size: var(--calendar-listing-size, 0.9em);
	line-height: 1.3;
	list-style: none;
	margin-bottom: 0.5em;
}

// Handles styling for the first event in a group of events at
// the same time in the calendar listing page.
//
// Access: Public
//
// @since 2.0.0

.calendar-list-event-first-at-time {
	border-top: var(--calendar-list-border, var(--bu-border, #{$border-calendar-list}));
	margin-bottom: 0.75em;
	padding-top: 0.75em;
}

// Handles styling for an individual event on a given day
// in the calendar listing page.
//
// Access: Public
//
// @since 2.0.0

.calendar-list-event-time {
	color: $color-grayscale-6;
	font-weight: 700;
	position: absolute;
}

// Handles styling for the link to an individual event
// in the calendar listing page.
//
// Access: Public
//
// @since 2.0.0

.calendar-list-event-link {
	color: var(--calendar-event-link-color, #{$color-calendar-event-link});
	display: block;
	margin-left: 5.1em; // Accounts for the 5-ish characters that time can take up.

	&:hover,
	&:focus {
		color: var(--calendar-event-link-color-hover, #{$color-calendar-event-link-hover});
	}
}