.search-picker {
    position: relative;
    width: 40px;
    @include animate_2();
    &.active {
        width: 300px;
        @include animate_2();
        .search-form {
            background-color: #fff;
            box-shadow: $shadow;
            .search-input {
                position: absolute;
                top: 0;
                left: 40px;
                @include animate_2();
                .txt {
                    background-color: #fff;
                }
            }
            .search-button {
                .btn {
                    background-color: #fff;
                    color: $txt-84-color;
                    .icn {
                        @include animate_1();
                        -webkit-transform: rotate(45deg);
                           -moz-transform: rotate(45deg);
                            -ms-transform: rotate(45deg);
                             -o-transform: rotate(45deg);
                                transform: rotate(45deg);
                    }
                }
            }
        }
    }
    .search-form {
        position: relative;
        width: 100%;
        height: 40px;
        border-radius: 40px;
        overflow: hidden;
        // box-shadow: $shadow-line;
        // border: $border;
        z-index: 100;
        // @include grid_2x(40px, 1fr);
        .search-button {
            // @include column_n(1);
            .btn {
                // background-color: rgba($color: $blue, $alpha: 0.0);
                // color: #fff;
                background-color: #fff;
                color: $txt-54-color;
                z-index: 100;
                &:hover {
                    // background-color: rgba($color: $blue, $alpha: 0.84);
                    background-color: #f5f5f5;
                    color: $txt-84-color;
                    @include animate_1();
                }
                .icn {
                    @include animate_1();
                    -webkit-transform: rotate(0deg);
                       -moz-transform: rotate(0deg);
                        -ms-transform: rotate(0deg);
                         -o-transform: rotate(0deg);
                            transform: rotate(0deg);
                }
            }
        }
        .search-input {
            // @include column_n(2);
            position: absolute;
            top: 0;
            left: -300px;
            width: 300px;
            @include animate_2();
            .txt {
                width: 100%;
                height: 40px;
                border-radius: 0;
                background-color: #fff;
                color: $txt-84-color;
                font-weight: 600;
                &::placeholder {
                    color: rgba($color: #000, $alpha: 0.54);
                }
                &:-ms-input-placeholder {
                    color: rgba($color: #000, $alpha: 0.54);
                }
                &::-ms-input-placeholder {
                    color: rgba($color: #000, $alpha: 0.54);
                }
            }
        }
    }
    .search-content {
        position: absolute;
        width: 100%;
        top: 20px;
        padding-top: 20px;
        padding-bottom: 20px;
        background-color: #fff;
        box-shadow: $shadow-small;
        border-bottom-left-radius: 20px;
        border-bottom-right-radius: 20px;
        display: none;
        &.active {
            display: block;
        }
        .search-place {
            position: relative;
            width: 100%;
            height: 300px;
            overflow-y: auto;
            @include transparantScrollBarHover();
        }
    }
}