/*****************************************************************************
 * Open MCT Web, Copyright (c) 2014-2015, United States Government
 * as represented by the Administrator of the National Aeronautics and Space
 * Administration. All rights reserved.
 *
 * Open MCT Web is licensed under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 * http://www.apache.org/licenses/LICENSE-2.0.
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations
 * under the License.
 *
 * Open MCT Web includes source code licensed under additional open source
 * licenses. See the Open Source Licenses file (LICENSES.md) included with
 * this source code distribution or the Licensing information page available
 * at runtime from the About dialog for additional information.
 *****************************************************************************/

.search-holder {
    $iconWidth: 20px;
    $leftMargin: 6px;
    $rightPadding: 5px;
    
    padding-right: $rightPadding;
    top: 23px;
    
    // Align with the top of the divider bar, below create button 
    margin-top: 10px;
    
    .search {
        position: relative;
        
        .search-bar {
            $heightAdjust: 4px;
            $textInputHeight: 19px;
            
            width: 100%;
            margin-top: $heightAdjust;
            
            .search-input {
                position: relative;
                top: -$heightAdjust;
                width: 100%;
                
                // For clear button
                padding-right: 16px;
            }
            
            .search-icon {
                color: $colorItemFg;
                font-size: 12px;
                
                // Make the icon within the left edge of the input area
                margin-left: 3px;
                width: 0;
                height: 0;
                
                // Line up icon with text input vertically
                margin-top: -$textInputHeight;
                
                // Text focus display transition
                transition: visibility .15s, opacity .15s;
                
                &.content {
                    // Make icon invisible whenever there is text input 
                    visibility: hidden;
                    opacity: 0;
                }
            }
            
            .search-input:focus + div.search-icon {
                // Make icon invisible when the text input is focused
                visibility: hidden;
                opacity: 0;
            }
            
            .clear-icon {
                
                position: absolute;
                display: block;
                
                cursor: pointer;
                
                color: $colorItemFg;
                font-size: 6px;
                padding: 4px;
                
                right: 0px;
                top: -1px;
                margin-right: 2px;
                
                // Icon is visible only when there is text input 
                visibility: hidden;
                
                &.content {
                    visibility: visible;
                }
            }
        }
        
        .search-scroll {
            // Spacing away from the search input
            top: 25px;
            overflow-y: auto;
            padding-right: $rightPadding;
            
            .results {

                .search-result-item {
                    // Include transitions (for the highlights)
                    @include single-transition(background-color, 0.25s);

                    // Space the results from each other
                    margin-bottom: 2px;

                    // Make the highlights the right color and shape.
                    // Attempting to match the style in the tree, but  
                    //   while having these be compact. 
                    border-radius: 2px;
                    padding-top: 4px;
                    padding-bottom: 2px;

                    .label {
                        // Give some padding away from the left side
                        margin-left: $leftMargin;

                        .title-label {
                            display: inline-block;
                            position: absolute;

                            // Give some padding away from the left side
                            left: $leftMargin + 3px + $iconWidth;
                            // and the right side
                            right: $rightPadding;

                            // Size and position the text
                            font-size: .8em;
                            line-height: 17px;

                            // Hide overflow text
                            width: auto;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                        }
                    }

                    // Change styling when it's selected
                    &.selected {
                        $c: #fff;
                        background: $colorKeySelectedBg;
                        color: $c;
                        .view-control {
                            color: $colorItemTreeIcon;
                        }
                        .label .type-icon {
                            color: #fff;
                        }
                    }

                    // Change styling when it's being hovered over
                    &:not(.selected) {
                        &:hover {
                            background: lighten($colorBodyBg, 5%);
                            color: lighten($colorBodyFg, 20%);
                            .context-trigger {
                                display: block;
                            }
                            .icon {
                                color: $colorItemTreeIconHover;
                            }
                        }
                    }
                }
            }

            .load-icon {
                position: relative;
                &.loading {
                    pointer-events: none;
                    margin-left: $leftMargin;

                    .title-label {
                        // Text styling
                        font-style: italic;
                        font-size: .9em;
                        opacity: 0.5;

                        // Text positioning 
                        margin-left: $iconWidth + $leftMargin;
                        line-height: 24px;
                    }
                    .wait-spinner {
                        margin-left: $leftMargin;
                    }
                }

                &:not(.loading) {
                    cursor: pointer;
                }
            }

            .load-more-button {
                // Space away form the results list
                margin-top: 5px;
                margin-bottom: 5px;

                // Center it
                position: relative;
                left: 25%;
                width: 50%;
                white-space: nowrap;

                // Make smallish button 
                height: 20px;
                line-height: 11px;
                font-size: 0.7em;
            }
        }
    }
}