/* form event selector --------------------------------------------------------*/

/* @group @variables */

:root {
--event-selector-gap: 1.125rem;
--event-year-title-border-color: var(--color-gainsboro);
--event-year-margin-bottom: 2.25rem;
--load-more-btn-bg: var(--color-very-dark-gray);
--load-more-btn-hover-bg: var(--color-black-action);
}

/* @end @variables */

/* @group @m-form-event-selector */

.m-form-event-selector {
display: grid;
gap: var(--event-selector-gap);
}

.m-event-year-group {
margin-bottom: var(--event-year-margin-bottom);
}

.a-event-year-title {
font-size: 1.25rem;
font-weight: bold;
border-bottom: 1px solid var(--event-year-title-border-color);
padding-bottom: .75rem;
margin-bottom: 1.125rem;
}

.m-event-list {
display: grid;
grid-template-columns: repeat(1, 1fr);
gap: .75rem;
}

@media all and (min-width: 48em) {
.m-event-list {
grid-template-columns: repeat(2, 1fr);
}
}

/* @end @m-form-event-selector */

/* @group @a-load-more-btn */

.a-load-more-btn {
appearance: none;
background-color: var(--load-more-btn-bg);
color: var(--color-white);
border: 0;
padding: .75rem 1.5rem;
border-radius: .25rem;
cursor: pointer;
font-weight: bold;
justify-self: center;
transition: var(--link-transition);
}

.a-load-more-btn:hover {
background-color: var(--load-more-btn-hover-bg);
}

.a-load-more-btn[disabled] {
opacity: var(--alpha-disabled);
cursor: not-allowed;
}

/* @end @a-load-more-btn */