.playlist-item {
    display: flex;
    flex-direction: column;
    margin-bottom: 50px;

    .top {
        $size: 250px;

        display: flex;
        justify-content: space-between;
        max-height: $size;

        .cover {
            height: $size;
            width: $size;
            background-color: #131316;
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 15px;
            margin-right: 50px;

            .playlist-icon {
                width: 75px;
                height: 75px;
                filter: invert(100%) sepia(0%) saturate(7500%)
                    hue-rotate(116deg) brightness(109%) contrast(109%);
            }

            .play-icon {
                position: absolute;
                width: 30px;
                height: 30px;
                right: 10px;
                top: 10px;
                filter: invert(100%) sepia(0%) saturate(7500%)
                    hue-rotate(116deg) brightness(109%) contrast(109%);
                opacity: 0;
                transition: 0.1s;

                &:hover {
                    cursor: pointer;
                }
            }

            &:hover {
                .play-icon {
                    opacity: 1;
                }
            }
        }

        .tracks-box {
            $border: 2px solid rgb(84, 84, 84);

            width: 70%;
            max-height: $size;
            border-radius: 3px;
            position: relative;

            .tracks {
                border-left: $border;
                border-right: $border;
                border-top: $border;
                border-top-left-radius: 5px;
                border-top-right-radius: 5px;
                font-size: 20px;
                padding: 15px;
                height: $size - 20px;
                overflow-y: scroll;
            }

            .button-edit {
                position: absolute;
                left: 0;
                bottom: -5px;
                width: 100%;
                height: 30px;
                display: flex;
                justify-content: center;
                align-items: center;
                color: #000;
                transition: 0.3s;

                background-color: rgb(60, 130, 60);
                border-bottom-left-radius: 8px;
                border-bottom-right-radius: 8px;
                border-left: $border;
                border-right: $border;
                border-bottom: $border;

                &:hover {
                    cursor: pointer;
                    background-color: rgba(80, 171, 80, 1);
                }
            }
        }
    }

    .info {
        margin-top: 5px;
        margin-left: 10px;

        .name {
            font-size: 20px;
        }

        .description {
            font-size: 14px;
        }
    }
}
