#tsd-search
    transition: background-color 0.2s

    .title
        position: relative
        z-index: 2

    .field
        position: absolute
        left: 0
        top: 0
        right: 40px
        height: 40px

        input
            box-sizing: border-box
            position: relative
            top: -50px
            z-index: 1
            width: 100%
            padding: 0 10px
            opacity: 0
            outline: 0
            border: 0
            background: transparent
            color: $COLOR_TEXT

        label
            position: absolute
            overflow: hidden
            right: -40px

    .field input,
    .title
        transition: opacity 0.2s

    .results
        position: absolute
        visibility: hidden
        top: 40px
        width: 100%
        margin: 0
        padding: 0
        list-style: none
        box-shadow: 0 0 4px rgba(#000, 0.25)
        z-index: 1

        li
            padding: 0 10px
            background-color: $COLOR_BACKGROUND

        li:nth-child(even)
            background-color: $COLOR_PANEL

        li.state
            display: none

        li.current,
        li:hover
            background-color: $COLOR_PANEL_DIVIDER

        a
            display: block

            &:before
                top: 10px

        span.parent
            color: $COLOR_TEXT_ASIDE
            font-weight: normal

    &.has-focus
        background-color: $COLOR_PANEL_DIVIDER

        .field input
            top: 0
            opacity: 1

        .title
            z-index: 0
            opacity: 0

        .results
            visibility: visible

    &.loading .results li.state.loading
        display: block

    &.failure .results li.state.failure
        display: block