/home/moonrcjl/template.moontelict.com/attorix/assets/scss/components/_search.scss
@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-white-2);
    @include transition(.4s);

    &.opened {
        top: 0;
    }

}

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

        & input {
            color: #000;
            border: 0;
            border: 1px solid var(--mt-border-1);
            border-radius: 0;
            padding: 0 24px;

            @include placeholder {
                color: #000000;
            }
        }

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

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

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

    }
}

.mt-search-bar-title {
    color: var(--mt-common-black-2);
    text-transform: capitalize;

    @media #{$md,$xs} {
        font-size: 25px;
    }
}