/* Google Material Icons, Apache-2.0. Self-hosted; no font/CDN request. */
.record-favorite-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    min-height: 36px;
    padding: 7px;
    border: 1px solid var(--button-line);
    border-radius: 8px;
    background: #fff;
    color: #394454;
    cursor: pointer;
}
.favorite-star {
    display: block;
    width: 22px;
    height: 22px;
    background: currentColor;
    mask: url('/assets/icons/star-outline.svg') center/contain no-repeat;
    -webkit-mask: url('/assets/icons/star-outline.svg') center/contain no-repeat;
}
.record-favorite-button[aria-pressed="true"] {
    color: #f5b800;
}
.record-favorite-button[aria-pressed="true"] .favorite-star {
    mask-image: url('/assets/icons/star-filled.svg');
    -webkit-mask-image: url('/assets/icons/star-filled.svg');
}
.record-favorite-button:disabled {
    cursor: wait;
    opacity: .65;
}
.favorite-card {
    position: relative;
    padding: 0;
    align-self: stretch;
}
.favorite-card-link {
    display: block;
    height: 100%;
    padding: 28px;
}
.favorite-card-link>.badge {
    border: 1px solid currentColor;
    max-width: calc(100% - 40px);
    white-space: normal;
}
.favorite-card>.record-favorite-button {
    position: absolute;
    right: 16px;
    top: 16px;
    z-index: 1;
}
.favorite-card-link:focus-visible {
    outline-offset: -4px;
    border-radius: 12px;
}
.favorite-event {
    overflow-wrap: anywhere;
}
.favorite-unavailable {
    padding: 64px 28px 28px;
}
.favorite-card:has(a:hover) {
    border-color: var(--blue);
}
@media(max-width:767px) {
    .favorite-card-link {
        padding: 22px;
    }
    .favorite-unavailable {
        padding: 60px 22px 22px;
    }
}
@media(max-width:420px) {
    .record-heading-actions .record-favorite-button {
        flex-basis: 32px;
        width: 32px;
        padding: 5px;
    }
    .record-heading-actions {
        flex-wrap: wrap;
    }
    .record-heading-actions .record-actions {
        max-width: 100%;
    }
}