@import 'filter-menu/filter-menu';
@import 'filter-menu/filters-commons';
@import 'filter-menu/filter-area';
@import 'filter-menu/filter-date';
@import 'filter-menu/filter-number';
@import 'filter-menu/filter-value';

#directory-menu
{
	z-index: 998;
	overflow-y:hidden;
  @include transition(height .5s);
  @include box-shadow(4px 0 2px rgba(0, 0, 0, 0.2), -1px 0 2px rgba(0, 0, 0, 0.2));

	@media #{$medium-and-up}
	{
		overflow: visible;
	}

	#directory-menu-main-container
	{
    @include flexbox();
    @include flex-flow(column);
    width: 100%;
    height: 100%;
    @media #{$small-only} { overflow: scroll; }

    .menu-top-image { width: 100%; }

    .directory-menu-header
    {
      width: 100%;
      z-index: 50;
      position: relative;

      .search-bar-container { @media #{$small-only} {display:none;} }

      .btn-close-menu.large-screen
      {
        position: absolute;
        right: 0px;
        top: 0;
        width: 24px;
        bottom: 0;

        @include align(center);
        display:none;

        .arrow-left
        {
          font-size: 12px;
          padding-left: 5px;
          transform: scaleY(1.8);
        }
      }

      .subheader
      {
        position: relative;

        .btn-close
        {
          position: absolute;
          margin: 0;
          right: 0;
          top: 7px;
          padding: 0 1rem;
          z-index: 50;
        }
      }

      @include transition(all .5s);

      @media (min-width : 850px)
      {
        width: calc(100% + 12px);
        border-radius: 0 0 5px 0;
        padding-right: 15px;

        .btn-close-menu.large-screen { @include flexbox(); }
        .btn-close-menu.small-screen { display:none }
      }
    }

    .shadow-bottom { bottom: -8px; border-top: none; width: calc(100% - 12px); }

    .directory-menu-content
    {
      @include flexbox();
      @include flex(1 auto);
      position: relative;
      height: 100px; // Fixs strange bug on firefox, director menu bigger than screen

      #directory-menu-spinner-loader
      {
        top: 40%;
        left: 40%;
        position: absolute;
        display: none;
      }
    }
	}

  .btn-close-menu.small-screen
  {
    text-transform: uppercase;
    width: 100%;
    border-radius: 0;
    text-align: center;
    line-height: 2.5rem;
    z-index: 10;
    box-shadow: 1px -2px 11px 2px rgba(0, 0, 0, 0.25);

    @media (min-width : 850px) { display:none; }
  }
}

@media (min-width: 850px) {
  .directory-menu-drag-target { display:none !important; }
}

#directory-menu-overlay {
  display:none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,.5);
  z-index: 997;

  will-change: opacity;

  @media (min-width: 850px) { display:none !important; }
}

// Touch interaction
.directory-menu-drag-target {
  height: 100%;
  width: 20px;
  position: fixed;
  top: 0;
  z-index: 999;
}