:root {
    --background-color: #DDD;/*#fefebe;*/
    --shadow-color: #333;/*#6270aa;*/
    --tab-color: #CCC;
    --selected-tab-color: #EEC;
    --roundness: 3px;
    --progress: 0%;
}
body {
    background-color: var(--background-color);
}

* {
    box-sizing: border-box;
    user-select: none;
    font-family: arial;
}
input[type=file] {
    display:none;
}
button, label {
    border-radius: var(--roundness);
    border: 1px solid black;
    cursor: pointer;
    text-align: center;
    padding: 1px 6px;
    font-size: 0.8em;
}
button:hover, label:hover {
    background-color: #E0E0E0;
}
label[disabled] {
    color: rgba(16,16,16,0.3);
}

#controls {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}
#controls #examples {
    width: 100%;
}
#controls #top-left-panel {
    display: flex;
    gap: 20px;
}
#controls #buttons {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}
#controls #shape {
    line-height: 1.5rem;
    font-size: 1.5rem;
}
#controls #palette {
    align-self: stretch;
    flex-grow: 1;
    padding:10px;
    background: linear-gradient(0deg, rgba(0,0,0,0.4), rgba(0,0,0,0.4) var(--progress), rgba(0,0,0,0.1) var(--progress), rgba(0,0,0,0.1));
    border-radius: var(--roundness);
}
#controls #brush {
    flex-grow: 1;
    min-height: 0px;
    height: 100%;
    width: 10px;
    appearance: slider-vertical;
}


#layers {
    align-self:flex-end;
    margin-bottom:20px;

    width: 120px;
}
#layers * {
    position: relative;

    display:block;
    cursor: pointer;
    color: var(--shadow-color);

    box-shadow: 10px 10px var(--shadow-color);
    background-color: var(--tab-color);
    outline:none;
    border:none;
    border-left: 5px solid rgba(0,0,0,0.1);
    border-radius: 0px var(--roundness) var(--roundness) 0px;

    height:60px;
    line-height:60px;

    margin-top: 20px;

    transition: width 0.05s, transform 0.05s, box-shadow 0.05s;
}
#layers button {
    font-size:4rem;
    width: 60px;
}
#layers button:hover {
    width: 72px;
}
#layers button:active, #layers itmas-layer:active {
    box-shadow: 5px 5px var(--shadow-color);
    transform:translate(0px, 5px);
    width: 77px;
}
#layers itmas-layer {
    width: 100%;
    font-size: 1.5rem;
    font-weight: bold;
    text-align: center;
}
#layers itmas-layer.selected {
    background-color: var(--selected-tab-color);
}
#layers itmas-layer:hover {
    width: 120%;
}
#layers itmas-layer:active {
    width: calc(120% + 5px);
}

#content {
    display: flex;

    height: 90vh;

    position: absolute;
    left: 50vw;
    top: 50vh;
    transform: translate(-50%, -50%);
}
#card {
    border-radius: var(--roundness);

    display: flex;
    gap: 20px;
    padding: 20px;

    box-shadow: 10px 10px var(--shadow-color);
    background-color: #EEE;
}

#grid {
    display: grid;
    aspect-ratio: 1/1;
    grid-template-columns: 49.5% 49.5%;
    grid-template-rows: 49.5% 49.5%;
    gap:1%;

    /*height: 100%;*/
    height: calc(90vh - 40px); /* This fixes a Firefox display bug */
}
#grid itmas-cloth, #grid #three-canvas {
    touch-action: none;

    width: 100%;
    height: 100%;
    border: 1px solid black;
    border-radius: var(--roundness);
}
#grid #three {
    position: relative;
}
#grid #expand {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 2.5rem;
    height: 2.5rem;
    text-align: center;
    line-height: 2.5rem;
    font-size: 2rem;
    color: rgba(0,0,0,0.5);
    cursor: pointer;

    transition: font-size 0.1s, color 0.1s;
}
#grid #expand:hover {
    font-size: 2.2rem;
    color: rgba(0,0,0,0.7);
}
#grid #three-canvas {
    cursor: grab;
    image-rendering: pixelated;
}
#grid #three-canvas:active {
    cursor: grabbing;
}