// =============================================================================
// _SIDEBAR.SCSS
// -----------------------------------------------------------------------------
// Site styles.
// =============================================================================

// =============================================================================
// TABLE OF CONTENTS
// -----------------------------------------------------------------------------
//   01. Base Styles
// =============================================================================

// Base Styles
// =============================================================================

.x-content-sidebar-active,
.x-sidebar-content-active {
  .x-sidebar {
    .x-container {
      .widget_categories,
      .widget_meta,
      .widget_nav_menu,
      .widget_pages {
        overflow-x: hidden;
      }
    }
  }
}

.x-content-sidebar-active {
  .x-sidebar {
    @include break(papa-bear) {
      right: 0;
      border-left: 1px solid $baseBorderSolid;
      border-left: 1px solid $baseBorderRgba;
    }
  }
}

.x-sidebar-content-active {
  .x-sidebar {
    @include break(papa-bear) {
      left: 0;
      border-right: 1px solid $baseBorderSolid;
      border-right: 1px solid $baseBorderRgba;
    }
  }
}

.x-full-width-active {
  .x-sidebar.nano {
    position: relative;
    width: 100%;
    margin-top: 50px;
    z-index: $zindexNavbar - 5;
    @include break(papa-bear) {
      border-top: 1px solid $baseBorderSolid;
      border-top: 1px solid $baseBorderRgba;
    }

    .max.width.nano-content {
      position: relative;
      padding-left: 0;
      padding-right: 0;
    }
  }
}

.x-sidebar {
  position: relative;
  width: 100%;
  margin: 0;
  border-top: 1px solid $baseBorderSolid;
  border-top: 1px solid $baseBorderRgba;
  background-color: $baseModBackground;
  @include break(papa-bear) {
    position: fixed;
    top: 0;
    width: $sidebarWidth;
    height: 100%;
    margin: 0;
    border-top: 0;
    z-index: $zindexNavbar + 1;
    @include transform(#{translate3d(0, 0, 0)});
  }

  .max.width {
    padding-top: 5%;
    padding-bottom: 5%;
    @include break(papa-bear) {
      padding-left: 20px;
      padding-right: 20px;
    }
  }

  .widget {
    margin-top: 65px;

    &:first-child {
      margin-top: 0;
    }
  }
}