.CoverArt {
    aspect-ratio: 1 / 1;
    display: flex;
    flex-shrink: 0;
    overflow: hidden;
    height: fit-content;
    position: relative;

    &-image {
        display: block;
        object-fit: cover;
        object-position: center;
        font-size: 0;
        height: 100%;
    }

    &-image,
    &-empty {
        width: 100%;
    }

    &-empty {
        background-image: url('data:image/svg+xml,<svg width="120" height="120" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(%23a)"><g clip-path="url(%23b)"><path fill="%23D5D9DD" d="M-40-40h200v200H-40z"/><path d="M41.685 61.236-90 160h333.333L45.176 60.921a3.333 3.333 0 0 0-3.49.315Z" fill="%23F1F3F4"/><path d="M-34.444 160 88.352 67.903a3.333 3.333 0 0 1 3.49-.315L276.668 160H-34.444ZM86.667 43.333c0 5.523-4.478 10-10 10-5.523 0-10-4.477-10-10s4.477-10 10-10c5.522 0 10 4.477 10 10Z" fill="%23F7F7F8"/></g></g><defs><clipPath id="a"><path d="M0 4a4 4 0 0 1 4-4h112a4 4 0 0 1 4 4v112a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V4Z" fill="%23fff"/></clipPath><clipPath id="b"><path fill="%23fff" transform="translate(-40 -40)" d="M0 0h200v200H0z"/></clipPath></defs></svg>');
        background-size: cover;
        background-position: center;
    }

    &-unknown {
        background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120" fill="none"><path d="M0 4C0 1.79086 1.79086 0 4 0H116C118.209 0 120 1.79086 120 4V116C120 118.209 118.209 120 116 120H4C1.79086 120 0 118.209 0 116V4Z" fill="%23D5D9DD"/><path d="M59.8002 74.6633C61.5233 74.6633 62.9202 73.2809 62.9202 71.5756C62.9202 69.8703 61.5233 68.4879 59.8002 68.4879C58.077 68.4879 56.6801 69.8703 56.6801 71.5756C56.6801 73.2809 58.077 74.6633 59.8002 74.6633Z" fill="white"/><path d="M59.4199 51.5054C58.6733 51.5054 58.0093 51.8479 57.5757 52.3953C56.5127 53.7374 54.5516 53.9726 53.1954 52.9206C51.8392 51.8686 51.6016 49.9278 52.6646 48.5856C54.23 46.6092 56.6749 45.33 59.4199 45.33C64.1586 45.33 68 49.1316 68 53.8212C68 56.5623 66.8029 59.1834 64.56 60.7958C63.9044 61.2671 63.4356 61.6573 63.1377 62.0112C62.9883 62.1887 62.9361 62.2926 62.9201 62.3333C62.9018 64.023 61.512 65.3872 59.8002 65.3872C58.0771 65.3872 56.6802 64.0048 56.6802 62.2995C56.6802 60.4747 57.5112 59.0471 58.3432 58.0586C59.1599 57.0884 60.1542 56.3303 60.8927 55.7994C61.3393 55.4783 61.7599 54.8163 61.7599 53.8212C61.7599 52.5422 60.7123 51.5054 59.4199 51.5054Z" fill="white"/></svg>') !important;
        background-size: cover;
        background-position: center;
    }

    &.landscape,
    &.letterbox {
        .CoverArt-empty {
            background-image: url('data:image/svg+xml,<svg width="120" height="68" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(%23a)"><g clip-path="url(%23b)"><path fill="%23D5D9DD" d="M-6.792-33.962h135.849v135.849H-6.793z"/><path d="m48.692 34.802-89.447 67.085H185.66L51.063 34.588a2.264 2.264 0 0 0-2.371.214Z" fill="%23F1F3F4"/><path d="M-3.019 101.887 80.39 39.33a2.264 2.264 0 0 1 2.371-.214l125.541 62.771H-3.018ZM79.245 22.642a6.792 6.792 0 1 1-13.585 0 6.792 6.792 0 0 1 13.585 0Z" fill="%23F7F7F8"/></g></g><defs><clipPath id="a"><path d="M0 4a4 4 0 0 1 4-4h112a4 4 0 0 1 4 4v60a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V4Z" fill="%23fff"/></clipPath><clipPath id="b"><path fill="%23fff" transform="translate(-6.792 -33.962)" d="M0 0h135.849v135.849H0z"/></clipPath></defs></svg>');
        }
    }

    &.landscape {
        align-self: center;
        aspect-ratio: 16 / 9;
    }

    &.letterbox {
        .CoverArt-image,
        .CoverArt-empty {
            aspect-ratio: 16 / 9;
            align-self: center;
        }
    }

    &.round {
        border-radius: 100%;
    }

    &.landscape,
    &.letterbox,
    &.square {
        border-radius: 3px;
    }

    .SkeletonLoader {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;

        // For 100% width containers, fill the container completely
        &:not([style*='width:']) {
            width: 100% !important;
            height: 100% !important;
        }
    }

    // prevent the 1px around showing through
    &:has(.SkeletonLoader) .CoverArt-image {
        opacity: 0;
    }
}