.card {
    background-color: var(--mantine-color-body);
    @mixin hover {
        box-shadow: var(--mantine-shadow-xs);
        transform: scale(1.02);
    }

    &:focus-visible {
        outline: 2px solid var(--mantine-primary-color-filled);
        outline-offset: 2px;
    }
}

.cardSection {
    position: relative;
    background: light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-6));
}

.starButton {
    position: absolute;
    top: 4px;
    right: 4px;
    opacity: 0;
    transition: opacity 150ms ease;
}

.starButton[data-favorited="true"] {
    opacity: 1;
}

.card:hover .starButton {
    opacity: 1;
}

.title {
    font-family:
            Greycliff CF,
            var(--mantine-font-family);
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.icon {
    margin-right: rem(5px);
    color: light-dark(var(--mantine-color-gray-5), var(--mantine-color-dark-2));
}
