/* Toggle */
.tss-toggle-container {
    position: relative;
    cursor: pointer;
    color: var(--tss-default-foreground-color);
    font-size: var(--tss-font-size-small);
    font-weight: var(--tss-font-weight-semibold);
    -webkit-user-select: none;
    user-select: none;
    padding-left: 45px;
    display: inline-block;
}

    .tss-toggle-container .tss-toggle-text {
        font-weight: var(--tss-font-weight-regular);
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        min-height: 21px;
    }

    .tss-toggle-container .tss-checkbox {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }

    .tss-toggle-container .tss-toggle-mark {
        position: absolute;
        top: 0;
        left: 0;
        display: inline-block;
        height: 20px;
        width: 40px;
        background-color: var(--tss-default-background-color);
        border: 1px solid var(--tss-default-foreground-color);
        border-radius: 14px;
        box-sizing: content-box;
    }

    .tss-toggle-container:hover .tss-toggle-mark {
        background-color: var(--tss-default-background-hover-color);
        border-color: var(--tss-default-foreground-hover-color);
    }

        .tss-toggle-container:hover .tss-toggle-mark:after {
            background-color: var(--tss-default-foreground-hover-color);
        }

    .tss-toggle-container input:checked ~ .tss-toggle-mark {
        background-color: var(--tss-primary-background-color);
        border-color: var(--tss-primary-background-color);
    }

    .tss-toggle-container:hover input:checked ~ .tss-toggle-mark {
        background-color: var(--tss-primary-background-hover-color);
    }

    .tss-toggle-container input:checked ~ .tss-toggle-mark:after {
        background-color: var(--tss-primary-foreground-color);
        left: unset;
        transform: translate(25px, 0);
    }

    .tss-toggle-container .tss-toggle-mark:after {
        content: "";
        position: absolute;
        display: inline-block;
        top: 4px;
        left: 4px;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background-color: var(--tss-default-foreground-color);
        transition: transform ease-in-out 0.25s;
    }

    .tss-toggle-container.tss-disabled {
        color: var(--tss-disabled-foreground-color);
    }

        .tss-toggle-container.tss-disabled .tss-toggle-mark {
            background-color: var(--tss-disabled-background-color);
            border-color: var(--tss-disabled-foreground-color);
        }

        .tss-toggle-container.tss-disabled input:checked ~ .tss-toggle-mark {
            background-color: var(--tss-disabled-foreground-color);
            border-color: var(--tss-disabled-foreground-color);
        }
