//------------------//
// Magsparrow - Lib //
//------------------//
// This library is required for all styles.
// Do not remove this.
$magsparrow-render-styles: false;
@import '../../../web/css/magsparrow-lib';
//------------------//

$autocomplete-background: $white;
$autocomplete-border: 1px solid $gray-35;
$autocomplete-item-border: 1px solid $gray-73;
$autocomplete-item-hover: $gray-73;
$autocomplete-item-amount-color: $gray-65;

.block-search {
    margin-bottom: 0;

    @include respond-to('lib-tweakpoints-small-range') {
        margin-top: $indent-s;
    }

    @include respond-to('medium', true) {
        position: relative;
        float: right;
        padding-left: 15px;
        width: 250px;
        z-index: 4;
    }

    .block {
        &-title {
            display: none;
        }
    }
    .block-content {
        margin-bottom: 0;
    }
    .label {
        // TODO: Add icon search
        display: inline-block;
        float: right;

        @include respond-to('medium', true) {
            @include visually-hidden();
        }

        &.active {
            + .control {
                input {
                    position: static;
                }
            }
        }
    }
    .action.search {
        display: none;

        @include respond-to('medium', true) {
            // TODO: Add Search Icon here
            @include lib-button-reset();
            position: absolute;
            display: inline-block;
            right: 10px;
            top: 0;
            z-index: 1;
            padding: $indent-xs 0;

            &:focus {
                &:before {
                    color: $gray-35;
                }
            }
        }
    }
    .control {
        border-top: 1px solid $gray-73;
        clear: both;
        margin: 0 -$indent-xs -1px;
        padding: 0 $indent-xs;

        @include respond-to('medium', true) {
            border-top: 0;
            margin: 0;
            padding: 0 0 25px;
        }
    }

    input {
        left: -300%;
        position: absolute;
        margin: 15px 0;

        @include respond-to('medium', true) {
            position: static;
            padding-right: 35px;
            margin: 0;

            // Placeholder color goes here...
        }
    }
    .nested {
        display: none;

        @include respond-to('medium', true) {
            display: block;
            padding-top: 5px;
            position: absolute;
        }
    }
}

.search-autocomplete {
    @include box-sizing;
    display: none;
    position: absolute;
    z-index: 3;
    overflow: hidden;
    margin-top: -15px;

    @include respond-to('medium', true) {
        margin-top: 0;
    }

    ul {
        @include reset-list;

        li {
            &:not(:empty) {
                background: $autocomplete-background;
                border: $autocomplete-border;
                border-top: 0;
            }

            border-top: $autocomplete-item-border;
            cursor: pointer;
            margin: 0;
            padding: $indent-xs $indent-xl $indent-xs $indent-s;
            position: relative;
            text-align: left;
            white-space: normal;
            &:first-child {
                border-top: none;
            }
            &:hover,
            &.selected {
               background: $autocomplete-item-hover;
            }
            .amount {
                color: $autocomplete-item-amount-color;
                position: absolute;
                right: 7px;
                top: $indent-xs;
            }
        }
    }
}

.form.search.advanced {
    .fields.range {
        .field {
            &:first-child {
                position: relative;
                .control {
                    padding-right: 25px;
                    &:after {
                        content: ' \2013 ';
                        display: inline-block;
                        text-align: center;
                        width: 25px;
                        position: absolute;
                        right: 0;
                        top: 6px;
                    }
                }
            }
            &:last-child {
                position: relative;
                div.mage-error[generated] {
                    position: absolute;
                    top: 32px;
                    left: 0;
                }
            }
            &.with-addon {
                .control {
                    padding-right: 45px;
                }
            }
        }
    }
    .group.price {
        .addon {
            .addafter {
                background: none;
                border: 0;
                padding-top: 6px;
                position: absolute;
                right: 0;
                top: 0;
            }
        }
    }
}
