.spia::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 55%;
    transform: translate(-50%,-50%);
    border-left: var(--spiaToogleLeft) solid transparent;
    border-right: var(--spiaToogleLeft) solid transparent;
    border-top: var(--spiaToogleTop) solid var(--spiaToogleColor);
}

.spia {
    position: absolute;
    height: var(--spiaHeight);
    width: calc(var(--spiaHeight) * var(--spiaWidthFactor));
    background-color: var(--spiaColor);
    border: var(--spiaBorderWidth) solid var(--spiaBorderColor);
    border-radius: var(--spiaBorderRadius);
    animation: var(--spiaAnimation);
}

/*SPIA MATERIALE SKIP*/
.spia_skip_materiale {
    top: calc(var(--skipPosition) - var(--heightSkip) / var(--spiaAdjustment));
    transform: translateY(-100%);
    left: calc(95% - var(--spiaWidth));
}

/*SPIA NUMERO ESTRATTORE*/
.spia_index {
    font-weight: bold;
    font-size: var(--fontSizeSmall);
    color: var(--spiaColorIndex);

}

/*SPIA POLMONE INERTI*/
.spia_mixer_bucket {
    color: white;
    left: calc(96% - var(--spia Width));
    top: 0%;

}

.spia_small {
    --spiaHeight: var(--spiaSmall);
    --spiaToogleLeft: var(--spiaToggleleftSmall);
    --spiaToogleTop: var(--spiaToggleTopSmall);
}

.spia_medium {
    --spiaHeight: var(--spiaMedium);
    --spiaToogleLeft: var(--spiaToggleleftMedium);
    --spiaToogleTop: var(--spiaToggleTopMedium);
}

.spia_big {
    --spiaHeight: var(--spiaBig);
    --spiaToogleLeft: var(--spiaToggleleftBig);
    --spiaToogleTop: var(--spiaToggleTopBig);
}

.spia_veryBig {
    --spiaHeight: var(--spiaVeryBig);
    --spiaToogleLeft: var(--spiaToggleleftVeryBig);
    --spiaToogleTop: var(--spiaToggleTopVeryBig);
}

.spia_imageBig {
    --spiaHeight: var(--spiaImageBig);
}

/*SPIA POLMONE CALCESTRUZZO SONDA CALCESTRUZZO*/
.spia_concrete_bucket_cp {
    left: 103%;
    top: 1%;
}

/*SPIA POLMONE CALCESTRUZZO SONDA PIENO*/
.spia_concrete_bucket_full {
    left: -16%;
    top: 1%;
}

/*COLORI SPIE TOGGLE*/
[spia-toogle-color="black"] {
    --spiaToogleColor: var(--colorBlack);
}

[spia-toogle-color="green"] {
    --spiaToogleColor: var(--colorGreen);
}

[spia-toogle-color="red"] {
    --spiaToogleColor: var(--colorRed);
}

[spia-toogle-color="yellow"] {
    --spiaToogleColor: var(--colorYellow);
}

[spia-toogle-color="darkorange"] {
    --spiaToogleColor: var(--colorOrange);
}

[spia-toogle-color="limegreen"] {
    --spiaToogleColor: var(--colorLimegreen);
}

/*COLORI BORDO SPIE*/
[spia-border-color="black"] {
    --spiaBorderColor: var(--colorBlack);
}

[spia-border-color="green"] {
    --spiaBorderColor: var(--colorGreen);
}

[spia-border-color="red"] {
    --spiaBorderColor: var(--colorRed);
}

[spia-border-color="yellow"] {
    --spiaBorderColor: var(--colorYellow);
}

[spia-border-color="darkorange"] {
    --spiaBorderColor: var(--colorOrange);
}

[spia-border-color="limegreen"] {
    --spiaBorderColor: var(--colorLimegreen);
}

/*COLORI SPIE NORMALI*/
[spia-color="black"] {
    --spiaColor: var(--colorBlack);
}

[spia-color="red"] {
    --spiaColor: var(--colorRed);
}

[spia-color="green"] {
    --spiaColor: var(--colorGreen);
}

[spia-color="limegreen"] {
    --spiaColor: var(--colorLimegreen);
}

[spia-color="yellow"] {
    --spiaColor: var(--colorYellow);
}

[spia-color="blue"] {
    --spiaColor: var(--colorBlue);
}

[spia-color="gray"] {
    --spiaColor: var(--colorGray);
}

[spia-color="lightgray"] {
    --spiaColor: var(--colorLightgray);
}

[spia-color="brown"] {
    --spiaColor: var(--colorBrown);
}

[spia-color="darkorange"] {
    --spiaColor: var(--colorOrange);
}

[spia-color="transparent"] {
    --spiaColor: transparent;
}

/*COLORE INDICI SPIA*/
[spia-color-index="white"] {
    --spiaColorIndex: var(--colorWhite);
}

[spia-color-index="black"] {
    --spiaColorIndex: var(--colorBlack);
}

/*SPIA CIRCOLARE*/
[spia-form="circle"] {
    --spiaBorderRadius: 50%;
}

/*SPIA TOOGLE*/
[spia-form="toogle"] {
    --spiaBorderRadius: 20%;
}

/*ANIMAZIONE SPIA (LAMPEGGIO)*/
[spia-animation="blink"] {
    --spiaAnimation: blink-animation 1s steps(5, start) infinite;
}

/*SPESSORE BORDO SPIA*/
[spia-border="small"] {
    --spiaBorderWidth: var(--spiaBorderWidthSmall);
}

[spia-border="medium"] {
    --spiaBorderWidth: var(--spiaBorderWidthMedium);
}

[spia-border="big"] {
    --spiaBorderWidth: var(--spiaBorderWidthBig);
}