@import '../../../styles/definitions/mixins';
@import '../../../styles/definitions/forms';

// Local Variables
$search-bar-height: var(--input-height, $form-control-height);
$search-bar-border-color: var(--input-border-color, $form-control_border-color);
$search-bar-focus-border-color: var(--input-border-focus-color, $primary-color);
$search-bar-border: var(--input-border-width, '1px') solid $search-bar-border-color;

// Component Styles
.inputSearch {
    &_wrapper {
        display: flex;

        &:not(&--inline) {
            flex-direction: column;
        }
    }
    &_input {
        display: flex;
        flex-grow: 1;
    }
    &_label {
        &--hidden {
            @extend %sr-only;
        }
        &:not(&--hidden) {
            @extend %form-label;
        }
    }
    &_control {
        @extend %form-control;
        @extend %form-control-search;
        height: $search-bar-height;
        border-radius: var(--input-border-radius, $form-control-border-radius);
        border: $search-bar-border;
        background-color: var(--input-bg-color, $form-control_bgcolor);

        &:focus {
            border-color: $search-bar-focus-border-color;
        }

        &--with-button {
            border-right: 0;
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
        }
        &--no-box-shadow {
            box-shadow: none;
        }
    }
    &_submit {
        &Btn {
            height: $search-bar-height;
            border: $search-bar-border;
            border-radius: var(--input-border-radius, $form-control-border-radius);
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
    
            &:focus, &:hover {
                border-color: $search-bar-border-color;
                box-shadow: none;
            }
    
            &--custom-bg-color {
                background-color: var(--submit-bg-color);
                border-left: 0;
    
                &:focus, &:hover {
                    background-color: var(--submit-bg-hover-color);
                }
            }
        }

        &Wrapper {
            display: flex;
            align-items: flex-end;
            flex-shrink: 0;
        }

        &Icon {
            width: auto;
            fill: var(--submit-icon-color, 'inherit');
        }
    }

    // Have the input focus border around the submit button
    &_control:focus + &_submitWrapper > &_submitBtn {
        border-color: $search-bar-focus-border-color;
    }
}
