body {
    --artimus-eraser-outline: #438eff;
    --artimus-eraser-inline: #d0d0ff;

    --artimus-grid-1: #bbbbff;
    --artimus-grid-2: #7878a4;

    --artimus-selection-outline: #438eff;

    --artimus-background-1: #e2e2ff;
    --artimus-background-2: #d0d0ff;
    --artimus-background-3: #bbbbff;

    --artimus-button-normal: #e2e2ff;
    --artimus-button-hover: #c2c2ff;
    --artimus-button-click: #438eff;
    --artimus-button-selected: #aaaaff;

    --artimus-text: #29053a;
    --artimus-icon: #29053a;
}

.artimus-container {
    --tab-1: 1;
    --tab-2: 0;
    --tab-3: 0;

    display: grid;
    grid-template-columns: 200px 0px 1fr;

    width: 100%;
    height: 100%;

    background-color: var(--artimus-background-2);

    color: var(--artimus-text);

    transition: 300ms grid-template-columns;
}

.artimus-toolbar {
    display: grid;
    grid-template-rows: 33.3333% 33.3333% 33.3333%;
    height: 100%;

    background-color: var(--artimus-background-1);

    max-height: 100%;
    min-height: 0px;

    transition: 300ms grid-template-rows;
}

.artimus-toolbarTabs {
    display: grid;
    grid-template-rows: 33.3333% 33.3333% 33.3333%;
    height: 100%;

    background-color: var(--artimus-background-1);

    max-height: 100%;
    min-height: 0px;

    transition: 300ms grid-template-rows;
    
    overflow: hidden;
}

.artimus-sideBarList {
    margin: 8px;
    padding: 4px;

    border-radius: 16px;
    background-color: var(--artimus-background-2);
    display: flex;
    flex-direction: column;

    overflow-y: auto;
}

.artimus-sideBarList:nth-child(1) { --tab-open: var(--tab-1); }
.artimus-sideBarList:nth-child(2) { --tab-open: var(--tab-2); }
.artimus-sideBarList:nth-child(3) { --tab-open: var(--tab-3); }

@media (max-height: 424px) {
    .artimus-container {
        grid-template-columns: 180px 48px 1fr;
    }

    .artimus-toolbar {
        grid-template-rows: calc(var(--tab-1) * 100%) calc(var(--tab-2) * 100%) calc(var(--tab-3) * 100%);
    }

    .artimus-sideBarList {
        margin: calc(8px * var(--tab-open));
        padding: calc(4px * var(--tab-open));
    }
}

.artimus-canvasArea {
    overflow: hidden;
    position: relative;
}

.artimus-canvas {
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
    image-rendering: pixelated;

    /* Weird chromium Win-11 bug */
    filter: blur(0);

    transform: translate(-50%, -50%) scale(var(--zoom)) translate(var(--scrollX), var(--scrollY));
    position: absolute;
    top: 50%;
    left: 50%;
    margin: 0%;
}

.artimus-layerHolder {
    display: grid;
    grid-template-rows: calc(100% - 30px) 30px;
}

.artimus-layerWrapper {
    display: flex;
}

.artimus-layerList {
    display: flex;
    flex-direction: column-reverse;
    overflow-y: auto;
}

.artimus-layerCreationHolder {
    height: 24px;
    display: grid;
    max-width: 100%;
    grid-template-columns: calc(100% - 24px) 24px;
    margin-top: 4px;
    margin-bottom: 2px;
}

.artimus-button {
    background-color: var(--artimus-button-normal);
    color: var(--artimus-text);
    transition: 300ms background-color;

    border-width: 0px;
    border-style: solid;
    border-color: var(--artimus-background-2);
    border-radius: 16px;
}

.artimus-button:hover {
    background-color: var(--artimus-button-hover);
}

.artimus-button:active {
    background-color: var(--artimus-button-click);
    transition: 0ms background-color;
}

.artimus-button-selected {
    background-color: var(--artimus-button-selected);
}

.artimus-layerCreationButton {
    border-radius: 8px;
}

.artimus-layerCreationName {
    width: calc(100% - 12px);
    border-radius: 16px;
}

.artimus-layerButtonHolder {
    display: flex;
    flex-direction: column;
}

.artimus-layerButton {
    min-width: 24px;
    max-height: 24px;
    aspect-ratio: 1;
    height: auto;

    padding: 0px;

    border-radius: 16px;

    overflow: hidden;
}

.artimus-layerButton-thin {
    width: 24px;
    height: auto;
    aspect-ratio: 2/1;

    border-radius: 16px;

    overflow: hidden;
}

.artimus-layerArrow { 
    width: 100%;

    position: relative;

    top: 50%;
    left: 50%;
}

.artimus-hideIcon {
    width: 100%;
    height: 100%;
}

.artimus-layerArrow-down { transform: scale(1, -1) translate(-50%, 50%); }
.artimus-layerArrow-up { transform: translate(-50%, -50%); }

.artimus-sideBarButton {
    display: flex;
    width: 100%;

    justify-content: left;
    align-items: center;

    border-radius: 16px;

    margin-bottom: 4px;

    color: var(--artimus-text);
}

.artimus-toolbarTab {
    width: 100%;
    height: 100%;

    margin: 0px;
    padding: 0px;

    display: flex;
    align-items: center;
}

.artimus-toolIcon {
    width: 32px;
    height: 32px;

    margin-right: 16px;

    pointer-events: none;

    color: var(--artimus-icon);
}

.artimus-toolLabel {
    margin: 0px;
    text-align: center;

    pointer-events: none;
}

.artimus-tabIcon {
    width: 48px;
    height: 48px;
    margin-left: auto;
    margin-right: auto;
}

.artimus-layer {
    margin: 0px;
}


/* CUGI items */
.artimus-toolbar .CUGI-PropertyHolder {
    display: flex;
    margin: 2px;
    padding: 0px;

    font-family: monospace;
    font-weight: bold;
}

input[type="number"] {
    width: 48px;
}

.CUGI-Label {
    margin: 2px;
}

.CUGI-Popup {
    position: absolute;

    left: var(--x);
    top: var(--y);

    background-color: var(--artimus-background-1);
    border-width: 2px;
    border-radius: 20px;
    border-color: var(--artimus-background-3);
    border-style: solid;

    z-index: 99999;

    animation: 250ms CUGI-Popup-Open ease-out;
    overflow: hidden;
}

.CUGI-Button {
    width: 100%;
    text-align: left;
    padding-left: 8px;
    padding-right: 8px;

    background-color: var(--artimus-button-normal);
    transition: 300ms background-color;
}

.CUGI-Button:hover {
    background-color: var(--artimus-button-hover);
}

.CUGI-Button:active {
    background-color: var(--artimus-button-click);
    transition: 0ms background-color;
}

.CUGI-Slider {
    width: 50%;
}

@keyframes CUGI-Popup-Open {
    0% {
        scale: 1 0;
        translate: 0 -50%;
        opacity: 0%;
    }
    100% {
        scale: 1 1;
        translate: 0 0%;
        opacity: 100%;
    }
}

/* ? Portrait Screens ? */
@media screen and (min-height: 100vw) {
    /* Move tool bar to the top */
    .artimus-container {
        grid-template-rows: 200px 0px 1fr;
        grid-template-columns: auto;

        transition: 300ms grid-template-rows;
    }

    .artimus-toolbar {
        display: grid;
        grid-template-columns: 33.3333% 33.3333% 33.3333%;
        grid-template-rows: auto;
        width: 100%;
        height: 200px;

        max-height: 100%;
        min-height: 0px;
        transition: 300ms grid-template-columns;
    }

    @media (max-width: 50vh) {
        .artimus-container {
            grid-template-rows: 180px 48px 1fr;
        }

        .artimus-toolbar {
            grid-template-columns: calc(var(--tab-1) * 100%) calc(var(--tab-2) * 100%) calc(var(--tab-3) * 100%);
        }
    
        .artimus-toolbarTabs {
            grid-template-columns: 33.3333% 33.3333% 33.3333%;
            grid-template-rows: auto;

            transition: 300ms grid-template-columns;
        }

        .artimus-sideBarList {
            margin: calc(8px * var(--tab-open));
            padding: calc(4px * var(--tab-open));
        }
    }
}