.chaty-switch {
    display: inline-flex;
    position: relative;
    align-items: center;
    column-gap: 8px;

    input {
        display: none !important;

        &:checked + .chaty-slider {
            background-color: #b78deb;

            &::before {
                transform: translateX(16px);
            }

            &::after {
                padding: 0 0 0 8px;
                content: "";
            } 
        }    
    }    
}

.chaty-slider {
    background-color: #eaeff2;
    bottom: 0;
    cursor: pointer;
    left: 0;
    position: relative;
    right: 0;
    top: 0;
    transition: 0.4s;
    width: 40px;
    height: 24px;

    &.round {
        border-radius: 34px;
        display: inline-flex;

        &::before {
            border-radius: 50%;
        }
    }

    &::before {
        background-color: #fff;
        bottom: 4px;
        content: "";
        height: 16px;
        left: 4px;
        position: absolute;
        transition: 0.2s;
        width: 16px;
        box-shadow: 0 6px 6px rgba(0, 0, 0, .16), 0 0 1px rgba(0, 0, 0, .40);
    }

    &::after {
        content: "";
        color: #fff;
        display: inline-block;
        padding: 0 0 0 25px;
        font-size: 14px;
        line-height: 24px;
        position: absolute;
        left: 0;
        top: 0;
    }
}