:root {
    --vat-switch-width: 80px;
    --vat-switch-height: 34px;
    --vat-switch-border-radius: 24px;
    --vat-switch-border-width: 1px;
    --vat-switch-border-color: #e8e8e8;
    --vat-switch-active-color: black;
    --vat-switch-non-active-color: white;
    --vat-switch-text-color: black;
    --vat-switch-active-text-color: white;
    --vat-switch-circle-color: white;
    --vat-switch-circle-border-color: #d9d9d9;
    --vat-switch-circle-shadow: 0px 3px 10px rgba(0, 0, 0, 0.15);
    --vat-switch-font-size: 10px;
    --vat-switch-font-family: Verdana, sans-serif;
    --vat-switch-transition: 0.4s;
    --vat-switch-circle-size: 26px;
    --vat-switch-circle-translate: 45px;
}

.vat-toggle-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0;
    gap: 10px;
}
.switch {
    position: relative;
    display: inline-block;
    width: var(--vat-switch-width);
    height: var(--vat-switch-height);
}

.switch input {
    display: none;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--vat-switch-non-active-color);
    border-radius: var(--vat-switch-border-radius);
    border: var(--vat-switch-border-width) solid var(--vat-switch-border-color);
    transition: var(--vat-switch-transition);
}

.slider:before {
    position: absolute;
    content: "";
    height: var(--vat-switch-circle-size);
    width: var(--vat-switch-circle-size);
    left: 4px;
    bottom: 4px;
    background-color: var(--vat-switch-circle-color);
    transition: var(--vat-switch-transition);
    border-radius: 50%;
    border: var(--vat-switch-border-width) solid var(--vat-switch-circle-border-color);
    filter: drop-shadow(var(--vat-switch-circle-shadow));
}

input:checked + .slider {
    background-color: var(--vat-switch-active-color);
}

input:checked + .slider:before {
    transform: translateX(var(--vat-switch-circle-translate));
}

.on,
.off {
    color: var(--vat-switch-active-text-color);
    position: absolute;
    transform: translateY(-50%);
    top: 50%;
    font-size: var(--vat-switch-font-size);
    font-family: var(--vat-switch-font-family);
    display: none;
}

.off {
    color: var(--vat-switch-text-color);
    right: 10px;
}

.on {
    left: 10px;
}

input:checked + .slider .on {
    display: block;
}

input:checked + .slider .off {
    display: none;
}

input:not(:checked) + .slider .off {
    display: block;
}

input:not(:checked) + .slider .on {
    display: none;
}