@import '../../../styles/fills';
@import '../../../styles/mixins';
@import '../../../styles/definitions/colors';

.searchBar {
    &_container {
        height: 48px;
        max-width: 632px;
        width: 100%;
        justify-content: center;
        align-items: center;
        z-index: 5;
    }

    &_column {
        float: left;

        &--left {
            height: 48px;
            width: 90%;
        }
        &--right {
            height: 48px;
            width: 10%;
        }
    }

    &_border {
        height: 100%;
        width: 100%;
        border: none;
        overflow: hidden;
    }

    &_inputBar {
        border: none;
        width: 100%;
        height: 100%;
        padding-left: 18px;
        color: $dark-gray;
        outline: none;
        z-index: 5;
        &::placeholder {
            color: $dark-gray;
            opacity: 50%;
        }
    }

    &_button {
        border: none;
        width: 100%;
        height: 100%;
        z-index: 5;
        background-color: $primary-color;
        font-size: 22.1px;
        line-height: 22px;
        outline: none;
    }
    
    &_icon {
        width: 19px;
        height: 22px;
    }
}
