/* =========================================================
   MATAPPLY SHOWROOM
   MODEL PRESENTATION CONTROLS
   ========================================================= */

#presentationControls
{
    position: absolute;

    left: 50%;

    top: 145px;

    transform:
        translateX(-50%);

    width: auto;

    padding: 8px 10px;

    display: flex;

    flex-direction: column;

    gap: 7px;

    background:
        rgba(4,8,15,0.72);

    border:
        1px solid
        rgba(255,255,255,0.08);

    border-radius: 6px;

    backdrop-filter:
        blur(12px);

    -webkit-backdrop-filter:
        blur(12px);

    z-index: 16;

    pointer-events: auto;
}


/* =========================================================
   TITLE
   ========================================================= */

#presentationControls .presentationTitle
{
    color:
        #4baee8;

    font-size:
        8px;

    font-weight:
        700;

    letter-spacing:
        1.7px;

    white-space:
        nowrap;
}


/* =========================================================
   BUTTON ROW
   ========================================================= */

#presentationControls .presentationButtons
{
    display:
        flex;

    flex-direction:
        row;

    align-items:
        center;

    gap:
        5px;
}


/* =========================================================
   BUTTON
   ========================================================= */

#presentationControls button
{
    padding:
        7px 9px;

    border:
        1px solid
        rgba(255,255,255,0.06);

    border-radius:
        4px;

    background:
        rgba(255,255,255,0.025);

    color:
        #7e8da1;

    font-size:
        8px;

    font-weight:
        600;

    letter-spacing:
        0.8px;

    white-space:
        nowrap;

    cursor:
        pointer;

    transition:
        color 0.2s,
        background 0.2s,
        border 0.2s;
}


/* =========================================================
   HOVER
   ========================================================= */

#presentationControls button:hover:not(:disabled)
{
    color:
        #ffffff;

    background:
        rgba(40,130,200,0.10);

    border-color:
        rgba(70,180,255,0.25);
}


/* =========================================================
   ACTIVE
   ========================================================= */

#presentationControls button.active
{
    color:
        #65c3ff;

    background:
        rgba(40,130,200,0.10);

    border-color:
        rgba(70,180,255,0.35);
}


/* =========================================================
   DISABLED
   ========================================================= */

#presentationControls button:disabled
{
    color:
        #465364;

    background:
        rgba(255,255,255,0.015);

    border-color:
        rgba(255,255,255,0.035);

    opacity:
        0.45;

    cursor:
        default;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 800px)
{
    #presentationControls
    {
        top:
            140px;
    }

    #presentationControls .presentationButtons
    {
        flex-wrap:
            wrap;

        justify-content:
            center;
    }
}


@media (max-width: 500px)
{
    #presentationControls
    {
        top:
            130px;

        padding:
            7px;
    }

    #presentationControls button
    {
        padding:
            6px 7px;

        font-size:
            7px;
    }
}