/*==================================================
=            PLAYGROUND COMPONENT v1.0             =
==================================================*/

.playground{

    margin:2rem 0;

    border:1px solid #2d2d30;

    border-radius:10px;

    overflow:hidden;

    background:#1e1e1e;

    box-shadow:
        0 4px 10px rgba(0,0,0,.15);

}

/*=========================================
=            CABECERA                     =
=========================================*/

.playground-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    background:#252526;

    border-bottom:1px solid #333;

    gap:15px;

    flex-wrap:wrap;

    padding:0 15px;

}

.playground-title{

    color:#d4d4d4;

    font-size:.9rem;

    font-weight:600;

    white-space:nowrap;

    padding:12px 0;

}

/*=========================================
=            TABS                         =
=========================================*/

.playground-toolbar{

    display:flex;

    flex:1;

    overflow-x:auto;

    scrollbar-width:none;

}

.playground-toolbar::-webkit-scrollbar{

    display:none;

}

.playground-btn{

    border:none;

    background:none;

    color:#bdbdbd;

    cursor:pointer;

    padding:14px 18px;

    font-size:.9rem;

    transition:.2s;

    border-bottom:3px solid transparent;

    white-space:nowrap;

}

.playground-btn:hover{

    color:white;

    background:#2d2d30;

}

.playground-btn.active{

    color:white;

    border-bottom-color:#007acc;

}

/*=========================================
=            ACCIONES                     =
=========================================*/

.playground-actions{

    display:flex;

    align-items:center;

    gap:6px;

}

.playground-actions button{

    border:none;

    background:none;

    color:#bdbdbd;

    cursor:pointer;

    padding:6px;

    font-size:17px;

    border-radius:5px;

    transition:.2s;

}

.playground-actions button:hover{

    background:#333;

    color:white;

}

/*=========================================
=            CONTENIDO                    =
=========================================*/

.playground-panel{

    display:none;

}

.playground-panel.active{

    display:block;

}

/*=========================================
=            IFRAME                       =
=========================================*/

.playground-preview{

    display:block;

    width:100%;

    border:none;

    background:white;

}

/*=========================================
=            CÓDIGO                       =
=========================================*/

.playground pre{

    margin:0;

    padding:20px;

    overflow:auto;

    background:#1e1e1e;

    color:#d4d4d4;

    font-size:15px;

    line-height:1.7;

    tab-size:4;

    font-family:
        "Cascadia Code",
        "JetBrains Mono",
        "Fira Code",
        Consolas,
        Monaco,
        monospace;

}

/* elimina estilos del tema */

.playground pre code{

    background:none !important;

    color:inherit !important;

    padding:0 !important;

    font-family:inherit;

}

/*=========================================
=            SELECCIÓN                    =
=========================================*/

.playground ::selection{

    background:#264f78;

}

/*=========================================
=            ENLACES                      =
=========================================*/

.playground a{

    color:#4fc1ff;

}

/*=========================================
=            SCROLLBAR                    =
=========================================*/

.playground pre::-webkit-scrollbar{

    width:10px;

    height:10px;

}

.playground pre::-webkit-scrollbar-track{

    background:#252526;

}

.playground pre::-webkit-scrollbar-thumb{

    background:#555;

    border-radius:20px;

}

.playground pre::-webkit-scrollbar-thumb:hover{

    background:#777;

}

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

@media (max-width:768px){

    .playground-header{

        padding:0;

    }

    .playground-title{

        width:100%;

        padding:12px 15px 0;

    }

    .playground-toolbar{

        width:100%;

        order:2;

    }

    .playground-actions{

        position:absolute;

        right:15px;

        top:12px;

    }

}