// INPUTS
.o_switch {
    display: flex;
    align-items: center;
    font-weight: normal;
    cursor: pointer;

    >input {
        display: none;

        +span {
            background-color: $o-we-switch-inactive-color;
            box-shadow: inset 0 0 0px 1px darken($o-we-switch-inactive-color, 10%);
            border-radius: 100rem;
            height: $o-we-switch-size;
            width: $o-we-switch-size * 1.8;
            margin-right: 0.5em;
            display: inline-block;
            transition: all 0.3s $o-we-md-ease;

            &:after {
                content: "";
                background: $o-we-color-paper;
                display: block;
                width: $o-we-switch-size - 0.2;
                height: $o-we-switch-size - 0.2;
                margin-top: 0.1ex;
                margin-left: 0.1ex;
                border-radius: 100rem;
                transition: all 0.3s $o-we-md-ease;
                box-shadow: 0 1px 1px darken($o-we-switch-inactive-color, 35%), inset 0 0 0 1px lighten($o-we-switch-inactive-color, 10%);
            }
        }

        &:checked+span {
            box-shadow: none;
            background: $o-we-color-success;

            &:after {
                margin-left: ($o-we-switch-size*1.8 - $o-we-switch-size) + 0.1;
            }
        }
    }

    &.o_switch_danger {
        >input {
            &:not(:checked)+span {
                box-shadow: none;
                background: $o-we-color-danger;
            }
        }
    }
}