// FORM RESETS ----------------- https://github.com/necolas/normalize.css/ ---------------------------------------------

.typeahead__container {

    button,
    input,
    optgroup,
    select,
    textarea {
        font: inherit; /* 1 */
        margin: 0; /* 2 */
    }

    /**
     * Restore the font weight unset by the previous rule.
     */

    optgroup {
        font-weight: bold;
    }

    /**
     * Show the overflow in IE.
     * 1. Show the overflow in Edge.
     */

    button,
    input { /* 1 */
        overflow: visible;
    }

    /**
     * Remove the inheritance of text transform in Edge, Firefox, and IE.
     * 1. Remove the inheritance of text transform in Firefox.
     */

    button,
    select { /* 1 */
        text-transform: none;
    }

    /**
     * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
     *    controls in Android 4.
     * 2. Correct the inability to style clickable types in iOS and Safari.
     */

    button,
    html [type="button"], /* 1 */
    [type="reset"],
    [type="submit"] {
        -webkit-appearance: button; /* 2 */
    }

    /**
     * Remove the inner border and padding in Firefox.
     */

    button::-moz-focus-inner,
    [type="button"]::-moz-focus-inner,
    [type="reset"]::-moz-focus-inner,
    [type="submit"]::-moz-focus-inner {
        border-style: none;
        padding: 0;
    }

    /**
     * Restore the focus styles unset by the previous rule.
     */

    button:-moz-focusring,
    [type="button"]:-moz-focusring,
    [type="reset"]:-moz-focusring,
    [type="submit"]:-moz-focusring {
        outline: 1px dotted ButtonText;
    }

    /**
     * Change the border, margin, and padding in all browsers (opinionated).
     */

    fieldset {
        border: 1px solid #c0c0c0;
        margin: 0 2px;
        padding: 0.35em 0.625em 0.75em;
    }

    /**
     * 1. Correct the text wrapping in Edge and IE.
     * 2. Correct the color inheritance from `fieldset` elements in IE.
     * 3. Remove the padding so developers are not caught out when they zero out
     *    `fieldset` elements in all browsers.
     */

    legend {
        box-sizing: border-box; /* 1 */
        color: inherit; /* 2 */
        display: table; /* 1 */
        max-width: 100%; /* 1 */
        padding: 0; /* 3 */
        white-space: normal; /* 1 */
    }

    /**
     * Remove the default vertical scrollbar in IE.
     */

    textarea {
        overflow: auto;
    }

    /**
     * 1. Add the correct box sizing in IE 10-.
     * 2. Remove the padding in IE 10-.
     */

    [type="checkbox"],
    [type="radio"] {
        box-sizing: border-box; /* 1 */
        padding: 0; /* 2 */
    }

    /**
     * Correct the cursor style of increment and decrement buttons in Chrome.
     */

    [type="number"]::-webkit-inner-spin-button,
    [type="number"]::-webkit-outer-spin-button {
        height: auto;
    }

    /**
     * 1. Correct the odd appearance in Chrome and Safari.
     * 2. Correct the outline style in Safari.
     */

    [type="search"] {
        -webkit-appearance: textfield; /* 1 */
        outline-offset: -2px; /* 2 */
    }

    /**
     * Remove the inner padding and cancel buttons in Chrome and Safari on OS X.
     */

    [type="search"]::-webkit-search-cancel-button,
    [type="search"]::-webkit-search-decoration {
        -webkit-appearance: none;
    }

    /**
     * Correct the text style of placeholders in Chrome, Edge, and Safari.
     */

    ::-webkit-input-placeholder {
        color: inherit;
        opacity: 0.54;
    }

    /**
     * 1. Correct the inability to style clickable types in iOS and Safari.
     * 2. Change font properties to `inherit` in Safari.
     */

    ::-webkit-file-upload-button {
        -webkit-appearance: button; /* 1 */
        font: inherit; /* 2 */
    }
}

// VARIABLES -----------------------------------------------------------------------------------------------------------

$typeahead-font-size: 14px !default;
$typeahead-font-family: Lato, 'Helvetica Neue', Arial, Helvetica, sans-serif !default;
$typeahead-primary-color: #66afe9 !default;
$typeahead-radius: 2px !default;
$typeahead-shadow: false !default; // true / false
$typeahead-dropdown-spacing: 5px !default;
$typeahead-outline-color: $typeahead-primary-color !default;
$typeahead-loading-size: 21px !default;

$typeahead-height: 32px !default;
$typeahead-padding: 6px 12px !default;

$typeahead-color: #555 !default;
$typeahead-border-color: #ccc !default;

$typeahead-group-color: darken($typeahead-primary-color, 30%) !default;
$typeahead-group-background: lighten($typeahead-primary-color, 30%) !default;
$typeahead-group-border-color: lighten($typeahead-primary-color, 20%) !default;

$typeahead-item-background: #fff !default;
$typeahead-item-hover-background: #f5f5f5 !default;

// TYPEAHEAD -----------------------------------------------------------------------------------------------------------

.typeahead__ {
    &container {
        position: relative;
        font: $typeahead-font-size $typeahead-font-family;
    }

    &container * {
        box-sizing: border-box;
        outline: 0;
    }

    &query {
        position: relative;
        z-index: 2;
        width: 100%;
    }

    &filter {
        position: relative;
        button {
            min-width: 100%;
            white-space: nowrap;
            &:after {
                display: inline-block;
                margin-left: 4px;
                width: 0;
                height: 0;
                vertical-align: -2px;
                content: "";
                border: 4px solid;
                border-right-color: transparent;
                border-bottom-color: transparent;
                border-left-color: transparent;
            }
        }
    }

    &field {
        font-size: 0;
        position: relative;
        display: table;
        border-collapse: separate;
        width: 100%;
        > * {
            display: table-cell;
            vertical-align: top;
        }
    }

    &query,
    &filter,
    &button {
        font-size: $typeahead-font-size;
    }

    &button {
        position: relative;
        font-size: 0;
        width: 1%;
        vertical-align: middle;
    }

    &button button {
        border-top-right-radius: $typeahead-radius;
        border-bottom-right-radius: $typeahead-radius;
    }

    &field {
        // #193 If applied to input, it overrides the placeholder color on IE10/11
        color: $typeahead-color;
        input {
            display: block;
            width: 100%;
            height: $typeahead-height;
            padding: $typeahead-padding;
            background: #fff;
            border: 1px solid $typeahead-border-color;
            border-radius: $typeahead-radius 0 0 $typeahead-radius;
            transition: all ease-in-out .15s;
            appearance: none;
            box-sizing: border-box; // Bootstrap 4 override
            @if ($typeahead-shadow) {
                box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
            }

            &:focus,
            &:active {
                border-color: $typeahead-outline-color;
            }
        }
    }

    &field input[type="search"],
    &field input[type="search"]::-webkit-search-cancel-button {
        // #174 Add standard `cancel button` option instead of browser's implementation
        appearance: none;
    }
    // IE10+
    &field input[type="search"]::-ms-clear {
        display: none;
        width: 0;
        height: 0;
    }

    &container.hint .typeahead__field input {
        background: transparent;
    }

    &container.hint .typeahead__field input:last-child,
    &hint {
        background: #fff;
    }

    &container button {
        display: inline-block;
        margin-bottom: 0;
        text-align: center;
        vertical-align: middle;
        touch-action: manipulation;
        cursor: pointer;
        background-color: #fff;
        border: 1px solid $typeahead-border-color;
        height: $typeahead-height;
        padding: $typeahead-padding;
        user-select: none;
        color: $typeahead-color;
        @if ($typeahead-shadow) {
            box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.05);
        }

        &:hover,
        &:focus {
            color: darken($typeahead-color, 10%);
            background-color: $typeahead-item-hover-background;
            border-color: darken($typeahead-border-color, 10%);
        }

        &:active,
        &.active {
            background-image: none;
            @if ($typeahead-shadow) {
                box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
            }
        }

        &:focus,
        &:active {
            border-color: $typeahead-outline-color;
        }
    }

    &container {
        input.disabled,
        input[disabled],
        button.disabled,
        button[disabled] {
            cursor: not-allowed;
            pointer-events: none;
            opacity: 0.65;
            box-shadow: none;
            background-color: #fff;
            border-color: $typeahead-border-color;
        }
    }

    &filter,
    &button {
        z-index: 1;
        button {
            margin-left: -1px;
            border-bottom-left-radius: 0;
            border-top-left-radius: 0;
        }

        &:hover,
        &:active,
        &:focus {
            z-index: 1001;
            button {
                &:focus,
                &:active {
                    z-index: 1001;
                }
            }
        }
    }

    &filter + &button {
        button {
            margin-left: -2px;
        }
    }

    &container.filter .typeahead__filter {
        z-index: 1001;
    }

    &list,
    &dropdown {
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 1000;
        width: 100%;
        min-width: 160px;
        padding: $typeahead-dropdown-spacing 0;
        margin: 2px 0 0;
        list-style: none;
        text-align: left;
        background-color: #fff;
        border: 1px solid $typeahead-border-color;
        border-radius: $typeahead-radius;
        background-clip: padding-box;
        @if ($typeahead-shadow) {
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
        }
    }

    &result.detached .typeahead__list {
        position: relative;
        z-index: 1041;
        top: initial;
        left: initial;
    }

    &dropdown {
        right: 0;
        left: initial;
        z-index: 1001;
    }

    &list > li {
        position: relative;
        border-top: solid 1px $typeahead-border-color;
        &:first-child {
            border-top: none;
        }
    }

    &list > li,
    &dropdown > li {
        > a {
            display: block;
            padding: $typeahead-padding;
            clear: both;
            color: #333333;
            text-decoration: none;
        }

        > a:hover,
        > a:focus,
        &.active > a {
            background-color: $typeahead-item-hover-background;
            color: darken($typeahead-color, 10%);
        }
    }

    &list.empty {
        > li > a {
            cursor: default;
        }
        > li > a:hover,
        > li > a:focus,
        > li.active > a {
            background-color: transparent;
        }
    }

    &list > li.typeahead__group {
        border-color: $typeahead-group-border-color;
        font-weight: bold;

        &:first-child {
            @if ($typeahead-dropdown-spacing > 0) {
                border-top: solid 1px $typeahead-group-border-color;
            }
        }
        > a,
        > a:hover,
        > a:focus,
        &.active > a {
            cursor: default;
            color: $typeahead-group-color;
            background: $typeahead-group-background;
        }
    }

    &list > {
        li.typeahead__group + li.typeahead__item {
            border-color: $typeahead-group-border-color;
        }
    }

    &container {
        &.result .typeahead__list,
        &.filter .typeahead__dropdown,
        &.hint .typeahead__hint,
        &.backdrop + .typeahead__backdrop {
            display: block !important;
        }
        .typeahead__list,
        .typeahead__dropdown,
        .typeahead__hint,
        + .typeahead__backdrop {
            display: none !important;
        }
    }

    &dropdown li:last-child {
        margin-top: $typeahead-dropdown-spacing;
        padding-top: $typeahead-dropdown-spacing;
        border-top: solid 1px $typeahead-border-color;
    }

    &cancel-button {
        visibility: hidden;
        user-select: none;
        border-radius: 50%;
        width: 16px;
        height: 16px;
        position: absolute;
        top: 8px;
        right: .8em;
        cursor: pointer;
        // Reference: http://www.flaticon.com/free-icon/cross-mark-on-a-black-circle-background_25364
        background: url(data:image/svg+xml;charset=utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCIgdmlld0JveD0iMCAwIDQzOC41MzMgNDM4LjUzMyIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDM4LjUzMyA0MzguNTMzOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPHBhdGggZD0iTTQwOS4xMzMsMTA5LjIwM2MtMTkuNjA4LTMzLjU5Mi00Ni4yMDUtNjAuMTg5LTc5Ljc5OC03OS43OTZDMjk1LjczNiw5LjgwMSwyNTkuMDU4LDAsMjE5LjI3MywwICAgYy0zOS43ODEsMC03Ni40Nyw5LjgwMS0xMTAuMDYzLDI5LjQwN2MtMzMuNTk1LDE5LjYwNC02MC4xOTIsNDYuMjAxLTc5LjgsNzkuNzk2QzkuODAxLDE0Mi44LDAsMTc5LjQ4OSwwLDIxOS4yNjcgICBjMCwzOS43OCw5LjgwNCw3Ni40NjMsMjkuNDA3LDExMC4wNjJjMTkuNjA3LDMzLjU5Miw0Ni4yMDQsNjAuMTg5LDc5Ljc5OSw3OS43OThjMzMuNTk3LDE5LjYwNSw3MC4yODMsMjkuNDA3LDExMC4wNjMsMjkuNDA3ICAgczc2LjQ3LTkuODAyLDExMC4wNjUtMjkuNDA3YzMzLjU5My0xOS42MDIsNjAuMTg5LTQ2LjIwNiw3OS43OTUtNzkuNzk4YzE5LjYwMy0zMy41OTYsMjkuNDAzLTcwLjI4NCwyOS40MDMtMTEwLjA2MiAgIEM0MzguNTMzLDE3OS40ODUsNDI4LjczMiwxNDIuNzk1LDQwOS4xMzMsMTA5LjIwM3ogTTMyMi42MjEsMjcwLjkzOWMzLjYxNywzLjYxMyw1LjQyOCw3LjkwNSw1LjQyOCwxMi44NTQgICBjMCw1LjEzMy0xLjgxMSw5LjUxNC01LjQyOCwxMy4xMjdsLTI1LjY5MywyNS43MDFjLTMuNjE0LDMuNjEzLTcuOTk0LDUuNDItMTMuMTM1LDUuNDJjLTQuOTQ4LDAtOS4yMzYtMS44MDctMTIuODQ3LTUuNDIgICBsLTUxLjY3Ni01MS42ODJsLTUxLjY3OCw1MS42ODJjLTMuNjE2LDMuNjEzLTcuODk4LDUuNDItMTIuODQ3LDUuNDJjLTUuMTQsMC05LjUxNy0xLjgwNy0xMy4xMzQtNS40MmwtMjUuNjk3LTI1LjcwMSAgIGMtMy42MTYtMy42MTMtNS40MjQtNy45OTQtNS40MjQtMTMuMTI3YzAtNC45NDgsMS44MDktOS4yNCw1LjQyNC0xMi44NTRsNTEuNjc4LTUxLjY3M2wtNTEuNjc4LTUxLjY3OCAgIGMtMy42MTYtMy42MTItNS40MjQtNy44OTgtNS40MjQtMTIuODQ3YzAtNS4xNCwxLjgwOS05LjUxNyw1LjQyNC0xMy4xMzRsMjUuNjk3LTI1LjY5M2MzLjYxNy0zLjYxNiw3Ljk5NC01LjQyNCwxMy4xMzQtNS40MjQgICBjNC45NDksMCw5LjIzMSwxLjgwOSwxMi44NDcsNS40MjRsNTEuNjc4LDUxLjY3NGw1MS42NzYtNTEuNjc0YzMuNjEtMy42MTYsNy44OTgtNS40MjQsMTIuODQ3LTUuNDI0ICAgYzUuMTQxLDAsOS41MjEsMS44MDksMTMuMTM1LDUuNDI0bDI1LjY5MywyNS42OTNjMy42MTcsMy42MTcsNS40MjgsNy45OTQsNS40MjgsMTMuMTM0YzAsNC45NDgtMS44MTEsOS4yMzUtNS40MjgsMTIuODQ3ICAgbC01MS42NzUsNTEuNjc4TDMyMi42MjEsMjcwLjkzOXoiIGZpbGw9IiM1NTU1NTUiLz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K) no-repeat scroll center center transparent;
    }

    &container.cancel:not(.loading) .typeahead__cancel-button {
        visibility: visible;
        opacity: .25;
        &:hover {
            opacity: .4;
        }
    }

    &search-icon {
        padding: 0 1.25rem;
        width: 16px;
        height: 16px;
        display: block;
        // Reference: http://www.flaticon.com/free-icon/musica-searcher_70376
        background: url(data:image/svg+xml;charset=utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTguMS4xLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDI1MC4zMTMgMjUwLjMxMyIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjUwLjMxMyAyNTAuMzEzOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCI+CjxnIGlkPSJTZWFyY2giPgoJPHBhdGggc3R5bGU9ImZpbGwtcnVsZTpldmVub2RkO2NsaXAtcnVsZTpldmVub2RkOyIgZD0iTTI0NC4xODYsMjE0LjYwNGwtNTQuMzc5LTU0LjM3OGMtMC4yODktMC4yODktMC42MjgtMC40OTEtMC45My0wLjc2ICAgYzEwLjctMTYuMjMxLDE2Ljk0NS0zNS42NiwxNi45NDUtNTYuNTU0QzIwNS44MjIsNDYuMDc1LDE1OS43NDcsMCwxMDIuOTExLDBTMCw0Ni4wNzUsMCwxMDIuOTExICAgYzAsNTYuODM1LDQ2LjA3NCwxMDIuOTExLDEwMi45MSwxMDIuOTExYzIwLjg5NSwwLDQwLjMyMy02LjI0NSw1Ni41NTQtMTYuOTQ1YzAuMjY5LDAuMzAxLDAuNDcsMC42NCwwLjc1OSwwLjkyOWw1NC4zOCw1NC4zOCAgIGM4LjE2OSw4LjE2OCwyMS40MTMsOC4xNjgsMjkuNTgzLDBDMjUyLjM1NCwyMzYuMDE3LDI1Mi4zNTQsMjIyLjc3MywyNDQuMTg2LDIxNC42MDR6IE0xMDIuOTExLDE3MC4xNDYgICBjLTM3LjEzNCwwLTY3LjIzNi0zMC4xMDItNjcuMjM2LTY3LjIzNWMwLTM3LjEzNCwzMC4xMDMtNjcuMjM2LDY3LjIzNi02Ny4yMzZjMzcuMTMyLDAsNjcuMjM1LDMwLjEwMyw2Ny4yMzUsNjcuMjM2ICAgQzE3MC4xNDYsMTQwLjA0NCwxNDAuMDQzLDE3MC4xNDYsMTAyLjkxMSwxNzAuMTQ2eiIgZmlsbD0iIzU1NTU1NSIvPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=) no-repeat scroll center center transparent;
    }

    &container.loading .typeahead__query {
        &:before,
        &:after {
            transition: all 0s linear, opacity 0.2s ease;
            position: absolute;
            z-index: 3;
            content: '';
            top: 50%;
            right: .55em;
            margin-top: -($typeahead-loading-size / 2);
            width: $typeahead-loading-size;
            height: $typeahead-loading-size;
            box-sizing: border-box;
            border-radius: 500rem;
            border-style: solid;
            border-width: .1em;
        }

        &:before {
            border-color: rgba(0, 0, 0, 0.35);
        }

        &:after {
            animation: button-spin 0.6s linear;
            animation-iteration-count: infinite;
            border-color: #fff transparent transparent;
            box-shadow: 0 0 0 1px transparent;
        }

        @keyframes button-spin {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(360deg);
            }
        }
    }
}