/* Sidebar */
.ola-sidebar {
  
  .ola-sidebar-open &{
      width: 340px;
      max-height: none;
      margin: 0;
      visibility: visible;
      max-width: 35%;
      top: auto;
      right: auto;
      bottom: auto;
      left: auto;
      padding-right: 24px;
      vertical-align: top;
      transform: translate3d(0, 0, 0);
      position: relative;
      padding-left: 0;
      z-index: 0;
      background-color: transparent;
      display: block;
      box-shadow: none;
  }
}

/* Filters */
.ola-search-filters {
  padding: 0;
  max-height: none;
  overflow: visible;
}


  /**
   * on mobile and tablet
   */
  .ola-search-tablet, .ola-search-mobile {
    .ola-sidebar {
      position: fixed;
      z-index: 10000; /* chatbot is 9999 */
      right: 0;
      top: 16px;
      left: 16px;
      right: 16px;
      bottom: 16px;
      background: #fff;
      visibility: hidden;
      @include prefix(transform, translate3d(110%, 0, 0), webkit ms moz);
      // @include prefix(transition, translate3d 0.3s ease-in-out, webkit ms moz);
      @include prefix(display, flex, webkit ms moz);
      @include prefix(flex-direction, column, webkit ms moz);  
      width: auto;
      max-width: none;
      padding: 0;
    }
    .ola-sidebar-open .ola-sidebar {
      @include prefix(transform, translate3d(0%, 0, 0), webkit ms moz);
      visibility: visible;
      background-color: white;
      box-shadow: $elevation-4;
    }
    .ola-search-filters {
      flex: 1;
      overflow: auto;
      @extend %scroll;
      padding: 16px;
    }
  }

/**
 * Sidebar title
 */
.ola-sidebar-title {
  padding: 16px;
  line-height: 1;
  border-bottom: 1px #ccc solid;
  display: none;
  font-weight: bold;

  .ola-search-tablet &, .ola-search-mobile & {
    display: block;
  }
}

/* Sidebar filter button */
.ola-link-open-filter, .ola-close-sidebar {
  @extend %ola-icon-button;
}

/* Hide close sidebar on mobile */
.ola-close-sidebar {
  box-shadow: $small-box-shadow;
  display: none;
  .ola-search-tablet &, .ola-search-mobile & {
    display: block;
  }
}

/* Open Filter */
.ola-link-open-filter {
  // float: right;
  border: 1px $base-grey-color solid;
  background: none;
  text-transform: uppercase;
  text-align: center;
  position: relative;
  margin: 0 0 0 5px;
  height: auto;
  min-height: $button-default-height;

  & {
  color: $brand-color;
  }

  span{
    display: none;
  }
}
  /**
   * On desktop hide open filter
   */
  .ola-search-mobile, .ola-search-tablet {
    .ola-search-bar .ola-link-open-filter {
      display: none;
    }
  }
  .ola-search-desktop {
    .ola-results-container .ola-link-open-filter {
      display: none;
    }
  }

/* Close sidebar */
.ola-close-sidebar {
  &, &:hover, &:focus, &:active {
    background: $link-color;
    color: white;
    height: 60px;
    border-radius: 0;
  }
}