@use '../utils' as *;

/*----------------------------------------*/
/*  2.16 Search css start
/*----------------------------------------*/


.mt-header-search-bar {
    height: 400px;
    position: fixed;
    top: -100%;
    left: 0;
    right: 0;
    z-index: 99999999;
    background: var(--mt-common-black);
    transition: .4s;

    &.mt-search-open {
        top: 0;
    }

}

.contact-search-form-box {
    & form {
        position: relative;

        & input {
            color: var(--mt-common-white);

            @include placeholder {
                color: #aaaaaa;
            }
        }

        & button {
            position: absolute;
            right: 0;
            top: 13px;
            font-size: 17px;
            color: #000;
        }
    }
}

.mt-search-close {
    position: absolute;
    right: 50px;
    top: 35px;
    font-size: 50px;
    color: var(--mt-common-white);
    font-weight: 300;
    width: 45px;
    height: 45px;

    &:hover {
        @include transform(rotate(90deg));
    }
}

.mt-search-bar-title {
    color: #fff;
}