/* WKND Search Header styles */
 
@search-width: 165px;
@search-width-expand: 265px;

@search-width-mobile: @search-width /2;
@search-width-mobile-expand: @search-width;

.cmp-search--header {
    float: right;
    margin-right: -12px;
    padding-right: @gutter-padding;
 
    .cmp-search {
         
        &__form {
         
        .cmp-search__icon {
            top: 0.7rem;
        }
         
        .cmp-search__clear-icon {
            top: 0.7rem;
        }
             
        .cmp-search__input {
            background-color: #ebebeb8a;
            color:@text-color;
            font-size: @font-size-medium;
            border-radius: 0px;
            border:none;
            height:40px;
            width:@search-width;
            padding-right: 2rem;
            padding-left: 1.8rem;
            transition: ease-in-out, width .35s ease-in-out;

            &:focus {
                background-color: @body-bg;
                outline: none !important;
                border:1px solid @text-color;
                box-shadow: none;
                width: @search-width-expand;
            }
                 
            &::placeholder { 
                text-transform: uppercase;    
                }

                @media (max-width: @screen-small) {
                    width: @search-width-mobile;
                    &:focus {
                        width: @search-width-mobile-expand;
                         }
                }
                
                 
            }
             
         
    }
         
        .cmp-search__results {
            margin-top: 0.5em;
            background: @gray-dark;
             
            a.cmp-search__item {
                color: @brand-third;
                font-size: @font-size-small;
                height: 50px;
                text-overflow: ellipsis;
                padding: 0.5em;
                margin-top:0.25em;
            }
             
            a.cmp-search__item:hover {
                text-decoration:none;
                background: @gray-base;
            }
             
            .cmp-search__item-mark {
                background: @gray-base;
                color: @brand-third;
            }    
          }    
        }
         
         @media (max-width: @screen-medium) {
             .cmp-search__input {
               height:50px;
             }
        }
         
        @media (max-width: @screen-small) {
            margin-right: 1em;
            position: absolute;
            right: 0;
            z-index: 100;
            margin-top: 0.25em;
             
        }    
}