// /* === Sidebar Navigation === */

@media (max-width: $sidebar-breakpoint) {
  .sidebar-wrapper .sidebar, .sidebar-wrapper .sidebar-bottom {
    left: -$sidebar-width;
    width: 0;
    transition: all 0.25s ease-out;
  }

  .sidebar-wrapper.is-opened .sidebar,
  .sidebar-wrapper.is-opened .sidebar-bottom {
    left: 0;
    width: $sidebar-width;
    transition: all 0.25s ease-out;

    &.product-sidebar {
      left: -100%;
      width: 0;
      transition: all 0.25s ease-out;

      &.is-visible {
        left: 0;
        width: 100%;
        transition: all 0.25s ease-out;
      }
    }
  }

  .sidebar .formtastic{
    width: $sidebar-width-extended;
    .logo-upload-btn {
      width: $sidebar-width-extended;
    }
    .logo-upload-container {
      width: $sidebar-width-extended;
    }
  }

  .product-sidebar {
    .product-sidebar-fold {
      position: absolute;
      width: $spacing;
      height: 100%;
      border-right: 1px solid $black;
    }

    .scrollable {
      margin-left: $spacing;
    }
  }

}

@media (min-width: $sidebar-breakpoint) {
  .sidebar .formtastic{
    width: $sidebar-width;
    .logo-upload-btn {
      width: $sidebar-width;
    }
    .logo-upload-container {
      width: $sidebar-width;
    }
  }
}

.sidebar-wrapper {
  position: absolute;
  top: $navbar-header-height;
}

.sidebar {
  display: block;
  position: fixed;
  left: 0;
  width: $sidebar-width;
  height: calc(100% - 50px);
  border-right: $border-width solid $petrol-dark;
  background-color: $sidebar-bg;
  color: $white;
  z-index: $zindex-sidebar;

  @include media-breakpoint-down(sm) {
    .moxie-shim {
      display: none;
    }
  }

  .icon-plus-lg {
    margin-bottom: 12px;
  }

  .icon-remove-xl {
    margin-bottom: 12px;
  }

  .title {
    position: relative;
    padding: $spacing-sm;
    border-top: $border-width solid $sidebar-title-border-color;
    border-bottom: $border-width solid $sidebar-title-border-color;

    .headline {
      margin: 0;
      font-size: $h4-font-size;
    }

    .icon {
      color: $gray;
    }
  }

}

.sidebar-logo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  height: $sidebar-width;

  img {
    width: $sidebar-width;
    max-height: $sidebar-width;
    background-color: $gray-lightest;
  }
}

.sidebar .formstatic {
  position: absolute;
  top: 0;
  left: 0;
  height: $sidebar-width;
}

.sidebar-main-content {
  padding-top: $spacing-sm;
  text-align: center;
  background-color: $sidebar-bg;
  z-index: $zindex-sidebar;

  li {
    position: relative;
    padding-right: $spacing-sm;
    padding-left: $spacing-sm;

    &.section-item {
      padding-left: 13px; 
    }

    &.section-item,
    &.sidebar-item {
      margin-bottom: $spacing-sm;
    }

    .section-child-item {
      margin-bottom: $spacing-sm;

      &:first-child {
        margin-top: $spacing-sm;
      }

      &:last-child {
        margin-bottom: 0;
      }
    }

    a {
      display: block;
      overflow: hidden;
      text-align: left;
      font-size: $font-size-sm;
      color: $white;

      .icon {
        display: inline-block;
        margin: 0 $spacing-icon-x 0 0;
        width: 20px;
      }

      .count {
        padding-left: calc($spacing-icon-x / 2);
        vertical-align: super;
        color: $white;
      }

      &:hover, &:focus {
        color: $link-hover-color;
        .count {
          color: $link-hover-color;
        }
      }
    }

    &.active {
      a {
        color: $link-hover-color;
        .count {
          color: $link-hover-color;
        }
      }
    }

    &.product {
      &.current {
        border-top: $border-width solid $link-hover-color;
        background-color: $black;
      }

      span.label {
        @include ellipsis;
        width: 180px;
      }
    }
  }
}