:root {
    --scale-factor: 2;
    --default-size: 16px;
}

[data-state].hidden {
    display: none;
}

.list {
    display: flex;
    flex-wrap: wrap;
}
.grid {
    display: grid;
    grid-template-columns: repeat(var(--width), calc(var(--scale-factor) * var(--default-size)));
}

.m1 {
    margin: 0.1em;
}
.m2 {
    margin: 0.5em;
}

body {
    display: grid;
    grid-template-columns: var(--left-nav, 400px) 1fr var(--right-nav, 300px);
    grid-template-rows: 40px 1fr var(--bottom-nav, 200px);
}
#top-menu {
    grid-column: 1 / -1;
    grid-row: 1;
}
#left-menu {
    grid-column: 1;
    grid-row: 2;
}
main {
    grid-column: 2;
    grid-row: 2;
}
#right-menu {
    grid-column: 3;
    grid-row: 2;
}
#bottom-menu {
    grid-column: 1 / -1;
    grid-row: 3;
}

.atlas-texture {
    image-rendering: -moz-crisp-edges; /* Firefox fallback */
    image-rendering: pixelated;        /* Modern browsers */

    background-size: calc(var(--scale-factor) * var(--atlas-resolution))
                     calc(var(--scale-factor) * var(--atlas-resolution));

    width: calc(var(--scale-factor) * var(--size-x));
    height: calc(var(--scale-factor) * var(--size-y));

    background-position-x: calc(var(--scale-factor) * var(--raw-x) * -1);
    background-position-y: calc(var(--scale-factor) * var(--raw-y) * -1);
}
.atlas-air {
    width: calc(var(--scale-factor) * var(--size-x, var(--default-size)));
    height: calc(var(--scale-factor) * var(--size-y, var(--default-size)));
    outline: calc(var(--scale-factor) * 0.5px) solid var(--cell-empty-outline-color, #ccc);
}
.atlas-air:hover, .atlas-texture:hover {
    outline: calc(var(--scale-factor) * 1px) solid var(--cell-hover-outline-color, #8888);
}
[data-highlight] {
    position: relative;
}
[data-highlight] .atlas-texture:after, [data-highlight] .atlas-air:after {
    content: '';
    position: absolute;
}
[data-highlight='x'] .atlas-texture:after, [data-highlight='x'] .atlas-air:after {
    inset:
            calc(var(--scale-factor) * var(--size-y, var(--default-size)) * 0.4)
            0
            calc(var(--scale-factor) * var(--size-y, var(--default-size)) * 0.4)
            0;
    background-color: var(--higlight-color, #f808);
}
[data-highlight='y'] .atlas-texture:after, [data-highlight='y'] .atlas-air:after {
    inset:
            0
            calc(var(--scale-factor) * var(--size-y, var(--default-size)) * 0.4)
            0
            calc(var(--scale-factor) * var(--size-y, var(--default-size)) * 0.4);
    background-color: var(--higlight-color, #f808);
}
[data-highlight='z'] .atlas-texture:after, [data-highlight='z'] .atlas-air:after {
    inset:
            calc(var(--scale-factor) * var(--size-y, var(--default-size)) * 0.4)
            calc(var(--scale-factor) * var(--size-y, var(--default-size)) * 0.4)
            calc(var(--scale-factor) * var(--size-y, var(--default-size)) * 0.4)
            calc(var(--scale-factor) * var(--size-y, var(--default-size)) * 0.4);
    background-color: var(--higlight-color, #f808);
}

#block-list [data-active] {
    outline: calc(var(--scale-factor) * 1px) solid var(--block-active-outline-color, #000);
}