/* Rules shared by all palettes */
/* @import url('../../layers.css'); */
/* Order of precedence for all cascade layers in Web Awesome */
@layer wa-native, wa-base, wa-utilities, wa-color-palette, wa-color-variant, wa-theme, wa-theme-dimension, wa-theme-overrides;

@layer wa-base {
    /**
    Because headers are sticky, this is needed to make sure page fragment anchors scroll down past the headers / subheaders and are visible.
    IE: \`<a href="#id-for-h2">\` anchors.
    */
    wa-page :is(*, *:after, *:before) {
        scroll-margin-top: var(--scroll-margin-top);
    }

    wa-page[view='desktop'] [data-toggle-nav] {
        display: none;
    }

    wa-page[view='mobile'] .wa-desktop-only,
    wa-page[view='desktop'] .wa-mobile-only {
        display: none !important;
    }
}

@layer wa-color-variant {
    :where(:root),
    /* default */
    .wa-brand-kit {
        --wa-color-brand-95: #f2fbf8;
        --wa-color-brand-90: #d9f3ec;
        --wa-color-brand-80: #b3e5d7;
        --wa-color-brand-70: #80d4bf;
        --wa-color-brand-60: #4dc3a7;
        --wa-color-brand-50: #00876c;
        --wa-color-brand-40: #00785f;
        --wa-color-brand-30: #006650;
        --wa-color-brand-20: #00503f;
        --wa-color-brand-10: #00382c;
        --wa-color-brand-05: #001c16;

        --wa-color-brand: var(--wa-color-brand-50);
        --wa-color-brand-on: white;

        --wa-color-brand-alpha: #00876c20;
    }
}

:root {
    --font-monospace: 'Courier New', Courier, monospace;
}

html,
body {
    min-height: 100vh;
    margin: 0;
    padding: 0;
}

#main {
    height: 100vh;
    width: 100vw;
    overflow: hidden;
}

wa-split-panel {
    height: 100%;
}

wa-color-picker {
    display: inline-block;
    vertical-align: middle;
}

#canvasWrapper {
    position: relative;
}

#toolbar {
    position: absolute;
    bottom: 0;
    max-width: 100%;
    left: 50%;
    bottom: 1em;
    translate: -50%;
    z-index: 100;
}

div:has(.labelCard) {
    position: relative;
    z-index: 1;
}

.labelCard {
    position: absolute;
    font-size: x-small;
    top: 0;
    right: 0;
    z-index: 1;
    border-radius: 0 0 0.5rem 0.5rem;
    width: 5rem;
    --spacing: 0.2em;
    text-align: center;
    cursor: default;
    font-family: var(--font-monospace);
    opacity: 0.7;
}

.labelCard:hover {
    opacity: 1;
}

#tools {
    text-wrap: nowrap;
    align-items: center;
    -webkit-user-select: none;
    user-select: none;
}

#tools wa-divider {
    vertical-align: middle;
}

#processing_canvas {
    width: 100%;
    height: 100%;
    min-height: 100vh;
}

#editorDraw,
#editorSetup {
    height: 100%;
    width: 100%;
}

#strokeColorPicker::part(trigger)::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    translate: -50% -50%;
    background-color: Canvas;
    width: 50%;
    height: 50%;
    border-radius: calc(0.5 * var(--wa-form-control-border-radius));
}

#strokeWidthButton {
    width: var(--wa-form-control-height);
    height: var(--wa-form-control-height);
    overflow: hidden;
    vertical-align: middle;
}

wa-button.active::part(button) {
    background-color: var(--wa-color-neutral-80);
}

#console {
    padding: 1lh;
    z-index: 1;
    background-color: Canvas;
}

#errConsole {
    cursor: pointer;
    font-family: var(--font-monospace);
    color: var(--wa-color-on-quiet);
}

wa-split-panel[disabled] {
    --divider-width: 0px;
    --divider-hit-area: 0px;
}

.ace_highlight {
    font-weight: bold;
    border-left: 2px solid var(--wa-color-on-quiet);
    background-color: var(--wa-color-brand-alpha);
    position: absolute;
    z-index: 2;
}

.monospace {
    font-family:var(--font-monospace);
    white-space:pre-wrap;
}

wa-toast-item {
    --padding: var(--wa-space-xs);
}