/* Main wrapper */
.mini-card {
    position: relative;
    text-wrap: balance;
}
/* Absolute event link */
.mini-card .mini-card__link {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.mini-card:has(.mini-card__link:focus-visible) {
    outline: var(--outline-width-on-focus) solid var(--primary-color);
}

/* When hover over the extra links (recording or presentation) change the arrow color */
.mini-card:has(.mini-card__extra-link:hover) .ymx-global-li-link-with-arrow__content:after {
    background-color: var(--gray);
}

/* Event name */
.mini-card .mini-card__title {
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-black);
}

/* Future events have a blue dot in front */
.mini-card .mini-card__title .mini-card__future-dot {
    display: inline-flex;
    margin-right: 0.25rem;
    margin-bottom: 4px;
    vertical-align: middle;
}

/* Stack the event meta with what we have behind to show on hover */
.mini-card .mini-card__actions {
    display: grid;
    justify-items: end;
    align-items: center;
}

.mini-card .mini-card__actions > * {
    grid-row: 1;
    grid-column: 1;
}

/* Event meta */
.mini-card .mini-card__meta {
    color: var(--dark-gray);
    font-size: 0.8125rem;
    text-align: end;
    opacity: 1;
    transition: var(--ymx-hover-transition);
}

/* Initially what we show on hover is not visible */
.mini-card .mini-card__show-on-hover {
    opacity: 0;
    transition: var(--ymx-hover-transition);
}

/* Extra links - recording and presentation present on completed webinars */
.mini-card .mini-card__extra-links {
    display: flex;
    flex-direction: row;
    gap: 1.5rem;
    margin-right: 0.5rem;
}

.mini-card .mini-card__extra-links a {
    display: flex;
}

.mini-card .mini-card__extra-links svg path {
    fill: var(--gray);
}

.mini-card .mini-card__extra-links a:hover svg path,
.mini-card .mini-card__extra-links a:focus-visible svg path {
    fill: var(--primary-color);
}

/* Fake "register now" cta present on future events */
.mini-card .mini-card__fake-cta {
    font-size: 0.8125rem;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    background: var(--pale-blue);
    color: var(--primary-color);
    font-weight: 600;
    margin-right: 0.5rem;
    cursor: pointer;
}

/* When the webinar mini card has hover effects */
/* Hide meta */
.mini-card.mini-card--has-hover:hover .mini-card__meta,
.mini-card.mini-card--has-hover:has(.mini-card__link:focus-visible) .mini-card__meta,
.mini-card.mini-card--has-hover:has(.mini-card__extra-link:focus-visible) .mini-card__meta {
    opacity: 0;
}
/* Show what is behind */
.mini-card.mini-card--has-hover:hover .mini-card__show-on-hover,
.mini-card.mini-card--has-hover:has(.mini-card__link:focus-visible) .mini-card__show-on-hover,
.mini-card.mini-card--has-hover:has(.mini-card__extra-link:focus-visible) .mini-card__show-on-hover {
    opacity: 1;
    z-index: 1;
}