/// Global namespace for typehead component
/// @access public
/// @group typehead
/// @type string
$DBtypeahead-namespace: "c-typeahead" !default;

/// Background for card component
/// @access public
/// @group typehead
/// @type color
$DBtypeahead-background: color(white) !default;

.#{$DBinput-namespace}--typeahead {
    &.is-active {
        border-bottom: 0;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }
}

// Typeahead component
.#{$DBtypeahead-namespace} {
    display: none;
    overflow: scroll;
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    max-height: 180px;
    margin-top: -1px;

    line-height: 1.5;

    border: 1px solid color(gray, x-dark, 0.1);
    border-radius: 0 0 4px 4px;
    box-shadow: 0 1px 2px color(gray, x-dark, 0.1);
    background-color: $DBtypeahead-background;

    background-clip: padding-box;

    &.is-open {
        display: block;
    }

    &__result {
        margin-top: -1px;

        cursor: pointer;

        &.is-selected {
            z-index: 2;
            margin-bottom: -2px;

            color: color(blue);
            border-bottom: 1px solid;
            border-color: color(gray, x-dark, 0.1);
            background-color: color(blue, x-light);

            .f-meta {
                color: inherit;
            }
        }

        &.is-invalid {
            cursor: default;
        }
    }

    &__media, &__content {
        display: inline-block;
        vertical-align: middle;
    }

    &__media {
        margin-right: half($DBbaseline);
    }
}
