@use "game.scss";

$outline: game.$svg-outline-width;
$margin: 80px;

.fill-board {
    position: absolute;
    width: 100%;
    height: 100%;
}

#polymaskWrapper {
    top: -$margin;
    left: -$margin;
    width: calc(100% + #{2 * $margin}) !important;
    height: calc(100% + #{2 * $margin}) !important;
}

#polymask {
    width: 100%;
    height: 100%;

    rect {
        width: 100%;
        height: 100%;
    }

    .polypattern, #polynegdisplay {
        stroke: #fb8;
        stroke-width: $outline;
    }

    #polynegdisplay {
        fill: none;
    }

    #polyprev {
        fill: none;
        stroke: #fff;
        stroke-width: $outline;
        stroke-dasharray: $outline * 2;
        stroke-linejoin: round;
        stroke-linecap: round;

        &.poly-invalid {
            stroke: #f66;
        }
    }
}

#polyprevpos, #polyprevneg {
    stroke: white !important;
    stroke-width: $outline;
}

#polyprevpos { opacity: 0.9; }
#polyprevneg { opacity: 0.75; }

mask > rect {
    --darkreader-inline-fill: white !important;
}

.polypattern, #polyMaskWrapper.opaque .positive-pole {
    fill: url(#barrier) !important;
}

#polymaskWrapper.opaque {
    z-index: 2;
    opacity: 1 !important;

    .polypattern {
        fill: var(--color-background) !important;
        opacity: 1 !important;
    }
}