/* Hide default checkbox */
input[type=checkbox]{
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.button>.switcher{
    display: flex;
    position: relative;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    justify-content: center;
    align-items: center;
    padding: calc(var(--ButtonPadding) / 1.2);
    width: var(--ButtonIconSize);
    height: var(--ButtonIconSize);
}

.button--silent>.switcher{
    padding: calc(var(--ButtonPadding) / 1.4);
}

.button>.switcher::before {
    content: "";
    width: 1.2em;
    height: calc(var(--strokeWidth) * 1.5);
    border-radius: 1em;
    background: rgb(var(--colUIText03));
    margin: 0.4em;
    flex-shrink: 0;
}

/* switch dot */
.button>.switcher::after {
    content: "";
    position: absolute;
    --centerPos: calc(50% - 0.4em);
    top: var(--centerPos);
    left: calc(var(--centerPos) - 0.5em);
    border-radius: 50%;
    transition: left 0.2s;
    width: 0.8em;
    height: 0.8em;
    border: calc(var(--strokeWidth) * 3) solid rgb(var(--colUIText03));
    background-color: rgb(var(--colUIBack03));
    box-sizing: border-box;
}

/* switch dot active */
.button>input[type=checkbox]:checked+.switcher::after {
    background-color: rgb(var(--colUIText03));
    left: calc(var(--centerPos) + 0.5em);
}

/* switch line hover optional*/
.button:hover>.switcher::before  {
    background-color: rgb(var(--colUIBack01));
}

/* switch dot hover optional*/
.button:hover>input[type=checkbox]+.switcher::after  {
    border-color: rgb(var(--colUIBack01));
    background-color: rgb(var(--colUIText04));
}

.button__note {
    margin: -0.5em 0px 1em 0px;
    position: relative;
}