$ROOT = ".emulator"
$INACTIVE-ROOT = ".emulator-ignore"
//$ROOT = "[data-query-type='element']"
// $ROOT = "*[data-query-type='element']"
// $INACTIVE-ROOT = "*[data-query-type='media']"
$grid-breakpoints-prefix = {
    xs: view-xs,
    sm: view-sm,
    md: view-md,
    lg: view-lg,
    xl: view-xl
}
$invalid-breakpoints = xs-and-down, xs-and-up, xl-and-up, xl-and-down
$breakpoint-hierarchy = xs sm md lg xl
$regex--only = '.*-only$'
$regex--and-up = '.*-and-up$'
$regex--and-down = '.*-and-down$'

getClass($key)
    $grid-breakpoints-prefix[$key]

Fallback()
    {$INACTIVE-ROOT} &
        {block}

Override($target-size)
    if (length(split('', $target-size)) == 2)
        {$ROOT + '.' + getClass($target-size)} &
            {block}
    else
        if index($invalid-breakpoints, $target-size) != null
            ''
        else
            $key = substr($target-size, 0, 2)
            $key-index = index($breakpoint-hierarchy, $key)

            if (match($regex--only, $target-size))
                $output = $ROOT

                for num in $key-index .. (length($breakpoint-hierarchy) - 1)
                    $thisKey = $breakpoint-hierarchy[num]
                    $val = '.' + getClass($thisKey)

                    if (num == $key-index)
                        $output += $val
                    else
                        $output += ':not(' + $val + ')'

                {$output} &
                    {block}
            else
                $is-up = false

                if (match($regex--and-up, $target-size))
                    $is-up = true
                else if (match($regex--and-down, $target-size))
                    $is-up = false

                $output = $ROOT

                if (!$is-up)
                    $output += '.' + getClass(xs)
                    for num in $key-index + 1 .. length($breakpoint-hierarchy) - 1
                        $thisKey = $breakpoint-hierarchy[num]
                        $val = getClass($thisKey)
                        if num <= $key-index
                            $output += '.' + $val
                        else
                            $output += ':not(.' + $val + ')'
                    {$output} &
                        {block}
                else
                    /* 
                    for num in $key-index .. length($breakpoint-hierarchy) - 1
                        $thisKey = $breakpoint-hierarchy[num]
                        $val = getClass($thisKey)
                        $output += '.' + $val
                    */
                    $output += '.' + getClass($key)
                    {$output} &
                        {block}

            

//TEST CASE
// .xs
//     +Override(xs)
//         width: 10px
// .sm
//     +Override(sm)
//         width: 10px
// .md
//     +Override(md)
//         width: 10px
// .lg
//     +Override(lg)
//         width: 10px
// .xl
//     +Override(xl)
//         width: 10px
// .xs-only
//     +Override(xs-only)
//         width: 10px
// .sm-only
//     +Override(sm-only)
//         width: 10px
// .md-only
//     +Override(md-only)
//         width: 10px
// .lg-only
//     +Override(lg-only)
//         width: 10px
// .xl-only
//     +Override(xl-only)
//         width: 10px
// .sm-and-up
//     +Override(sm-and-up)
//         width: 10px
// .md-and-up
//     +Override(md-and-up)
//         width: 10px
// .lg-and-up
//     +Override(lg-and-up)
//         width: 10px
.sm-and-down
    +Override(sm-and-down)
        width: 10px
.md-and-down
    +Override(md-and-down)
        width: 10px
.lg-and-down
    +Override(lg-and-down)
        width: 10px