How can I straighten the lines making up the arrows of this full screen button (and also reduce the excessive variable use)?

Here’s my code so far:

function toggleState(target) {
  target.classList.toggle("animate");
}

:root {
    --btn-size: 15vmin;
    --btn-anim-len: 0.5s;
    --btn-anim-len-half: calc(0.5*var(--btn-anim-len));
    --btn-anim-len-quar: calc(0.25*var(--btn-anim-len));
    --btn-anim-func: cubic-bezier(0.55,-0.15,0.45,1.15);
    --btn-color: #929292;
    
    /*Variables to trim:*/
    --fs-btn-pos1: calc((3/15)*var(--btn-size));
    --fs-btn-pos2: calc((4/15)*var(--btn-size));
    --fs-btn-pos3: calc((5/15)*var(--btn-size));
    --fs-btn-pos4: calc((6/15)*var(--btn-size));

    --fs-btn-neg1: calc(-1*var(--fs-btn-pos1));
    --fs-btn-neg2: calc(-1*var(--fs-btn-pos2));
    --fs-btn-neg3: calc(-1*var(--fs-btn-pos3));
    --fs-btn-neg4: calc(-1*var(--fs-btn-pos4));
}
#fs-btn {
    height: var(--btn-size);
    aspect-ratio: 1/1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--btn-color);
    transition: rotate var(--btn-anim-len) var(--btn-anim-func);
}
#fs-btn::before, #fs-btn::after {
    position: absolute;
    display: block;
    box-sizing: border-box;
    content: "";
    color: var(--btn-color);
    transition:
        height var(--btn-anim-len-half) ease-in-out var(--btn-anim-len-quar),
        width var(--btn-anim-len-half) ease-in-out var(--btn-anim-len-quar),
        box-shadow var(--btn-anim-len) ease-in-out,
        filter calc(0.1*var(--btn-anim-len)) var(--btn-anim-func);
}
#fs-btn::before {
    height: var(--fs-btn-pos3);
    width: var(--fs-btn-pos1);
    box-shadow:
        var(--fs-btn-pos4) var(--fs-btn-pos3),
        var(--fs-btn-neg4) var(--fs-btn-pos3),
        var(--fs-btn-pos4) var(--fs-btn-neg3),
        var(--fs-btn-neg4) var(--fs-btn-neg3);
}
#fs-btn::after {
    height: var(--fs-btn-pos1);
    width: var(--fs-btn-pos3);
    box-shadow:
        var(--fs-btn-pos3) var(--fs-btn-pos4),
        var(--fs-btn-pos3) var(--fs-btn-neg4),
        var(--fs-btn-neg3) var(--fs-btn-pos4),
        var(--fs-btn-neg3) var(--fs-btn-neg4);
}
#fs-btn:hover:active {
    filter: brightness(0.9);
}
#fs-btn.animate {
    rotate: 180deg;
}
#fs-btn.animate::before {
    height: var(--fs-btn-pos1);
    width: var(--fs-btn-pos3);
    box-shadow:
        var(--fs-btn-pos3) var(--fs-btn-pos2),
        var(--fs-btn-neg3) var(--fs-btn-pos2),
        var(--fs-btn-pos3) var(--fs-btn-neg2),
        var(--fs-btn-neg3) var(--fs-btn-neg2);
}
#fs-btn.animate::after {
    height: var(--fs-btn-pos3);
    width: var(--fs-btn-pos1);
    box-shadow:
        var(--fs-btn-pos2) var(--fs-btn-pos3),
        var(--fs-btn-pos2) var(--fs-btn-neg3),
        var(--fs-btn-neg2) var(--fs-btn-pos3),
        var(--fs-btn-neg2) var(--fs-btn-neg3);
}

<div id="fs-btn" onclick="toggleState(this)"></div>

As you can see, the lines look fine here, but when run on Google the lines look off which makes the button look a little sloppy. According to the math ‘n’ stuff, they should be straight, but when the program runs on Google they aren’t.
I also want to reduce the number of variables used to make the button, but I can’t think of a more efficient method that I can change the size of easily without having to modify the values of every single box-shadow to the new size.