/*
CSS Styles for styling the coloring app

author: David den Uyl (djdenuyl@gmail.com)
date: 2023-05-10
*/
body, html {
    margin: 0;
    padding: 0;
}

button {
    all: unset;
}

/* app-container defines --n_pencils on the element (see app.py) */
#app-container {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    background: #f6f0fdff;
}

.menu-container {
    position: absolute;
    width: 1px;
    height: 1px;
    left: 0;
    top: 0;
}

.menu {
    position: absolute;
    width: 100vw;
    height: 100vh;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-flow: row;
    place-items: center;
    background: white;
    z-index: 10;
    background: #f6f0fdff;
}

.drawing {
    height: 80%;
    width: auto;
    aspect-ratio: 1;
    position: relative;
    display: grid;
    place-items: center;
}

.segment {
    aspect-ratio: 1;
    position: absolute;
}

.pencil-case {
    position: absolute;
    width: 15vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    left: 0;
}

.pencil {
    flex-grow: 1;
    position: relative;
    left: 0;
    transition: left 0.5s;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.selected {
    left: 50%;
    transition: left 0.5s;
}

.pencil-ui-container {
    --girth: calc(100vh / var(--n_pencils) * 0.5);
    position: absolute;
    height: var(--girth);
    width: 100%;
}

.body {
    height: 34%;
    width: 500%;
    right: var(--girth);
    position: absolute;
}

.arc {
    height:  calc(var(--girth) * (1 / 3));
    aspect-ratio: 1;
    right: calc(var(--girth) * (2.8 / 3));
    position: absolute;
    border-radius: 50%;
}


.light {
    top: 0%;
}

.medium {
    top: 33.33%;
}

.dark {
    bottom: 0%;
}

.wood {
    height: var(--girth);
    aspect-ratio: 1;
    clip-path: polygon(0 0%, 0 100%, 100% 50%);
    position: absolute;
    right: 0%;
    background: hsl(24 77% 77%);
}

.shadow {
    height: 100%;
    aspect-ratio: 1;
    clip-path: polygon(0% 0%, 100% 50%, 70% 50%, 0% 20%);;
    position: absolute;
    right: 0%;
    background: hsl(24 58% 70%);
}

.lead {
    height: 33.3333%;
    top: 33.3333%;
    aspect-ratio: 1;
    clip-path: polygon(0 0%, 0 100%, 100% 50%);
    position: absolute;
    right: 0%;
}

.return {
    width: 5rem;
    aspect-ratio: 2;
    border-radius: 10px 0 0 10px;
    background: #995cd6;

    position: absolute;
    right: 0;
    bottom: 5vh;

    display: grid;
    place-items: center;
}

.arrow {
    width: 80%;
    height: 60%;
    background: white;
    clip-path: polygon(0% 50%, 30% 0%, 30% 35%, 100% 35%, 100% 65%, 30% 65%, 30% 100%);
}

/* when the device is in portrait mode */
@media (max-aspect-ratio: 1/1) {
    #app-container {
        flex-direction: column-reverse;
    }

    .drawing {
        height: auto;
        width: 90%;
    }

    .pencil-case {
        flex-direction: row;
        width: 100vw;
        height: 15vh;
        top: 0;
    }

    .pencil {
        transform: rotate(90deg);
        transition: top 0.5s;
        top: 0;
    }

    .pencil-ui-container {
        --girth: calc(100vw / var(--n_pencils) * 0.5)
    }

    .selected {
        left: 0;
        top: 50%;
        transition: top 0.5s;
    }
}