.menu-radial_editor {
    position: absolute;
    z-index: 1000;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;
}

.menu-radial_editor-label {
    position: absolute;

    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;

    width: fit-content;
    height: fit-content;
    
    font-weight: bolder;
    font-size: 2rem;
    background-color: rgba(0, 0, 0, 0.33);

    padding: 0rem 1rem;

    border-radius: 10000px;
}

.menu-radial_editor-ring {
    position: absolute;
    
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    #border {
        fill: #1a5961;
    }

    #background {
        fill: #363d45;
    }

    #ring_empty, #ring_fill {
        fill: none;
        stroke: #242e33;
        stroke-width: 15%;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

    #ring_fill {
        stroke: #128c94 ;
        stroke-dasharray: calc(3.141 * var(--a, 0%) * 0.8), 500%;
    }
}

.menu-editor-cursor {
    $size: 35%;

    position: absolute;
    
    top: calc(var(--y) - #{$size} / 2);
    left: calc(var(--x) - #{$size} / 2);
    
    width: $size;
    height: $size;

    opacity: 0.66;

    circle {
        fill: #0e3337;
        stroke: #1a5961;
        stroke-width: 4%;
    }
}

.menu-radial_editor-indicator {
    $size: 15%;

    position: absolute;
    
    top: calc(var(--y) - #{$size} / 2);
    left: calc(var(--x) - #{$size} / 2);
    
    transform: rotate(calc(var(--r) + 45deg));

    width: $size;
    height: $size;

    rect {
        fill: #0e7076;
        stroke: #15a8b1;
        stroke-width: 8%;
    }
}

.menu-axis_editor {
    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;
}

.menu-axis_editor-svg {
    position: absolute;
    
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    .border {
        stroke: #1a5961;
        stroke-width: 1.75%;
    }

    #center-background {
        fill: #363d45;
    }

    #background {
        fill: #242e33;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

    .arc {
        fill: none;
        stroke-width: 25%;
        stroke-dasharray: 0, calc(3.141 * 75% * 0.70), 500%;

        transform-origin: center;
        animation: 100.1s linear calc(-1s * var(--lerp, 99)) paused stroke-lerp;

        --lerp-a: #0e3337;
        --lerp-b: #15a8b1;
        
        @keyframes stroke-lerp {
          from {
            stroke: var(--lerp-a);
          }
 
          to {
            stroke: var(--lerp-b);
          }
        }
    }

    .arc-1 {
        transform: rotate(-45deg);
    }
    .arc-2 {
        transform: rotate(45deg);
    }
    .arc-3 {
        transform: rotate(135deg);
    }
    .arc-4 {
        transform: rotate(225deg);
    }
}

.menu-axis_editor-labels {
    $padding: 3%;

    display: contents;

    > * {
        position: absolute;
    
        width: 20%;
        height: 20%;
    }

    #up { top: $padding; }
    #right { right: $padding; }
    #down { bottom: $padding; }
    #left { left: $padding; }

    #up, #down {
        left: 0;
        right: 0;
        margin: 0 auto;
    }

    #right, #left {
        top: 0;
        bottom: 0;
        margin: auto 0;
    }
}