.gds-search {
    opacity: 0;
    transform: scale(1.3);
    transform-origin: 50% 21%;
    pointer-events: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: $trans-black-medium;
    z-index: $z-index-8;
    display: flex;
    align-items: top;
    justify-content: center;
    @include transition-ease-out(all, 350ms);

    .gds-button--close-x {
        opacity: 1;
        background-image: url('data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%20100%25%20100%25%22%20fill%3D%22none%22%20stroke%3D%22%23#{ffffff}%22%20stroke-width%3D%222%22%20stroke-miterlimit%3D%2210%22%3E%3Cline%20class%3D%22st0%22%20x1%3D%220.9%22%20y1%3D%221%22%20x2%3D%2219.1%22%20y2%3D%2219.2%22%2F%3E%3Cline%20class%3D%22st0%22%20x1%3D%2219.1%22%20y1%3D%221%22%20x2%3D%220.9%22%20y2%3D%2219.2%22%2F%3E%3C%2Fsvg%3E');
    }
}

.gds-search__input-holder--no-result {
    animation: gds-search-shake linear 0.5s;
    animation-iteration-count: 1;
    transform-origin: 50% 50%;
}

.gds-search--shown {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

.gds-search__input-holder {
    width: 100%;
    max-width: 920px;
    background-color: transparent;
    margin-top: 10vh;

    @media #{$phone-width}, #{$phablet-width} {
        width: calc(100% - #{$unit * 4});
    }
}

.gds-search__form-group {
    box-shadow: 0 0 ($unit * 3) rgba(0, 0, 0, 0.25);
}

// Typeahead
.gds-search__typeahead {
    display: block;
    border-radius: 0 0 $border-radius $border-radius;
    overflow: hidden;
    background: #fff;
    box-shadow: inset -1px -1px 0px 0 #c4c4c4, inset 1px -1px 0px 0 #c4c4c4;
}

.gds-search__typeahead-item {
    // color: white;
    background-color: $searchShownBackgroundDefaultColor;
    padding: ($unit * 0.25) $unit;
    background: none;
    color: inherit;
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex: auto;
    align-items: center;

    @include transition-ease-out(all, 250ms);

    &:hover {
        cursor: pointer;
        color: white;
        background-color: $searchShownBackgroundHoverColor;
    }

    &--back {
        font-size: 12px;
    }
}

.gds-search__typeahead-item--selected {
    cursor: pointer;
    background-color: $searchShownBackgroundHoverColor;
}

// Icon
.gds-icon--search {
    width: 24px;
    height: 24px;
    background-size: 22px 22px;
    background-position: 4px 4px;
    background-repeat: no-repeat;
    background-image: url('data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2024%2024%22%20style%3D%22enable-background%3Anew%200%200%2024%2024%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E.st0%7Bfill%3A%23acacac%3B%7D%3C%2Fstyle%3E%3Cg%3E%3Cpath%20class%3D%22st0%22%20d%3D%22M9.9%2C19.2c-5.1%2C0-9.2-4.1-9.2-9.2s4.1-9.2%2C9.2-9.2s9.2%2C4.1%2C9.2%2C9.2S14.9%2C19.2%2C9.9%2C19.2z%20M9.9%2C2.1C5.5%2C2.1%2C2%2C5.6%2C2%2C10s3.5%2C7.9%2C7.9%2C7.9s7.9-3.5%2C7.9-7.9S14.2%2C2.1%2C9.9%2C2.1z%22%2F%3E%3Cpath%20class%3D%22st0%22%20d%3D%22M3.9%2C10L3.9%2C10c-0.5-3.6%2C1.5-6.7%2C6.2-6.2l0%2C0C6.7%2C3.8%2C3.9%2C6.6%2C3.9%2C10z%22%2F%3E%3Cpath%20class%3D%22st0%22%20d%3D%22M22%2C23.5c-0.4%2C0-0.7-0.1-1-0.4l-6.1-6.1c-0.5-0.5%2C0.6-0.9%2C1.1-1.4c0.5-0.5%2C0.3-1.1%2C0.8-0.6l6.1%2C6.1c0.5%2C0.5%2C0.5%2C1.4%2C0%2C2C22.7%2C23.3%2C22.3%2C23.5%2C22%2C23.5z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
}

.gds-search__filter-items {
    max-height: 50vh;
    overflow-y: scroll;
    border-bottom: 1px solid #c4c4c4;
}

.gds-search__result-icon {
    font-size: 14px;
    padding-right: 8px;
    text-align: center;
}
.gds-search__result-name {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gds-search__result-type {
    .gds-badge {
        white-space: nowrap;
    }
}

@keyframes gds-search-shake {
    0% {
        transform: translate(0px, 0px);
    }
    19% {
        transform: translate(-10px, 0px);
    }
    39% {
        transform: translate(15px, 0px);
    }
    60% {
        transform: translate(-20px, 0px);
    }
    79% {
        transform: translate(20px, 0px);
    }
    100% {
        transform: translate(0px, 0px);
    }
}

@-moz-keyframes gds-search-shake {
    0% {
        -moz-transform: translate(0px, 0px);
    }
    19% {
        -moz-transform: translate(-10px, 0px);
    }
    39% {
        -moz-transform: translate(15px, 0px);
    }
    60% {
        -moz-transform: translate(-20px, 0px);
    }
    79% {
        -moz-transform: translate(20px, 0px);
    }
    100% {
        -moz-transform: translate(0px, 0px);
    }
}

@-webkit-keyframes gds-search-shake {
    0% {
        -webkit-transform: translate(0px, 0px);
    }
    19% {
        -webkit-transform: translate(-10px, 0px);
    }
    39% {
        -webkit-transform: translate(15px, 0px);
    }
    60% {
        -webkit-transform: translate(-20px, 0px);
    }
    79% {
        -webkit-transform: translate(20px, 0px);
    }
    100% {
        -webkit-transform: translate(0px, 0px);
    }
}

@-o-keyframes gds-search-shake {
    0% {
        -o-transform: translate(0px, 0px);
    }
    19% {
        -o-transform: translate(-10px, 0px);
    }
    39% {
        -o-transform: translate(15px, 0px);
    }
    60% {
        -o-transform: translate(-20px, 0px);
    }
    79% {
        -o-transform: translate(20px, 0px);
    }
    100% {
        -o-transform: translate(0px, 0px);
    }
}

@-ms-keyframes gds-search-shake {
    0% {
        -ms-transform: translate(0px, 0px);
    }
    19% {
        -ms-transform: translate(-10px, 0px);
    }
    39% {
        -ms-transform: translate(15px, 0px);
    }
    60% {
        -ms-transform: translate(-20px, 0px);
    }
    79% {
        -ms-transform: translate(20px, 0px);
    }
    100% {
        -ms-transform: translate(0px, 0px);
    }
}