@import "src/assets/styles/responsive-base.scss";

#search-bar{
    width: 100%;
    height: 28px;
    max-width: 400px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    padding: 10px;
    box-sizing: border-box;
}

#search mat-icon{
    font-size: 16px;
    height: 16px;
    width: 16px;
    line-height: 16px;
    margin: 0 8px;
}

#search label{
    height: 16px;
}

#search #search-input{
    flex: 1 1 auto;
    border: none;
    background: none;
}

#search #search-input:focus{
    outline:none;
}

#search{
    position: relative;
    display: flex;
}

#search #search-options{
    position: absolute;
    max-width: 400px;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    box-sizing: border-box;
    width: 100%;
    flex: 1 1 auto;
    top: 26px;
    left: 0;
    padding:4px 0;
    z-index: 100;

    .option{
        padding: 2px 4px 2px 10px;
        display: flex;
        flex-direction: row;
        align-items: center;
        cursor: pointer;

        span{
            padding-left:4px;
        }
    }
}