@import '{}/imports/client/stylesheets/variables.scss';

@media screen and (max-width: 750px) {

  .offset-standalone-menu {
      #minimize {
        top: calc(45vh - #{$minimize-button-height})!important;
      }
    }  

  #map-container {

    #minimize {
      display: block!important;
      position: absolute;
      bottom: 55vh!important;
      top: auto!important;
      left: 0px;
      height: $minimize-button-height;
      width: 76.2px;
      font-size: .7em;
      background-color: $gray-lighter;
      color: $black-lighter;
      transform: rotateZ(0deg);
      transition: top .2s ease;
    }

    &.minimized {

      #events-list {
        transform: translateY(100vh);
      }

      #map {
        height: 100%!important;
      }

      button#minimize {
        top: calc(100vh - 30px)!important;
        bottom: auto!important;
        left: 0px;
        z-index: 99;
      }
    }

    #map {
      height: 45vh;
      width: 100% !important;
      transition: height .2s ease;
    }

    #events-list {
      position: absolute;
      top: auto;
      bottom: 0;
      height: 55vh;
      width: 100%;
      transform: translateX(0);

      &.offset-standalone-menu {
        height: calc(55vh - #{$menu-height})!important;
      }
    }

    #filters-list {
      width: 100%;
      transform: translateY(-100vh);
      z-index: 3;

      &.show {
        transform: translateY(0);
      }
    }

    #event-info {
      top: 0;
      width: 100%;
      transform: translate(0, 0)!important;

      &:not(.active) {
        transform: translateX(-100%)!important;
      }
    }
  }
}
