.skeleton-loading {
    display: flex;
    align-items: center;
    flex: 1;
}

.skeleton-effect {
    background-image: linear-gradient(
        90deg,
        var(--bg-color-tertiary) 0%,
        var(--bg-color-quaternary) 20%,
        var(--bg-color-tertiary) 40%
    );
    background-size: 200%;
    background-color: var(--bg-color-tertiary);
    animation: skeleton-shine 1.6s infinite ease-out;
}

.skeleton-loading > .skeleton-effect.thumbnail {
    width: 46px;
    height: 46px;
    margin-right: 12px;
    border-radius: 6px;
}

/* Playlist thumbnail */
.skeleton-loading > .skeleton-effect.thumbnail.playlist {
    width: 40px;
    height: 40px;
}

/* Artist thumbnail */
.skeleton-loading > .skeleton-effect.thumbnail.artist {
    width: 36px;
    height: 36px;
    border-radius: 20px;
}

.skeleton-loading > .skeleton-details {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.skeleton-loading > .skeleton-details > .skeleton-effect.title {
    height: 16px;
    margin-bottom: 8px;
    border-radius: 4px;
}

.skeleton-loading > .skeleton-details > .skeleton-effect.artist {
    height: 14px;
    border-radius: 4px;
}

/* Albums */
.skeleton-loading > .skeleton-details > .skeleton-effect.album.title {
    width: 50%;
}

.skeleton-loading > .skeleton-details > .skeleton-effect.album.artist {
    width: 20%;
}

/* Artists */
.skeleton-loading > .skeleton-details > .skeleton-effect.artist.title {
    width: 35%;
    margin-bottom: 0;
}

/* Tracks */
.skeleton-loading > .skeleton-details > .skeleton-effect.track.title {
    width: 30%;
}

.skeleton-loading > .skeleton-details > .skeleton-effect.track.artist {
    width: 45%;
}

/* Playlists */
.skeleton-loading > .skeleton-details > .skeleton-effect.playlist.title {
    width: 50%;
}

.skeleton-loading > .skeleton-details > .skeleton-effect.playlist.artist {
    width: 25%;
}

.skeleton-loading > .skeleton-indicators {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 12px;
    margin-bottom: 24px;
}

.skeleton-loading > .skeleton-indicators > .skeleton-effect.duration {
    width: 40px;
    height: 14px;
    border-radius: 4px;
}

@keyframes skeleton-shine {
    0% {
        background-position: 100%;
    }
    40%,
    100% {
        background-position: -100%;
    }
}