/**
* Everything about the subnavbar
*/

.navbar-sub {
  margin: $topbarHeight 0 0;
  background: $subnavBg;
  @if $subnavBorderTop {
    border-top: $subnavBorderTopBorder;
  }
  .subnav {
    max-width: $overallMaxWidth;
    margin: 0 auto;
  }

  @if $subnavBorderBottom {
    border-bottom: $globalBorder;
  }
  height: $subnavHeight;
}

@media #{$mediaLarge} {
  .navbar-sub {
    padding: 0 $overallPaddingLarge;
  }
}

/* A Slidebar */

.slidebar {
  > input {
    display: none;
  }
  .trigger {
    display: none;
  }
}

.subnav-trigger {
  display: none;
}

.subnav-content {
  overflow: hidden;
  @include overflowContainer($subnavBg, $subnavHeight);
}

@media #{$mediaDesktop} {
  .navbar-sub {
    margin: $topbarHeightDesktop 0 0;
    height: $subnavHeightDesktop;
    background:$subnavBgDesktop;
  }

  .subnav-content {
    @include overflowContainer($subnavBgDesktop, $subnavHeightDesktop);
  }

  .subnav li a {
    line-height:$subnavHeightDesktop !important;
  }
}

@media #{$mediaSmall} {
  .subnav-trigger {

    &:checked ~ .main .subnav-darkener {
      display: block;
      top: $topbarHeight;
      z-index: 1;
      @include animate(darkenerFadeIn);
    }

    &:checked + .slidebar .subnav {
      transform: translate3d(0, 0, 0);
      transition: transform $globalMediumEaseTime $globalMenuEasing;
      li.active {
        order: 1;
      }
      li > label > i {
        transform: rotate3d(0, 0, 1, 180deg);
      }

    }
    &:not(:checked) + .slidebar .subnav {
      .trigger {
        width: 100%;
      }
    }
  }

  .slidebar {
    overflow: visible;
    position: relative;
    height: $subnavHeight;
    z-index: 2;

    .subnav {
      position: relative;
      display: flex;
      flex-direction: column;
      transform: translate3d(0, -100%, 0) translate3d(0, $subnavHeight, 0);
      transition: transform 0s ease;
      margin-bottom: -100%;
      border-bottom: $subnavSlideBorder;
      li {
        order: 1;
        &.active {
          order: 99;
        }
        &.trigger {
          @include interface();
          display: block;
          position: absolute;
          bottom: 0;
          height: 100%;
          text-indent: 0;
          right: 0;
          color:$subnavTriggerColor;
          > label {
            width: 100%;
            height: 100%;
            margin: 0;
            text-indent: 0;
            padding: 0 $overallPadding + 16px;
            cursor: pointer;
            bottom: 0;
            position: absolute;
            right: 0;
            @include perspective();
            > i {
              transition: transform .3s ease;
              position: absolute;
              bottom: ($subnavHeight - $baseFontSize) / 2 - 2px;
              right: 16px;
            }
          }
        }
      }
    }

    &:after {
      display: none;
    }
  }
}