.kreise-panel select {

    height: 2em;

}

.kreise-panel input {

    height: 2em;

}

.kreise-panel button {

    height: 2em;

}

.kreise-panel-row {

    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;

}

.kreise-panel label,
select,
input[type="range"] {

    vertical-align: middle;

}

.kreise-panel-row input[type="radio"],
.kreise-panel-row input[type="checkbox"] {
    margin: 0;
    /* remove default offsets */
    vertical-align: middle;
    /* fallback for safety */
}



.kreise-panel button.active {

    background-color: rgb(var(--third-decent));

}


/* MARK: Layers */

.fourd-editor-layer-row {
    /* Fallback if JS hasn't run yet */
    --alpha-percent: 100%;

    /* The progress bar is a semi-transparent white overlay */
    background-image: linear-gradient(to right,
            rgba(var(--main-color), 0.2) var(--alpha-percent),
            transparent var(--alpha-percent));
}

/* Active drawing state */
.fourd-editor-layer-row:has(input[type="radio"]:checked) {
    /* This color will show through the 'transparent' part of the gradient */
    background-color: rgb(var(--first-decent));
}