/*
 Stylesheet for `index.html`.
 */

@import mixins
@import variables

$minSearchFieldsWidth: 490px
$resultWidth: 830px
$sidebarWidth: 30px
$codeWidth: 500px
$hiddenInfoWidth: 250px

.ui-datepicker
    font-size: 70%

.ui-autocomplete
    max-height: 30%
    overflow-x: hidden
    overflow-y: scroll
    padding: 0px

    >li.ui-menu-item a.ui-state-focus
        @include vendor(transition, background-color 0.3s ease-out)

div#search-field
    @extend .t2

    bottom: 0
    height: 50%
    left: 0
    margin: auto
    margin-top: 15%
    max-height: 100px
    right: 0
    position: absolute
    top: 0
    width: 40%

    a#title
        text-decoration: none

        div#title
            font-size: 400%
            padding-bottom: 0.2em
            text-align: center

            #title-bit
                color: $baseColor1

            #title-angle
                color: $baseColor3

            #title-shift
                color: $baseColor2
                font-style: italic

    form#search-bar
        min-width: $minSearchFieldsWidth

        input[type="text"], button
            @extend .t3
            @include vendor(box-sizing, border-box)

            border: 1px solid $baseColor2
            font-size: 110%
            margin-bottom: 0px
            padding: 6px

        input[type="text"]
            width: 85%

            &:hover
                border-color: $baseColor1

        button#advanced-search
            background-color: white
            border: 1px solid white
            width: 15%
            height: 10%
            padding: 0px
            float: right

            &:hover
                img
                    background-color: black
                    cursor: pointer

            &.clicked
                img
                    background-color: $baseColor1

            &:focus
                outline: 0

            img
                @extend .t3

                background-color: $baseColor2
                margin-top: 5px
                width: 26px
                height: 26px

    &.partly-visible
        margin-top: 0%
        padding-bottom: 3%
        position: absolute
        width: 100%

        #title
            position: absolute
            top: -1%
            left: 1%

            span
                font-size: 50%

        form#search-bar
            padding-top: 3%
            margin-left: auto
            margin-right: auto
            width: 60%

div#advanced-search
    background-color: white
    border: 1px solid $baseColor3
    display: none
    font-size: 96%
    height: 400px
    min-width: $minSearchFieldsWidth
    padding-top: 0px
    overflow-x: auto
    overflow-y: hidden

    #heading
        color: $baseColor2
        display: block
        font-size: 120%
        padding-left: 1%
        padding-top: 1%
        width: 100%

        div
            display: inline-block
            font-size: 110%

            &#col1
                width: 25%

            &#col2
                width: 75%

    >div
        @include vendor(box-sizing, border-box)

        display: inline-block
        float: left

    #sidebar
        padding-left: 1%
        width: 25%

        >ul
            list-style: none
            padding-left: 0
            margin-bottom: 8%
            margin-top: 2%

            li
                margin-bottom: 2%

                label
                    user-select: none

                    div
                        @extend .t3

                        background-color: $lightGray
                        border: none
                        padding: 3%
                        width: 85%

                        &:hover, &.selectedInputField
                            @extend .t3

                            background-color: $baseColor2
                            color: white
                            cursor: pointer
                            width: 90%

                input[type="checkbox"]
                    display: none

                    &:checked + label > div
                        @extend .selectedInputField

                        background-color: $baseColor1
                        color: white
                        width: 90%

        button#add-group
            background-color: $lightBlue
            border: none
            color: white
            display: block
            height: 40px
            margin-bottom: 2%
            overflow: hidden
            white-space: nowrap
            width: 40px

            span
                font-size: 150%
                font-weight: bold
                margin-left: 6px
                margin-right: 14px

            &:hover
                @extend .t3

                background-color: $blue
                cursor: pointer
                width: 90%

        button#remove-group
            @extend button#add-group

            background-color: #D82D48

            span
                padding-left: 3px

            &:hover
                @extend .t3

                background-color: #F11437

    #search-groups
        margin-top: 1%
        max-height: 93%
        overflow-y: auto
        width: 75%

        .search-group
            @include vendor(transition, all 0.6s ease-out)

            background-color: $lightGray
            padding: 1%
            margin-bottom: 2%
            width: 97%

            >div
                margin-bottom: 0.7%

                >div.name
                    display: inline-block
                    font-size: 90%
                    width: 20%

                >input[type=text]
                    display: inline-block
                    padding: 2px
                    width: 60%

                >input[type=checkbox]
                    margin-left: 2%

                    &:checked + span
                        @extend .t2

                        color: green
                        font-weight: bold

                    &:hover
                        cursor: checkbox

                span.regex
                    font-size: 80%

            &#selected
                background-color: #CACACA

div#results
    margin: 3% auto 0 auto
    margin-left: auto
    margin-right: auto
    width: 80%

    /* TODO:
        1) Sidebar
            - Add way to cycle through hits in the code.
        2) Hidden info
            - Add links for authors.
            - Remove language field.
        3) Header
            - Add an icon for the website.
            - Add language tag.
        4) Code body
            - Add highlighting.*/
    div.result
        width: $resultWidth
        height: 200px
        margin-top: 2%
        margin-bottom: 6%

        #display-info
            font-size: 1.2em

            a
                text-decoration: none

                &:hover
                    color: orange

            #title
                margin-right: 10px

            #site
                text-transform: capitalize

        table
            border-collapse: collapse
            border: 1px solid $baseColor3
            height: inherit

            tr
                height: inherit

                #sidebar
                    width: $sidebarWidth
                    background-color: #eee
                    border-right: 1px solid $baseColor3
                    height: inherit

                #code
                    width: $codeWidth
                    height: inherit
                    border-right: 1px solid $baseColor3

                    #tablecontainer
                        overflow: scroll
                        width: 100%
                        height: inherit
                        background-color: #49483e

                        table
                            table-layout:fixed
                            border-collapse: collapse
                            border: none
                            font-family: monospace

                #display-button
                    width: 25px
                    background: url(http://icons.iconarchive.com/icons/visualpharm/icons8-metro-style/512/Image-Edition-Tools-Arrow-icon.png)
                    background-size: 25px 25px
                    background-repeat: no-repeat
                    background-position: center

                    &:hover
                        background-color: #eee

                    &.active
                        @include vendor(transform, rotateY(180deg))

                #hidden-info
                    width: $hiddenInfoWidth
                    margin-left: -$hiddenInfoWidth
                    height: 100%
                    padding-top: 50px
                    text-align: center
                    font-size: 1em
                    line-height: 1.5em
                    @include vendor(transition, margin-left 0.2s ease-in-out)

                    &.visible
                        margin-left: 0px

                    #date-created
                        display: inline-block

                    #date-modified
                        display: block

                    #language
                        display: inline-block
                        font-weight: bold
                        color: orange

                    #authors
                        a
                            text-decoration: none

                            &:hover
                                color: orange

        &.cascade
            @extend .t3