/* Base Switch */
    .aonline-switch {
        position: relative;
        display: inline-block;
        width: 32px;  /* default medium-ish size */
        height: 18px;
        vertical-align: middle;
    }

    .aonline-switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

    .aonline-slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #c5c5c5;
        transition: 0.25s;
        border-radius: 18px;
        box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);
    }

    .aonline-slider::before {
        position: absolute;
        content: "";
        height: 12px;
        width: 12px;
        left: 3px;
        bottom: 3px;
        background-color: #fff;
        border-radius: 50%;
        transition: 0.25s;
        box-shadow: 0 1px 2px rgba(0,0,0,0.3);
    }

    /* Checked State */
    .aonline-switch input:checked + .aonline-slider {
        background-color: #2a70b9; /* default primary */
    }

    .aonline-switch input:checked + .aonline-slider::before {
        transform: translateX(14px);
    }

    /* Disabled */
    .aonline-switch input:disabled + .aonline-slider {
        opacity: 0.5;
        cursor: not-allowed;
    }

    /* === Size Variants === */
    .aonline-switch-sm {
        width: 26px;
        height: 14px;
    }
    .aonline-switch-sm .aonline-slider::before {
        height: 9px;
        width: 9px;
        left: 2.5px;
        bottom: 2.5px;
    }
    .aonline-switch-sm input:checked + .aonline-slider::before {
        transform: translateX(11px);
    }

    .aonline-switch-md {
        width: 36px;
        height: 20px;
    }
    .aonline-switch-md .aonline-slider::before {
        height: 14px;
        width: 14px;
        left: 3px;
        bottom: 3px;
    }
    .aonline-switch-md input:checked + .aonline-slider::before {
        transform: translateX(16px);
    }

    .aonline-switch-lg {
        width: 44px;
        height: 24px;
    }
    .aonline-switch-lg .aonline-slider::before {
        height: 18px;
        width: 18px;
        left: 3px;
        bottom: 3px;
    }
    .aonline-switch-lg input:checked + .aonline-slider::before {
        transform: translateX(20px);
    }

    /* === Color Variants === */
    .aonline-switch-primary input:checked + .aonline-slider {
        background-color: #2a70b9;
    }
    .aonline-switch-success input:checked + .aonline-slider {
        background-color: #28a745;
    }
    .aonline-switch-danger input:checked + .aonline-slider {
        background-color: #dc3545;
    }
    .aonline-switch-warning input:checked + .aonline-slider {
        background-color: #ffc107;
    }