@import 'bootstrap/custom-bootstrap-variables';
@import 'bootstrap/scss/mixins/breakpoints';

@mixin exposed-form {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  padding: $spacer calc(#{$spacer} * 2) calc(#{$spacer} * 2) calc(#{$spacer} * 2);
  background-color: $gray-100;
  border: 1px solid $gray-300;
  
  @include media-breakpoint-down(sm) {
    padding-left: 5vmin;
    padding-right: 5vmin;
  }
  
  + * {
    margin-top: calc(#{$spacer} + 1vw);
  }
  
  
  .form-group {
    margin-bottom: 0;
  }
  
  > .form-item, > .form-actions {
    margin-right: $spacer;
    margin-top: $spacer;
  }
  
  > .form-actions {
    margin-bottom: $spacer * -.5;
    input {
      margin-bottom: $spacer * .5;
    }
  }
  
  > .form-actions:last-child {
    margin-right: 0;
  }
  
}
