// Make the div behave like a button
.search-bar {
    position: relative;
    display: inline-block;
    width: 100%;
    &:focus {
        border-color: $brand-primary;
    }
    .form-control {
        border-radius: $border-radius-base;
        background-color: $white;
        padding: .8rem 4rem .8rem 1.6rem;
        height: 4rem;
        width: 100%;
        border: 1px solid $white;
        @include placeholder {
            color: #DADADA;
        }
        &:focus {
            border: 1px solid $brand-primary;
        }
    }
    &.search-brandcolor {
        .form-control {
            border: 1px solid #D1D1D1;
            padding-right: 6rem;
            &:focus {
                border: 1px solid $brand-primary;
            }
        }
        .input-group-btn {
            background-color: $brand-primary;
            @include border-right-radius(.3rem);
            .rex-icon {
                color: $white;
            }
            .btn:hover {
                background-color: #ff1212;
            }
        }
        &.rounded {
            .input-group-btn {
                @include border-right-radius($border-radius-large);
            }
        }
    }
    .input-group-btn {
        display: inline-block;
        position: absolute;
        top: 1px;
        right: 1px;
        color: #dadada;
        background-color: transparent;
        border-radius: $border-radius-base;
        .btn {
            background: transparent;
            padding: .6rem 1rem;
        }
    }
    &.rounded {
        .form-control {
            @include border-right-radius($border-radius-large);
        }
        .btn {
            &:hover {
                @include border-right-radius($border-radius-large);
            }
        }
    }
}