.music-list-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: calc(var(--spacing) * 2);
    overflow: hidden;
    gap: calc(var(--spacing) * 2);
    height: 100%;

    ul {
        display: flex;
        flex-direction: column;
        list-style: none;
        margin: 0;
        padding: 0;
        width: 100%;
        gap: calc(var(--spacing) * 1);
        overflow: auto;
        flex: 1;
        height: 100%;

        li {
            width: 100%;
            padding: calc(var(--spacing) * 2) calc(var(--spacing) * 4);
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-radius: calc(var(--spacing) * 2);
            gap: calc(var(--spacing) * 4);

            &.add {
                animation: light 1s 1 ease-in-out;
            }

            &:hover {
                background: var(--border-side-color);
            }

            .album-image {
                width: calc(var(--spacing) * 12);
                height: calc(var(--spacing) * 12);
                background-position: center;
                background-repeat: no-repeat;
                background-size: cover;
                border-radius: calc(var(--spacing) * 2);
                border: 1px solid var(--border-side-color);
            }

            .info-wrap {
                flex: 1;
                display: flex;
                flex-direction: column;
                gap: calc(var(--spacing) * 1.5);

                .title {
                    font-size: calc(var(--spacing) * 4);
                    color: var(--icon-hover-color);
                }

                .artist {
                    font-size: calc(var(--spacing) * 3.25);
                    color: var(--icon-color);
                }
            }

            .like-wrap {
                display: flex;
                align-items: center;
                justify-content: flex-end;
                gap: calc(var(--spacing) * 1);

                .svg-wrap {
                    padding: calc(var(--spacing) * 1);

                    svg {
                        width: calc(var(--spacing) * 6);
                        height: calc(var(--spacing) * 6);
                    }
                }
            }
        }
    }
}

.music-view-wrap {
    display: flex;
    flex-direction: column;
    padding: calc(var(--spacing) * 2);
    overflow: hidden;
    gap: calc(var(--spacing) * 2);
    height: 100%;

    .info-wrap {
        display: flex;
        padding: calc(var(--spacing) * 2) calc(var(--spacing) * 4);
        gap: calc(var(--spacing) * 2);
        width: 100%;
        border-radius: calc(var(--spacing) * 2);

        &.add {
            animation: light 1s 1 ease-in-out;
        }

        .album-image {
            width: calc(var(--spacing) * 26);
            height: calc(var(--spacing) * 26);
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            border-radius: calc(var(--spacing) * 2);
            border: 1px solid var(--border-side-color);
        }

        .info-wrap-in {
            display: flex;
            flex-direction: column;
            justify-content: center;

            .title {
                font-size: calc(var(--spacing) * 6);
                color: var(--icon-hover-color);
            }

            .artist {
                margin-top: calc(var(--spacing) * 2);

                a,
                a:visited {
                    color: var(--icon-color);

                    &:hover {
                        color: var(--icon-hover-color);
                    }
                }
            }

            .like-wrap {
                margin-top: calc(var(--spacing) * 3);
                display: flex;
                align-items: center;
                gap: calc(var(--spacing) * 1);

                .svg-wrap {
                    padding: calc(var(--spacing) * 1);

                    svg {
                        width: calc(var(--spacing) * 6);
                        height: calc(var(--spacing) * 6);
                    }
                }
            }
        }
    }

    .lyrics-wrap {
        padding: calc(var(--spacing) * 2);
        display: flex;
        flex-direction: column;
        overflow: auto;

        span {
            padding: calc(var(--spacing) * 2) calc(var(--spacing) * 2);
            display: block;
            color: var(--icon-color);
            border-radius: calc(var(--spacing) * 2);

            &.no-sync {
                color: var(--icon-hover-color);
                display: flex;
                flex-direction: column;
                gap: calc(var(--spacing) * 4);
                padding: 0 calc(var(--spacing) * 2);
                line-height: calc(var(--spacing) * 8);
            }

            &:hover:not(.no-sync) {
                background: var(--border-side-color);
            }

            &.on {
                background: var(--border-side-color);
                color: var(--icon-hover-color);
            }

            &.part {
                margin-top: calc(var(--spacing) * 4);

                &:first-child {
                    margin-top: 0;
                }
            }
        }
    }
}

@keyframes light {
    0% {
        background-color: transparent;
    }

    50% {
        background-color: var(--background-light-color);
    }

    100% {
        background-color: transparent;
    }
}