/*
Global search

Theses are styles that drive our global search component

Markup:
<label class="form__label">Global search input</label>
<input type="text" class="global-search__input" placeholder="Search..."/>
<br/><br/>
<label class="form__label">Global search button</label>
<span class="global-search__button" aria-label="search"></span>

Name: globalSearch

Styleguide 2.12
*/

@color-global-search-link-title-default: @theme-grey9;
@color-global-search-subtitle: @theme-grey12;
@color-global-search-divider-border: @theme-grey10;

@color-global-search-updated-divider: #EDEDED;
@color-global-search-updated-title: #4A4A4A;
@color-global-search-updated-subtitle: #4A4A4A;
@color-global-search-category-option: #4A4A4A;

@color-global-search-esc-button: #929292;
@color-global-search-section-header: #929292;

.global-search__button {
    display: inline-block;
    width: 18px;
    height: 55px;
    cursor: pointer;
    .svgicon--search-grey;
    background-position: center;
    background-size: 100%;

    &:hover,
    &:focus {
        .svgicon--search-grey-hover;
    }
}

.global-search__button--aspx {
    margin-top: -3px;
}

.global-search__input {
    margin-bottom: 0 !important;
    border: 1px solid @color-border-input !important;
    .svgicon--search-grey;
    background-position: 10px 50%;
    background-size: 16px;

    &:focus {
        outline: none;
    }
}

@media (min-width: 1200px) {
    .global-search__input--expanded {
        width: 370px !important;
    }
}

@media (min-width: 1043px) and (max-width: 1199px) {
    .global-search__input--expanded {
        width: 300px !important;
    }
}

@media (min-width: 980px) and (max-width: 1042px) {
    .global-search__input--expanded {
        width: 230px !important;
    }
}

.global-search__search-query-item-anchor {
    height: 50px;
    padding: 0 30px;
    display: flex;
    align-items: center;
}

.global-search__search-query-icon {
    height: 12px;
    width: 12px;
    min-width: 12px;
    min-height: 12px;
    margin-right: 10px;
}

.global-search__search-query {
    color: @theme-grey7;
}

.global-search__search-query-item-anchor--active,
.global-search__search-query-item-anchor:hover {
    text-decoration: none;
    background-color: @color-popover-link-bg;
}

.global-search__results-container {
    position: absolute;
    right: 15px;
    width: 600px;
    min-width: 170px;
    max-width: none;
    padding-top: 7px;
    z-index: @z-index-popover;
}

.global-search__results-group-list {
    margin: 0;
    padding: 0;
}

.global-search__results-group-list--refresh {
}

.global-search__results-group-list-item {
    float: none;
    padding-top: 10px;

    &:not(:first-child) {
        border-top: 1px solid @color-global-search-divider-border;
    }
}

.global-search__results-group-list-item--refresh {
    padding-top: 0;
    &:not(:first-child) {
        border-top: 0;
    }
}

.global-search__result-wrapper {
    display: flex;
    align-items: center;
    padding-bottom: 10px;
    border-bottom: 1px solid @color-global-search-updated-divider;
}

.global-search__results-group-list-item--refresh.global-search__results-group-list-item--last .global-search__result--last .global-search__result-wrapper {
  border-bottom: none;
}

// errors/no-results
.global-search__error,
.global-search__no-results {
    font-size: @font-size-base;
    padding: 10px;
}

.global-search__error--refresh,
.global-search__no-results--refresh {
    font-size: @font-size-base;
    padding: 10px 0;
}

// results list
.global-search__results-group-title {
    padding: 5px 20px;
    color: @color-header;
    font-size: @font-size--12;
    .text-bold;
    text-transform: uppercase;
}

.global-search__results-list {
    margin: 0;
    padding: 0;
}

.global-search__result {
    padding: 10px 20px;
    font-size: @font-size--12;

    &:hover {
        background-color: @color-popover-link-bg;
    }
}

.global-search-modal__content {
    margin: 0 -30px;
    overflow-y: auto;
}

.global-search-modal__content--keyboard-mode .global-search__result {
    &:hover {
        background-color: #FFFFFF;
    }

    &:focus, &.global-search__result--active {
        background-color: @theme-grey14;
    }
}


.global-search__result--refresh {
    padding: 10px 20px 0 30px;
    cursor: pointer;

    &.global-search__result--active {
        background-color: #FFFFFF;

        &:hover {
            background-color: @theme-grey14;
        }
    }
}

.global-search-modal__content--query-active .global-search__result--refresh.global-search__result:hover {
    background-color: #FFFFFF;
}

.global-search__result--active {
    background-color: @color-popover-link-bg;
}

.global-search__result-title {
    margin: 0 0 3px;
    color: @color-header;
}

.global-search__result-type {
    font-size: @font-size--13;

    &:before {
        padding-right: 5px;
        padding-left: 2px;
        content: '\2022';
    }
}

.global-search__result-type--refresh {
    font-size: @font-size--12;
    line-height: 14px;
    color: @theme-grey12;
}

.global-search__link {
    text-decoration: none;
    font-size: @font-size--12;

    &:focus {
        text-decoration: underline;
    }
}

.global-search__link--title {
    font-size: @font-size--13;
    .text-bold;
    color: @color-global-search-link-title-default;
    text-decoration: underline;

    &:hover,
    &:active,
    &:focus {
        color: @color-link-default;
    }
}

.global-search__link--title-refresh {
    color: @color-global-search-updated-title !important;
    font-size: @font-size-base;
    letter-spacing: normal;
    font-weight: @font-weight-bold;
    line-height: 17px;
    text-decoration: none !important;
    &:hover {
        text-decoration: none !important;
        color: @color-global-search-updated-title !important;
    }
}

.global-search__item-subtitle {
    display: inline-block;
    padding: 2px 0;
    list-style: none;
    line-height: 14px;
    color: @color-global-search-subtitle;

    &:first-child {
        padding-left: 0;
    }

    &:last-child {
        padding-right: 0;
    }
}

.global-search__item-subtitle--italics {
    font-style: italic;
}

.global-search__item-subtitle + .global-search__item-subtitle  {
    &:before {
        padding: 0 5px;
        content: '\2022';
    }
}

.global-search__view-all-row {
    padding: 0;
    height: 50px;
}

.global-search__result--view-all {
    padding: 0;
}

.global-search__view-all-link {
    font-size: @font-size-base;
    font-weight: @font-weight-bold;
    display: block;
    text-align: center;
    line-height: 50px;
}

.global-search__item-subtitle-text {
    color: @color-global-search-updated-subtitle;
}

.global-search__result-icon-container {
    width: 40px;
    min-width: 40px;
    height: 40px;
    display: inline-block;
    border: 1px solid @theme-grey5;
    border-radius: 50%;
    position: relative;
}

.global-search__result-content-container {
    display: inline-block;
    margin-left: 15px;
}

.global-search__result-icon {
    font-size: 17px;
    height: 17px;
    width: 17px;
    color: @theme-grey5;
    position: absolute;
    top: 10px;
    left: 10px;
}

.global-search__result-icon--file {
    position: absolute;
    top: 8.5px;
    left: 11px;
    height: 22px;
}

.global-search__result-icon.fa-user {
    left: 12px;
}
.global-search__result-icon.fa-door-open {
    left: 9px;
}

.global-search__result-icon.fa-clipboard-list-check {
    left: 13px;
}

.global-search__result-icon.fa-dollar-sign {
    top: 11px;
    left: 14.5px;
}

.global-search__result-icon.fa-car-alt {
    top: 11px;
    left: 11px;
}

.global-search__button-container {
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid @theme-grey4;
    border-radius: 3px;
    background-color: @theme-grey2;
}

.global-search__button-container--esc {
    width: 35px;
}

//Override the 1140 "large" view when window is not big enough
@media (max-width: 1140px) {
    #globalSearchModal .modal__dialog{
        width: ~'calc(100% - 60px)' !important;
        margin-left: ~'calc(-50% + 30px)' !important;
    }
}

.global-search-modal__header {
    margin: -30px -30px 0 -30px;
    height: 65px;
    display: flex;
    align-items: center;
    padding: 30px;
    border-bottom: 1px solid @color-global-search-divider-border;
}

.global-search-modal__input-icon {
    width: 18px;
    height: 18px;
    margin-right: 15px;
    min-width: 18px; //Stop flex from messing with icon size
    min-height: 18px;
}

.global-search-modal__input {
}

.global-search-modal__section-header {
    margin-top: 20px;
    margin-bottom: 8px;
    padding: 0 30px;
    color: @color-global-search-section-header;
    font-size: @font-size--12;
    font-weight: @font-weight-bold;
    line-height: 14px;
    text-transform: uppercase;
}

.global-search-modal__section-header--padding {
    padding: 0 30px;
}

.global-search-modal__category-list {
    margin: 0 0 20px;
}

.global-search-modal__category-item {
}

.global-search-modal__category-anchor {
    display: block;
    height: 30px;
    padding: 0 30px;
    color: @color-global-search-category-option;
    font-size: @font-size-base;
    line-height: 30px;
    cursor: pointer;

    &:hover {
        background-color: @theme-grey14;
        text-decoration: none;
    }
    &:active {
        color: @color-global-search-category-option;
        text-decoration: none;
    }
    &:focus {
        text-decoration: none;
    }
}

.global-search-modal__content--keyboard-mode a.global-search-modal__category-anchor {
    &:hover {
        background-color: #FFFFFF;
        text-decoration: none;
    }
    &:focus {
        background-color: @theme-grey14;
        text-decoration: none;
    }
}

.global-search-modal__content--keyboard-mode .global-search__search-query-item-anchor:hover {
    background-color: #FFFFFF;
}

.global-search-modal__content--keyboard-mode.global-search-modal__content--query-active .global-search__search-query-item-anchor{
    background-color: @theme-grey14 !important;
}

.global-search-modal__selected-category {
    margin-right: 10px;
    padding: 6px 10px;
    height: 26px;
    border-radius: 3px;
    background-color: @theme-grey14;
    white-space: nowrap;
    color: @theme-grey7;
    font-size: @font-size--12;
    font-weight: @font-weight-semibold;
    line-height: 14px;
    position: relative;
}

.global-search-modal__selected-category--in-query {
    background-color: @theme-grey10;
}

.global-search-modal__selected-category--with-close {
    padding-right: 27px;
}

.global-search-modal__close {
    position: absolute;
    top: 8px;
    right: 10px;
    width: 11px;
    height: 15px;
    cursor: pointer;
    opacity: 0.5;
    background-image: url("@{icons}delete-grey.svg");
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: top center !important;

    &:hover,
    &:focus {
        opacity: 1;
    }
}

.global-search-modal__clear {
    padding-right: 27px;
    color: @theme-blue1;
    font-weight: @font-weight-bold;
    font-size: @font-size-base;
    float: left;
    &:hover {
        text-decoration: none;
    }
}

.global-search-modal__footer {
    margin: 0 -30px -30px;
    border-top: 1px solid @color-global-search-divider-border;
}

.global-search__navigation-instructions {
    height: 50px;
    padding: 0 30px;
    display: flex;
    align-items: center;
}

.global-search-modal__results-header {
    border-top: 1px solid @theme-grey10;
}

.global-search__error-msg {
    margin-left: 30px;
}

//Override bottom margin
.globalSearchModal .modal__dialog {
    margin-bottom: 0;
}