/*****************************************************************************
 * 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.
 *****************************************************************************/

.holder-search {
    // Moved a lot of stuff in here to _filter.scss
    // to generalize approach to search input controls.

	$iconWidth: 20px;
    $textInputHeight: 19px;
    $iconEdgeM: 4px;
    $iconD: $treeSearchInputBarH - ($iconEdgeM*2);

	.search-bar {
		font-size: 0.8em;
		max-width: 250px;
		position: relative;

		input[type="search"] {
			height: $treeSearchInputBarH;
			line-height: $treeSearchInputBarH;
            position: relative;
            width: 100%;
            padding-left: $iconD + $interiorMargin !important;
            padding-right: ($iconD * 2) + ($interiorMargin * 2) !important;
		}
		
        .clear-icon {
            right: $iconD + $interiorMargin;
        }

		.menu-icon {
            // 'v' invoke menu icon
            &:before { content: '\76'; }
			font-size: 0.8em;
			padding-right: $iconEdgeM;
			right: $iconEdgeM;
			text-align: right;

			&:hover {
				color: pullForward($colorInputIcon, 10%);
			}
		}

		.search-menu-holder {
			float: right;
			left: -20px;
			z-index: 70;
			transition: visibility .05s, opacity .05s;
		}
	}

	.active-filter-display {
		$s: 0.65em;
		$p: $interiorMargin;
		@include box-sizing(border-box);
		line-height: 130%;
		padding-left: $s * 2.25;
		font-size: $s;

		.clear-filters-icon {
			color: $colorInputIcon;
			opacity: 1;
			font-size: 0.8em;
			position: absolute;
			left: 1px;
			cursor: pointer;
		}
	}

	.search-results {
        @include trans-prop-nice((opacity, visibility), 250ms);
        margin-top: $interiorMarginLg; // Always include margin here to fend off the search input
		padding-right: $interiorMargin;
        .hint {
            margin-bottom: $interiorMarginLg;
            font-size: 0.65em;
            opacity: 0.6;
        }
        &.active {
            visibility: visible;
            opacity: 1;
        }
		.load-more-button {
            @include transform(translateX(-50%));
            display: inline-block;
			margin-top: $interiorMargin;
            padding: 0 $interiorMarginLg;
			font-size: 0.75em;
			margin-left: 50%;
			white-space: nowrap;
		}
	}
}