/* ============================== */
/*  Add fonts
/* ============================== */
@font-face {
    font-display: swap;
    font-family: "Quicksand";
    font-style: normal;
    font-weight: 700;
    src: url("../web/assets/fonts/quicksand-latin-700.woff2") format("woff2");
}

/* ============================== */
/*  Generate library logos
/* ============================== */
.card[data-type="CollectionFolder"] .cardImageContainer.coveredImage,
.card[data-type="UserView"] .cardImageContainer.coveredImage,
.card[data-type="CollectionFolder"] .cardImageContainer.defaultCardBackground,
.card[data-type="UserView"] .cardImageContainer.defaultCardBackground {
    container-type: size;
    background-color: transparent;
    background-image: none !important; /* Remove fallback image when custom CSS is used */
    opacity: 1 !important; /* Disable blink because of lazy loading */
}
.card[data-type="CollectionFolder"] .cardImageContainer.coveredImage::before,
.card[data-type="UserView"] .cardImageContainer.coveredImage::before,
.card[data-type="CollectionFolder"] .cardImageContainer.defaultCardBackground::before,
.card[data-type="UserView"] .cardImageContainer.defaultCardBackground::before {
    /* Get library name */
    content: attr(aria-label);

    /* Set font */
    font-family: "Quicksand";
    font-weight: 700;

    /* Fill card */
    font-size: 3.5em; /* Fallback (for Media Player) */
    font-size: 30cqmin; /* Preferred */

    /* Add gradient */
    background: linear-gradient(90deg, #9757ae 0%, #2396d4 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
}
/* Hide icon when no fallback image is used */
.card[data-type="CollectionFolder"] .cardImageIcon,
.card[data-type="UserView"] .cardImageIcon {
    display: none;
}
/* Hide blur because of lazy loading */
.card[data-type="CollectionFolder"] .blurhash-canvas,
.card[data-type="UserView"] .blurhash-canvas {
    display: none;
}
/* Hide library card titles */
.card[data-type="CollectionFolder"] .cardText,
.card[data-type="UserView"] .cardText {
    display: none;
}