@media screen and (min-width: 768px) {
   .filter-header,
   .filter-footer {
      display: none;
   }
}

@media screen and (max-width: 767px) {
   body.scroll-disable {
      margin: 0;
      overflow: hidden;
      position: fixed;
      width: 100%;
      height: 100%;
   }

   .filter-wrapper {
      display: flex;
      flex-direction: column;
      flex-wrap: nowrap;
      align-items: flex-start;
      margin: 0;
      opacity: 0;
      overflow: auto;
      position: fixed;
      left: -100%;
      top: 0;
      transition: left .3s;
      width: 100%;
      height: 100%;
      z-index: -1;

      form {
         overflow-y: auto;
         padding: 20px 50px;
         width: 100%;

         h2 {
            display: none;

            + .filter-row {
               border-top: 0;
            }
         }
      }

      //&,
      &.active {
         left: 0;
         opacity: 1;
         z-index: 10000000;
      }
   }

   .filter-header {
      background: $black;
      color: $white;
      display: flex;
      align-items: center;
      padding: 30px 50px;
      width: 100%;

      h2 {
         color: inherit;
         margin: 0;
      }

      .fc {
         color: inherit;
         font-size: 24px;
         margin-left: auto;

         @include haf {
            opacity: .5;
            text-decoration: none;
         }
      }
   }

   .filter-footer {
      padding: 20px;
      margin-top: auto;
      width: 100%;

      .btn {
         color: $white;

         span {
            display: block;
         }
      }
   }

   .btn-sections-opener,
   .btn-filter-opener {
      margin-bottom: 10px;
      position: relative;

      .fc {
         font-size: 20px;
         line-height: 1;
         position: absolute;
         left: 40px;
         top: 50%;
         transform: translateY(-50%);

         @media screen and (max-width: 399px) {
            left: 30px;
         }
      }
   }
}

@media screen and (max-width: 449px) {
   .filter-header,
   .filter-wrapper form {
      padding: 15px 20px;
   }

   .filter-footer {
      padding: 20px 10px 10px;
   }
}
