@import "/stylesheet/main.css";

:root {
    --err-strong: color-mix(in srgb, red 50%, var(--text));
    --err-weak: color-mix(in srgb, red 10%, var(--bg));
}

input,
select {
    font-family: var(--font-code);
    font-size: var(--font-small);

    &.coord {
        max-width: 6rem;
    }

    &[type="number"] {
        max-width: 4rem;
    }

    &:invalid {
        border-color: var(--err-strong);
        background-color: var(--err-weak);
    }
}

#canvas-frame {
    justify-content: center;
    position: sticky;
    top: 10px;
    max-width: 95%;
    background-color: var(--bg);
    justify-self: center;
    box-shadow: 0 0 0.25em var(--muted);
}

#output_canvas {
    flex-grow: 1;
    flex-shrink: 1;
}

.card {
    margin: 2rem 0;

    :first-child {
        margin-top: 0;
    }

    summary>h3 {
        display: inline-block;
    }
}

.flex-col {
    display: flex;
    flex-direction: column;
}

.flex-row {
    display: flex;
    width: 100%;
    gap: 1rem;
}

.row {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

svg {
    text {
        fill: var(--muted);
        font-family: sans-serif;
        font-size: 10.667px;

        &.axis {
            font-size: 16px;
        }
    }

    #connector {
        fill: none;
        stroke: var(--text);
    }

    circle {
        r: 5px;
        stroke: none;
        fill: var(--text);
    }
}

#loading {
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;
    
    background-color: color-mix(in srgb, var(--bg) 30%, transparent);
}

.spinner {
    --size: 1px;
    --thickness: calc(8 * var(--size));
    --diameter: calc(96 * var(--size));
    
    position: absolute;
    top: calc(50% - var(--diameter)/2);
    left: calc(50% - var(--diameter)/2);

    width: var(--diameter);
    height: var(--diameter);
    border: var(--thickness) solid var(--muted);
    border-bottom-color: transparent;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
}

@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}