@import '~styles/config';

$storeheader-offsettop: $gutter*3;

.filterBar {
  display: flex;
  z-index: 20;

  padding-top: $storeheader-offsettop;
  margin-top: -$storeheader-offsettop;

  width: 100%;

  background-color: #fff;
  box-shadow: 0 -5px 70px 0 rgba(32, 32, 32, 0.1);

  @media (min-width: $min-tablet) {
    height: $filter-height + $storeheader-offsettop;
  }

  &__container {
    @include container;
    display: flex;
  }

  &__filters {
    display: flex;
    justify-content: space-between;
    flex-direction: column;

    position: relative;

    padding: $gutter*0.5 0;
    width: 100%;

    @media (min-width: $min-tablet) {
      flex-direction: row;
      padding: 0;
    }

    > div { //stylelint-disable-line
      height: $sticky-height-mobile;
      @media (max-width: $max-desktop) {
        width: 100%;
      }
      @media (min-width: $min-tablet) {
        height: $sticky-height;
      }
    }

    > button { //stylelint-disable-line
      align-items: center;
      height: $sticky-height-mobile;
      white-space: nowrap;
      @media (max-width: $max-tablet) {
        align-self: flex-end;
      }
      @media (min-width: $min-tablet) {
        height: $sticky-height;
      }
    }
  }
}