/* SIDEBAR PANEL */

.sidebar{
    width:220px;
    box-sizing:border-box;
    padding:10px 8px;
    
    /* background: gray; */
    background: color-mix(in srgb, var(--backgroundColor) 70%, black);

    border-left:1px solid color-mix(in srgb, var(--backgroundColor) 40%, black);
    }
    
    /* LIST */
    
    .list{
    display:flex;
    flex-direction:column;
    gap:8px;
    }
    
    /* VIDEO CARD */
    
    .video-card{
    display:flex;
    gap:10px;
    align-items:center;
    
    padding:8px;
    border-radius:8px;
    
    text-decoration:none;
    color:white;
    
    border:1px solid color-mix(in srgb, var(--backgroundColor) 35%, white);
    background: color-mix(in srgb, var(--backgroundColor) 80%, black);
    
    transition:all .15s ease;
    }
    
    /* HOVER */
    
    .video-card:hover{
    background: color-mix(in srgb, var(--backgroundColor) 65%, black);
    }
    
    /* ACTIVE */
    
    .video-card.active{
    border:1px solid white;
    background: color-mix(in srgb, var(--backgroundColor) 55%, black);
    }
    
    /* THUMB */
    
    .thumb{
    width:90px;
    height:52px;
    object-fit:cover;
    border-radius:6px;
    flex-shrink:0;
    }
    
    /* TITLE */
    
    .video-title{
    font-size:13px;
    font-weight:500;
    line-height:1.3;
    }
    
    .sidebar.closed{
        width:0;
        padding:0;
        border:none;
        overflow:hidden;
      }