SCSS partial for styling awesomplete.js autocomplete plugin

_awesomplete.scss

$aw_list_bg_color: $white;
$aw_list_border: none;
$aw_list_shadow: .05em .2em .6em rgba(0,0,0,.2);
$aw_list_radius: 0px;
$aw_list_color: $darkGray;
$aw_selected_item_bg: $blue;
$aw_selected_item_color: $white;
$aw_mark_bg: $lightBlue;
$aw_mark_color: $white;
$aw_selected_mark_bg: rgba($white, 0.15);
$aw_selected_mark_color: $white;

.awesomplete{
    display: inline-block;
    position: relative;
    vertical-align: bottom;

    [hidden] { display: none; }

    .visually-hidden {
        position: absolute;
        clip: rect(0, 0, 0, 0);
    }

    & > input {
        display: block;
    }

    & > ul {
        position: absolute;
        left: 0;
        z-index: 1;
        min-width: 100%;
        box-sizing: border-box;
        list-style: none;
        padding: 0;
        border-radius: $aw_list_radius;
        margin: .2em 0 0;
        background: $aw_list_bg_color;
        border: $aw_list_border;
        box-shadow: $aw_list_shadow;
        text-shadow: none;
        transform: translateY(3em);
        width: 21em;

        &[hidden],&:empty {
            display: none;
        }

        /* Pointer */
        &:before {
            content: "";
            position: absolute;
            top: -0.43em;
            left: 1em;
            width: 0; height: 0;
            padding: 0.4em;
            background: $white;
            border: inherit;
            border-right: 0;
            border-bottom: 0;
            @include transform(rotate(45deg));
        }
        & > li {
            position: relative;
            padding: .2em .5em;
            cursor: pointer;
            color: $aw_list_color;
            &:hover,&[aria-selected="true"]{
                background: $aw_selected_item_bg;
                color: $aw_selected_item_color;
            }
        }
    }

    mark {
        background: $aw_mark_bg;
        color: $aw_mark_color;
    }
    
    li{
        &:hover mark {
            background: $aw_selected_mark_bg;
            color: $aw_selected_mark_color;
        }
        &[aria-selected="true"] mark {
            background: $aw_selected_mark_bg;
            color: $aw_selected_mark_color;
        }
    }
}

@supports (transform: scale(0)) {
    .awesomplete{
        & > ul {
            transition: .3s cubic-bezier(.4,.2,.5,1.4);
            transform-origin: 1.43em -.43em;

            &[hidden],&:empty {
                opacity: 0;
                transform: scale(0);
                display: block;
                transition-timing-function: ease;
            }
        }
    }   
}