/* ==========================================
   BUTTON MAKER V2
   STYLE.CSS
========================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html,
body{
    width:100%;
    height:100%;
}

body{

    background:#2f5d8a;

    font-family:
        Tahoma,
        Verdana,
        sans-serif;

    overflow:hidden;

}

/* ==========================================
   MAIN LAYOUT
========================================== */

.app{

    display:flex;

    width:100vw;

    height:100vh;

}

/* ==========================================
   SIDEBAR
========================================== */

.sidebar{

    width:320px;

    background:#d4d0c8;

    border-right:2px solid #808080;

    padding:16px;

    overflow-y:auto;

    box-shadow:
        inset -1px 0 white,
        inset -2px 0 #808080;

}

.sidebar h1{

    font-size:28px;

    margin-bottom:20px;

    text-align:center;

    color:#003366;

}

.sidebar h2{

    font-size:15px;

    margin-bottom:12px;

    color:#333;

}

/* ==========================================
   PANELS
========================================== */

.panel{

    background:#efefef;

    border:

        2px solid #808080;

    box-shadow:

        inset 1px 1px white,

        inset -1px -1px #555;

    padding:12px;

    margin-bottom:16px;

}

.panel label{

    display:block;

    margin-top:10px;

    margin-bottom:5px;

    font-weight:bold;

    font-size:13px;

}

/* ==========================================
   INPUTS
========================================== */

input,
select,
button{

    width:100%;

    font-size:14px;

    font-family:Tahoma;

    margin-bottom:8px;

}

input[type="number"],
input[type="color"],
select{

    height:34px;

    border:

        2px inset #fff;

    background:white;

    padding:4px;

}

input[type="file"]{

    font-size:12px;

}

button{

    height:36px;

    background:#d4d0c8;

    border:

        2px outset white;

    cursor:pointer;

}

button:hover{

    background:#e6e6e6;

}

button:active{

    border:

        2px inset white;

}

/* ==========================================
   CUSTOM SIZE
========================================== */

.customSize{

    display:grid;

    grid-template-columns:

        1fr 1fr;

    gap:10px;

}

/* ==========================================
   WORKSPACE
========================================== */

.workspace{

    flex:1;

    display:flex;

    flex-direction:column;

    background:#7d7d7d;

}

/* ==========================================
   CANVAS AREA
========================================== */

.canvasContainer{

    flex:1;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:30px;

    overflow:auto;

    background:
        repeating-conic-gradient(
            #ccc 0% 25%,
            white 0% 50%
        );

    background-size:24px 24px;

}

/* ==========================================
   CANVAS
========================================== */

canvas{

    image-rendering:pixelated;

    image-rendering:crisp-edges;

    border:2px solid black;

    background:white;

    box-shadow:

        0 0 25px rgba(0,0,0,.4);

}

/* ==========================================
   STATUS BAR
========================================== */

.statusBar{

    height:32px;

    background:#d4d0c8;

    border-top:2px solid #808080;

    display:flex;

    align-items:center;

    padding:0 12px;

    font-size:13px;

}

/* ==========================================
   LAYERS
========================================== */

#layerList{

    min-height:120px;

    background:white;

    border:2px inset white;

    padding:8px;

    overflow-y:auto;

    font-size:13px;

}

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

::-webkit-scrollbar{

    width:12px;

}

::-webkit-scrollbar-track{

    background:#d4d0c8;

}

::-webkit-scrollbar-thumb{

    background:#999;

}

::-webkit-scrollbar-thumb:hover{

    background:#666;

}

.layer{

    padding:8px;

    margin-bottom:4px;

    background:#efefef;

    border:1px solid #999;

    cursor:pointer;

    user-select:none;

}

.layer:hover{

    background:#dbe9ff;

}

.layer.selected{

    background:#4a90e2;

    color:white;

}