/*switcher*/
.form-switcher-container label,
.form-switcher input:not([type="submit"]):not([type="reset"]):not([type="radio"]):not([type="checkbox"]):not(:placeholder-shown) ~ label{
    transform:  scale(0.75)!important; margin:0;
    display: block;
    line-height: 0.87;
    overflow: visible;
    transform-origin: 0;
    transform: scale(0.75);
}
.form-switcher input[type="checkbox"] {
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.form-switcher input[type="checkbox"]:focus {
    outline: none;
}


.form-switcher-point  {
    position: absolute;
    /*top: 0;*/
    width: var(--switcherWidth);
    bottom: 0;
    left: 0;
    height: 2.3rem;
    min-height:calc((var(--paddingYInput) * 2) + (var(--fontSizeInput) * 1.5) - calc(var(--fontSizeLabel) / 100 * 75 * 1.15));
}

.form-switcher {
    position: relative;
    margin: 0;
    display: inline-flex;
    flex-direction: column-reverse;
gap:var(--marginBottomLabel);
gap:0;
    overflow: hidden;
}
.volcano-input-small .form-switcher .form-switcher-point,
.volcano-input-small .form-switcher .form-switcher-bar {
    width: var(--switcherWidthSmall);
}

.volcano-input-big .form-switcher .form-switcher-point,
.volcano-input-big .form-switcher .form-switcher-bar{
    width: var(--switcherWidthBig);
}

  .form-switcher .form-switcher-bar {
    border-radius: 2rem;
}

.form-switcher input[type="checkbox"] {
    position: absolute;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 3;
}

.form-switcher-point {
    z-index: 2;
}

.form-switcher-bar {
    width: var(--switcherWidth);
    height: 2.3rem;
    min-height:calc((var(--paddingYInput) * 2) + (var(--fontSizeInput) * 1.5) - calc(var(--fontSizeLabel) / 100 * 75 * 1.15));
    background-color: var(--backgroundInput);
    transition: 0.3s ease all;
    z-index: 1;
}

input:hover ~ .form-switcher-bar {
    background-color: var(--backgroundInputHover);
}

.form-switcher .form-switcher-point::before {
    content: 'NO';
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 0;
    bottom: 0;
    margin: auto 0;
    left: 4px;
    width: 2rem;
    height: 2rem;
    color: var(--colorTextSecondaryDefault);
    font-size: 10px;
    font-weight: bold;
    text-align: center;
    line-height: 1;
    padding: 9px 4px;
    background-color: var(--colorBackgroundSecondaryDefault);
    border-radius: 50%;
    transition: 0.3s ease all, left 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15);
}

.form-switcher input[type="checkbox"]:active + .form-switcher-point::before {
    width: 46px;
    border-radius: 100px;
}

.form-switcher input[type="checkbox"]:checked:active + .form-switcher-point::before {
    margin-left: -26px;
}

.form-switcher input[type="checkbox"]:checked + .form-switcher-point::before {
    content: 'SI';
    left: 42px;
    color: var(--colorTextPrimaryDefault);
    background-color: var(--colorBackgroundPrimaryDefault);
}

.form-switcher input[type="checkbox"]:indeterminate + .form-switcher-point::before {
    content: '-';
    left: 24px;
    background-color: var(--colorShadowLight);
}

.form-switcher input[type="checkbox"]:checked ~ .form-switcher-bar {
    background-color: var(--colorBackgroundPrimaryLight);
}

.form-danger .form-switcher input[type="checkbox"]:checked + .form-switcher-point::before,
.form-error .form-switcher input[type="checkbox"]:checked + .form-switcher-point::before {
    color: var(--colorTextDangerDefault);
    background-color: var(--colorBackgroundDangerDefault);
}

.form-danger .form-switcher input[type="checkbox"]:checked ~ .form-switcher-bar,
.form-error .form-switcher input[type="checkbox"]:checked ~ .form-switcher-bar {
    background-color: var(--colorBackgroundDangerLight);
}

.form-info .form-switcher input[type="checkbox"]:checked + .form-switcher-point::before {
    color: var(--colorTextInfoDefault);
    background-color: var(--colorBackgroundInfoDefault);
}

.form-info .form-switcher input[type="checkbox"]:checked ~ .form-switcher-bar {
    background-color: var(--colorBackgroundInfoLight);
}

.form-warning .form-switcher input[type="checkbox"]:checked + .form-switcher-point::before {
    color: var(--colorTextSuccessDefault);
    background-color: var(--colorBackgroundWarningDefault);
}

.form-warning .form-switcher input[type="checkbox"]:checked ~ .form-switcher-bar {
    background-color: var(--colorBackgroundWarningLight);
}

.form-success .form-switcher input[type="checkbox"]:checked + .form-switcher-point::before {
    color: var(--colorTextSuccessDefault);
    background-color: var(--colorBackgroundSuccessDefault);
}

.form-success .form-switcher input[type="checkbox"]:checked ~ .form-switcher-bar {
    background-color: var(--colorBackgroundSuccessLight);
}

/*switcher-square*/
.form-switcher.form-switcher-square .form-switcher-point::before {
    border-radius: 0;
}

.form-switcher.form-switcher-square, .form-switcher.form-switcher-square .form-switcher-bar {
    border-radius: 0;
}

.form-switcher.form-switcher-square input[type="checkbox"]:active + .form-switcher-point::before {
    border-radius: 0;
}

/*varianti style*/
.volcano-input-outline-fixed-top-inside .form-switcher-bar,
.volcano-input-outline-dynamic .form-switcher-bar,
.volcano-input-line-dynamic .form-switcher-bar,
.volcano-input-outline-fixed-top-inline .form-switcher-bar {
    background-color: var(--backgroundInputOutline);
    border: var(--borderInputWidth) solid var(--BorderColorInput);
    /*padding: var(--paddingYInput) var(--paddingXInput);*/
}

.volcano-input-outline-fixed-top-inside input:hover ~ .form-switcher-bar,
.volcano-input-outline-dynamic input:hover ~ .form-switcher-bar,
.volcano-input-line-dynamic input:hover ~ .form-switcher-bar,
.volcano-input-outline-fixed-top-inline input:hover ~ .form-switcher-bar {
    background-color: var(--backgroundInputOutlineHover);
    border-color: var(--BorderColorInputHover);
}

.volcano-input-outline-fixed-top-inside .form-switcher input[type="checkbox"]:checked ~ .form-switcher-bar,
.volcano-input-outline-dynamic .form-switcher input[type="checkbox"]:checked ~ .form-switcher-bar,
.volcano-input-line-dynamic .form-switcher input[type="checkbox"]:checked ~ .form-switcher-bar,
.volcano-input-outline-fixed-top-inline .form-switcher input[type="checkbox"]:checked ~ .form-switcher-bar {
    background-color: var(--backgroundInputOutline);
}

.volcano-input-outline-fixed-top-inline .form-switcher + label,
.volcano-input-solid-dynamic .form-switcher + label,
.volcano-input-outline-fixed-top-inside .form-switcher + label,
.volcano-input-solid-fixed-top .form-switcher + label,
.volcano-input-outline-dynamic .form-switcher + label,
.volcano-input-line-dynamic .form-switcher + label {
    transform: translateY(0%) scale(0.75);
    top: 0;
    position: absolute;
    cursor: text;
    margin: 0;
    transform-origin: left top;
}

.volcano-input-outline-fixed-top-inline .form-switcher + label {
    transform: translateY(-30%) translateX(-5px) scale(0.75);
    left: var(--paddingXInput);

}

.volcano-input-outline-fixed-top-inline .form-switcher,
.volcano-input-solid-dynamic .form-switcher,
.volcano-input-outline-fixed-top-inside .form-switcher,
.volcano-input-solid-fixed-top .form-switcher,
.volcano-input-outline-dynamic .form-switcher,
.volcano-input-line-dynamic .form-switcher {
    /*margin-top: calc(var(--fontSizeLabel) / 100 * 75 * 1.15);*/
}

/*label esterna */
.volcano-input-outline-fixed-top-outside .form-switcher {
    height: calc((var(--paddingYInput) * 2) + (var(--fontSizeInput) * 1.5));
}

.volcano-input-outline-fixed-top-outside .form-switcher .form-switcher-point::before {
    width: calc((var(--paddingYInput) * 2) + (var(--fontSizeInput)));
    height: calc((var(--paddingYInput) * 2) + (var(--fontSizeInput)));
}

.volcano-input-outline-fixed-top-outside .form-switcher input[type="checkbox"]:checked + .form-switcher-point::before {
    left: calc(100% - (var(--paddingYInput) * 2) - (var(--fontSizeInput)) - 3px);
}

.volcano-input-outline-fixed-top-outside .form-switcher input[type="checkbox"]:active + .form-switcher-point::before {
    width: calc((var(--paddingYInput) * 3) + (var(--fontSizeInput)));
}

/*label esterna piccola */
.volcano-input-solid-fixed-top .form-switcher,
.volcano-input-outline-dynamic .form-switcher,
.volcano-input-outline-fixed-top-inside .form-switcher,
.volcano-input-line-dynamic .form-switcher,
.volcano-input-outline-fixed-top-inline .form-switcher,
.volcano-input-solid-dynamic .form-switcher {
    height: calc((var(--paddingYInput) * 2) + (var(--fontSizeInput) * 1.5) - calc(var(--fontSizeLabel) / 100 * 75 * 1.15));
    height:auto;
}

.volcano-input-solid-fixed-top .form-switcher .form-switcher-point::before,
.volcano-input-outline-dynamic .form-switcher .form-switcher-point::before,
.volcano-input-line-dynamic .form-switcher .form-switcher-point::before,
.volcano-input-outline-fixed-top-inside .form-switcher .form-switcher-point::before,
.volcano-input-outline-fixed-top-inline .form-switcher .form-switcher-point::before,
.volcano-input-solid-dynamic .form-switcher .form-switcher-point::before {
    width: calc((var(--paddingYInput) * 2) + (var(--fontSizeInput)) - calc(var(--fontSizeLabel) / 100 * 75));
    height: calc((var(--paddingYInput) * 2) + (var(--fontSizeInput)) - calc(var(--fontSizeLabel) / 100 * 75));
}

.volcano-input-solid-fixed-top .form-switcher input[type="checkbox"]:checked + .form-switcher-point::before,
.volcano-input-outline-dynamic .form-switcher input[type="checkbox"]:checked + .form-switcher-point::before,
.volcano-input-outline-fixed-top-inside .form-switcher input[type="checkbox"]:checked + .form-switcher-point::before,
.volcano-input-line-dynamic .form-switcher input[type="checkbox"]:checked + .form-switcher-point::before,
.volcano-input-outline-fixed-top-inline .form-switcher input[type="checkbox"]:checked + .form-switcher-point::before,
.volcano-input-solid-dynamic .form-switcher input[type="checkbox"]:checked + .form-switcher-point::before {
    left: calc(100% - ((var(--paddingYInput) * 2) + (var(--fontSizeInput)) - calc(var(--fontSizeLabel) / 100 * 75)) - 3px);
}

.volcano-input-solid-fixed-top .form-switcher input[type="checkbox"]:active + .form-switcher-point::before,
.volcano-input-outline-dynamic .form-switcher input[type="checkbox"]:active + .form-switcher-point::before,
.volcano-input-outline-fixed-top-inside .form-switcher input[type="checkbox"]:active + .form-switcher-point::before,
.volcano-input-line-dynamic .form-switcher input[type="checkbox"]:active + .form-switcher-point::before,
.volcano-input-outline-fixed-top-inline .form-switcher input[type="checkbox"]:active + .form-switcher-point::before,
.volcano-input-solid-dynamic .form-switcher input[type="checkbox"]:active + .form-switcher-point::before {
    width: calc((var(--paddingYInput) * 3) + (var(--fontSizeInput)));
}

/*SMALL*/

.volcano-input-small.volcano-input-solid-fixed-top .form-switcher,
.volcano-input-small.volcano-input-outline-dynamic .form-switcher,
.volcano-input-small.volcano-input-outline-fixed-top-inside .form-switcher,
.volcano-input-small.volcano-input-line-dynamic .form-switcher,
.volcano-input-small.volcano-input-outline-fixed-top-inline .form-switcher,
.volcano-input-small.volcano-input-solid-dynamic .form-switcher {
    height: calc((var(--paddingYInputSmall) * 2) + (var(--fontSizeInput) * 1.5) - calc(var(--fontSizeLabel) / 100 * 75 * 1.15));
}

.volcano-input-small.volcano-input-solid-fixed-top .form-switcher .form-switcher-point::before,
.volcano-input-small.volcano-input-outline-dynamic .form-switcher .form-switcher-point::before,
.volcano-input-small.volcano-input-line-dynamic .form-switcher .form-switcher-point::before,
.volcano-input-small.volcano-input-outline-fixed-top-inside .form-switcher .form-switcher-point::before,
.volcano-input-small.volcano-input-outline-fixed-top-inline .form-switcher .form-switcher-point::before,
.volcano-input-small.volcano-input-solid-dynamic .form-switcher .form-switcher-point::before {
    width: calc((var(--paddingYInputSmall) * 2) + (var(--fontSizeInput)) - calc(var(--fontSizeLabel) / 100 * 75));
    height: calc((var(--paddingYInputSmall) * 2) + (var(--fontSizeInput)) - calc(var(--fontSizeLabel) / 100 * 75));
}

.volcano-input-small.volcano-input-solid-fixed-top .form-switcher input[type="checkbox"]:checked + .form-switcher-point::before,
.volcano-input-small.volcano-input-outline-dynamic .form-switcher input[type="checkbox"]:checked + .form-switcher-point::before,
.volcano-input-small.volcano-input-outline-fixed-top-inside .form-switcher input[type="checkbox"]:checked + .form-switcher-point::before,
.volcano-input-small.volcano-input-line-dynamic .form-switcher input[type="checkbox"]:checked + .form-switcher-point::before,
.volcano-input-small.volcano-input-outline-fixed-top-inline .form-switcher input[type="checkbox"]:checked + .form-switcher-point::before,
.volcano-input-small.volcano-input-solid-dynamic .form-switcher input[type="checkbox"]:checked + .form-switcher-point::before {
    left: calc(100% - ((var(--paddingYInputSmall) * 2) + (var(--fontSizeInput)) - calc(var(--fontSizeLabel) / 100 * 75)) - 3px);
}

.volcano-input-small.volcano-input-solid-fixed-top .form-switcher input[type="checkbox"]:active + .form-switcher-point::before,
.volcano-input-small.volcano-input-outline-dynamic .form-switcher input[type="checkbox"]:active + .form-switcher-point::before,
.volcano-input-small.volcano-input-outline-fixed-top-inside .form-switcher input[type="checkbox"]:active + .form-switcher-point::before,
.volcano-input-small.volcano-input-line-dynamic .form-switcher input[type="checkbox"]:active + .form-switcher-point::before,
.volcano-input-small.volcano-input-outline-fixed-top-inline .form-switcher input[type="checkbox"]:active + .form-switcher-point::before,
.volcano-input-small.volcano-input-solid-dynamic .form-switcher input[type="checkbox"]:active + .form-switcher-point::before {
    width: calc((var(--paddingYInputSmall) * 3) + (var(--fontSizeInput)));
}

/*BIG*/

.volcano-input-big.volcano-input-solid-fixed-top .form-switcher,
.volcano-input-big.volcano-input-outline-dynamic .form-switcher,
.volcano-input-big.volcano-input-outline-fixed-top-inside .form-switcher,
.volcano-input-big.volcano-input-line-dynamic .form-switcher,
.volcano-input-big.volcano-input-outline-fixed-top-inline .form-switcher,
.volcano-input-big.volcano-input-solid-dynamic .form-switcher {
    height: calc((var(--paddingYInputBig) * 2) + (var(--fontSizeInput) * 1.5) - calc(var(--fontSizeLabel) / 100 * 75 * 1.15));
}

.volcano-input-big.volcano-input-solid-fixed-top .form-switcher .form-switcher-point::before,
.volcano-input-big.volcano-input-outline-dynamic .form-switcher .form-switcher-point::before,
.volcano-input-big.volcano-input-line-dynamic .form-switcher .form-switcher-point::before,
.volcano-input-big.volcano-input-outline-fixed-top-inside .form-switcher .form-switcher-point::before,
.volcano-input-big.volcano-input-outline-fixed-top-inline .form-switcher .form-switcher-point::before,
.volcano-input-big.volcano-input-solid-dynamic .form-switcher .form-switcher-point::before {
    width: calc((var(--paddingYInputBig) * 2) + (var(--fontSizeInput)) - calc(var(--fontSizeLabel) / 100 * 75));
    height: calc((var(--paddingYInputBig) * 2) + (var(--fontSizeInput)) - calc(var(--fontSizeLabel) / 100 * 75));
}

.volcano-input-big.volcano-input-solid-fixed-top .form-switcher input[type="checkbox"]:checked + .form-switcher-point::before,
.volcano-input-big.volcano-input-outline-dynamic .form-switcher input[type="checkbox"]:checked + .form-switcher-point::before,
.volcano-input-big.volcano-input-outline-fixed-top-inside .form-switcher input[type="checkbox"]:checked + .form-switcher-point::before,
.volcano-input-big.volcano-input-line-dynamic .form-switcher input[type="checkbox"]:checked + .form-switcher-point::before,
.volcano-input-big.volcano-input-outline-fixed-top-inline .form-switcher input[type="checkbox"]:checked + .form-switcher-point::before,
.volcano-input-big.volcano-input-solid-dynamic .form-switcher input[type="checkbox"]:checked + .form-switcher-point::before {
    left: calc(100% - ((var(--paddingYInputBig) * 2) + (var(--fontSizeInput)) - calc(var(--fontSizeLabel) / 100 * 75)) - 3px);
}

.volcano-input-big.volcano-input-solid-fixed-top .form-switcher input[type="checkbox"]:active + .form-switcher-point::before,
.volcano-input-big.volcano-input-outline-dynamic .form-switcher input[type="checkbox"]:active + .form-switcher-point::before,
.volcano-input-big.volcano-input-outline-fixed-top-inside .form-switcher input[type="checkbox"]:active + .form-switcher-point::before,
.volcano-input-big.volcano-input-line-dynamic .form-switcher input[type="checkbox"]:active + .form-switcher-point::before,
.volcano-input-big.volcano-input-outline-fixed-top-inline .form-switcher input[type="checkbox"]:active + .form-switcher-point::before,
.volcano-input-big.volcano-input-solid-dynamic .form-switcher input[type="checkbox"]:active + .form-switcher-point::before {
    width: calc((var(--paddingYInputBig) * 3) + (var(--fontSizeInput)));
}