// Fixed Search

.search-global {
    
    &.fixed {
        position: fixed;
        @include spacer(left);
        @include spacer(bottom);
        z-index: 50;

        .ion {

            &.light-typo {
                color: $color-white;
            }

            &.dark-typo {
                color: $color-black;
            }
        }
    }
}

// Search Form

.search {
    position: relative;
    

    &-field {
        width: 100%;

    }

    &-submit {
        position: absolute;
        top: 0;
        right: 0;
        height: 100%;
        margin: 0;
        min-width: 3.125rem;

        .icon {
            margin: 0;
        }

        &.-text:hover {
            box-shadow: none;
        }
    }

    select {
        position: absolute;
        top: 0;
        bottom: 0;
        right: 3.625rem;
        max-width: 9rem;
        margin: 0;

        &,
        &:active,
        &:focus {
            background-color: transparent;
        }
    }

    &-results {
        max-height: 27rem;
        padding-bottom: 0.5rem;
        overflow-x: visible;
        overflow-y: auto;

        .search-suggestions,
        .no-search-results {
            margin: 1rem 0;
            color: $color-grey;
        }

        // Product row

        .product-item {
            position: relative;
            padding: 1.25rem 0;
            border-top: 1px solid $color-border;

            @include flex;
            @include align-items(center);
            @include flex-just(space-between);

            img {
                max-width: 4rem;
                min-width: 4rem;
                height: auto;
            }

            &-name {
                font-weight: 600;
            }

            &-details {
                margin-left: 1rem;
                flex-grow: 2;

                @include flex;
                @include flex-direction(column);
                @include align-items(flex-start);

                span {

                    > a {
                        font-size: $font-size-small;
                    } 
                }
            }

            &-price {
                font-weight: 600;
            }

            &:first-child {
                border: none;
            }
        }

        .search-results_btn {
            margin-top: 1rem;
        }
    }
}

// Search Popup

.search-popup {

	.holder {
        max-width: 65vh;
        margin: 0 auto;
        padding-left: $grid-spacer;
        padding-right: $grid-spacer;
        padding-top: $header-height;

        @include sm-screen {

            max-width: 100%;
        }

        .search {

            &-field {
                min-height: 3.5rem;

                @include input-placeholder {

                    color: $color-grey-light;
                }
            }

            select {

                @include chevron(light);
            }

            select,
            &-submit,
            &-field {
                color: $color-white;
            }

            &-results {

                // Product row

                .product-item {

                    > * {
                        color: $color-white;
                    }

                    &-details {

                        .title {
                            color: $color-white;
                        }

                        span {

                            > a {
                                color: $color-grey-light;
                            } 
                        }
                    }
                }

                .button {
                    color: $color-white;
                }
            }
        }
	}
}