@import "@css[shared]/components/_sections-responsive";

@media screen and (max-width: $respesctions-breakpoint) {
   .sections-responsive {
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .help-box {
         margin: 10px;

         @if $helpbox-padding {
            .descr-box {
               margin-left: 90px;
            }
         }
      }

      .nav {
         .toggle-sub, a {
            min-height: 50px;
            text-transform: uppercase;
            font-weight: 600;
         }

         .toggle-back {
            background-color: $gray-light;
            border-radius: 10px;
            margin: 5px;
            border-bottom: unset;
            min-height: 50px;
            text-transform: uppercase;
            font-weight: 600;
         }

         li.active {
            > a {
               border-left: unset;
            }
         }

         li:last-child {
            border-bottom: unset;
         }
      }

      .nav .active > .sub-nav .nav-item.active {
         background-color: $gray-light;
         border-radius: 10px;
         margin: 5px;
         border-bottom: unset;

         a {

            > span {
               margin-left: 10px;
               font-weight: 600;
            }

            .figure {
               position: relative;

               &::before {
                  content: "";
                  display: block;
                  position: absolute;
                  top: 0;
                  left: 0;
                  right: 0;
                  bottom: 0;
                  background-color: rgba(0, 0, 0, .05);
                  opacity: 1;
                  transition: opacity .3s ease;
                  z-index: 2;
                  pointer-events: none;
               }
            }
         }
      }

      .sub-heading {
         background-color: $gray-light;
         border-radius: 10px;
         margin: 10px 5px;
         border-bottom: unset;
      }
   }

   .sections-responsive-header {
      .responsive-search {
         display: none;
      }
   }

   .resp-menu-additional .nav a {
      text-transform: unset;
      font-weight: normal;
   }
}

@media screen and (max-width: $xs - 1) {
   .sections-responsive {
      .help-box {
         .descr-box {
            margin-left: 0;
         }
      }
   }
}

