.side-sections {
   max-width: 200px;

   .title-default {
      font-size: $font-size-base;
      text-transform: uppercase;
      letter-spacing: $letter-spacing-lg;
      margin-bottom: $spacer;

      a {
         @include underline-hover;

         color: inherit;
      }
   }

   .nav-item {
      position: relative;

      ul {
         display: none;
         padding: 0 0 0 10px;
      }
   }

   .opened,
   .toggle-opened {
      > ul {
         display: block;
      }

      > .navitem-trigger::before {
         transform: rotate(45deg);
      }
   }

   .active > .nav-link {
      font-weight: $font-weight-bold;
   }

   .nav-link {
      @include underline-never;

      color: $black;
      margin: 3px 0;
      padding: 3px 15px 2px 0;
      display: inline-block;

      @include haf {
         color: $body-color;
      }
   }

   .navitem-trigger {
      cursor: pointer;
      position: absolute;
      right: 0;
      color: $black;
      font-size: 10px;
      line-height: 1;
      top: 11px;

      &::before {
         @include fonticon;

         content: $icons_plus;
         transition: transform $transition-speed;
      }
   }
}

@media screen and (max-width: $lg - 1) {
   .sidesection-wrapper {
      display: none;
   }
}
