& when (@sidebar-enabled) {

  // Sidebar Wrapper
  .sidebar-wrapper {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    transition: width 0.25s;
    width: 0;
  }

  // Sidebar
  .sidebar {
    background: @sidebar-background-color;
    height: 100%;
    left: 0;
    position: relative;
    text-rendering: optimizeLegibility;
    top: 0;
    transform: translateX(-100%);
    transition: transform 0.25s;
    width: @sidebar-width;
    z-index: @z-index-sidebar;

    .sidebar-visible & {
      transform: translateX(0);
    }
  }

  // Sidebar Backdrop
  .sidebar-backdrop {
    background: @modal-backdrop-background-color;
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    transition: opacity 0.25s;
    width: 100%;
    z-index: @z-index-sidebar-overlay;

    &-enter {
      opacity: 0;

      &-active {
        opacity: 1;
      }
    }

    &-exit {
      opacity: 1;

      &-active {
        opacity: 0;
      }
    }
  }

  // Sidebar Sections
  .sidebar-sections {
    flex: 1 0 auto;
    margin-top: 21px;
  }

  // Sidebar Section
  .sidebar-section {
    .property-variant(sidebar-section, margin-bottom, null, null);

    &:last-of-type {
      margin-bottom: 0;
      padding-bottom: 0;
    }

    // Sidebar Section Header
    .sidebar-section-header {
      .element-spacing(sidebar-section-header, null, null);
      .element-text-size(sidebar-section-header, null);
      .element-text-style(sidebar-section-header);
      .property-variant(sidebar-section-header, height, null, null);
      align-items: center;
      display: flex;
      text-transform: capitalize;

      &:empty {
        display: none;
      }
    }
  }

  // Sidebar Menu
  ul.sidebar-menu {
    .clearfix();
    .element-shape-style(sidebar-menu);
    margin-bottom: 0;

    li {
      .element-shape-style(sidebar-menu-item);
      .element-spacing(sidebar-menu-item, null, null);
      .element-text-size(sidebar-menu-item, null);
      .element-text-style(sidebar-menu-item);
      .property-variant(sidebar-menu-item, min-height, height, null, null);
      display: block;
      -webkit-font-smoothing: antialiased;
      position: relative;

      &:before {
        display: none;
      }

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

      & > * {

        &:not(.sidebar-menu-item-label):not(a) {
          flex-grow: 0;
        }

        & when not (@sidebar-menu-item-content-padding-horizontal = null) {
          box-sizing: content-box;
          flex-grow: 1;
          padding-right: @sidebar-menu-item-content-padding-horizontal;

          &:last-child:not(a) {
            padding-right: 0;
          }
        }
      }

      a {
        .element-shape-style(sidebar-menu-item-link);
        .element-spacing(sidebar-menu-item-link, null, null);
        .element-text-style(sidebar-menu-item-link);
        .property-variant(sidebar-menu-item, height, null, null);
        align-items: center;
        display: flex;
        text-decoration: none !important;

        &:hover {
          .element-text-style(sidebar-menu-item-link-hover);
          .element-shape-style(sidebar-menu-item-link-hover);
        }

        &:active {
          .element-text-style(sidebar-menu-item-link-active);
          .element-shape-style(sidebar-menu-item-link-active);
        }

        & > * {

          &:not(.sidebar-menu-item-label):not(a) {
            flex-grow: 0;
          }

          & when not (@sidebar-menu-item-content-padding-horizontal = null) {
            box-sizing: content-box;
            flex-grow: 1;
            padding-right: @sidebar-menu-item-content-padding-horizontal;

            &:last-child:not(a) {
              padding-right: 0;
            }
          }
        }
      }

      &.expandable {

        &:after {
          .property-variant(sidebar-menu-item-dropdown-caret, right, null, null);
          .property-variant(sidebar-menu-item-dropdown-caret, top, null, null);
          .triangle-base();
          .triangle-color('right', @sidebar-menu-item-color);
          content: '';
          display: block;
          position: absolute;

          & when not (@sidebar-menu-item-dropdown-caret-width = null) {
            .triangle-size-width('right', @sidebar-menu-item-dropdown-caret-width);
          }

          & when not (@sidebar-menu-item-dropdown-caret-height = null) {
            .triangle-size-height('right', @sidebar-menu-item-dropdown-caret-height);
          }
        }
      }

      &.selected:not(.open) {
        .element-shape-style(sidebar-menu-item-selected);
      }

      &.selected,
      &.selected.open {
        .element-text-style(sidebar-menu-item-selected);

        > a,
        > a:hover,
        > a:active {
          .element-text-style(sidebar-menu-item-link-selected);
          .element-shape-style(sidebar-menu-item-link-selected);
        }
      }

      &.open {
        .element-shape-style(sidebar-submenu);
        .element-text-style(sidebar-menu-item-open);

        &.expandable {

          &:after {
            transform: rotate(90deg);
          }
        }

        > a {
          .element-text-style(sidebar-menu-item-open);
          .element-shape-style(sidebar-menu-item-open);
        }

        > ul {
          .element-spacing(sidebar-submenu, null, null);

          li {
            .element-shape-style(sidebar-submenu-item);
            .element-spacing(sidebar-submenu-item, null, null);
            .element-text-size(sidebar-submenu-item, null);
            .element-text-style(sidebar-submenu-item);
            .property-variant(sidebar-submenu-item, min-height, height, null, null);
            display: block;

            &.selected {

              > a,
              > a:hover,
              > a:active {
                .element-text-style(sidebar-submenu-item-link-selected);
                .element-shape-style(sidebar-submenu-item-link-selected);
              }
            }

            > a {
              .element-shape-style(sidebar-submenu-item-link);
              .element-spacing(sidebar-submenu-item-link, null, null);
              .element-text-style(sidebar-submenu-item-link);
              .property-variant(sidebar-submenu-item, height, null, null);
              text-decoration: none !important;

              &:hover {
                .element-text-style(sidebar-submenu-item-link-hover);
                .element-shape-style(sidebar-submenu-item-link-hover);
              }

              &:active {
                .element-text-style(sidebar-submenu-item-link-active);
                .element-shape-style(sidebar-submenu-item-link-active);
              }
            }
          }
        }
      }
    }
  }

  .sidebar-content-wrapper {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
  }
}

& when (@layout-screen-small-enabled) {

  @media (min-width: @layout-screen-small-min-width) {

    & when (@sidebar-enabled) and (@sidebar-screen-small-enabled) {

      // Sidebar Section
      .sidebar-section {
        .property-variant(sidebar-section, margin-bottom, null, screen-small);

        // Sidebar Section Header
        .sidebar-section-header {
          .element-text-size(sidebar-section-header, screen-small);
          .element-spacing(sidebar-section-header, null, screen-small);
          .property-variant(sidebar-section-header, height, null, screen-small);
        }
      }

      // Sidebar Menu
      ul.sidebar-menu {

        li {
          .element-text-size(sidebar-submenu-item, screen-small);
          .element-spacing(sidebar-menu-item, null, screen-small);
          .property-variant(sidebar-menu-item, min-height, height, null, screen-small);

          & > * {
            & when not (@sidebar-menu-item-content-padding-horizontal-screen-small = null) {
              padding-right: @sidebar-menu-item-content-padding-horizontal-screen-small;
            }
          }

          &.expandable {

            &:after {
              .property-variant(sidebar-menu-item-dropdown-caret, right, null, screen-small);
              .property-variant(sidebar-menu-item-dropdown-caret, top, null, screen-small);

              & when not (@sidebar-menu-item-dropdown-caret-width-screen-small = null) {
                .triangle-size-width('right', @sidebar-menu-item-dropdown-caret-width-screen-small);
              }

              & when not (@sidebar-menu-item-dropdown-caret-height-screen-small = null) {
                .triangle-size-height('right', @sidebar-menu-item-dropdown-caret-height-screen-small);
              }
            }
          }

          a {
            .element-spacing(sidebar-menu-item-link, null, screen-small);
            .property-variant(sidebar-menu-item, height, null, screen-small);

            & > * {
              & when not (@sidebar-menu-item-content-padding-horizontal-screen-small = null) {
                padding-right: @sidebar-menu-item-content-padding-horizontal-screen-small;
              }
            }
          }
        }

        > li.open {

          > ul {
            .element-spacing(sidebar-submenu, null, screen-small);

            li {
              .element-text-size(sidebar-submenu-item, screen-small);
              .element-spacing(sidebar-submenu-item, null, screen-small);
              .property-variant(sidebar-submenu-item, min-height, height, null, screen-small);

              a {
                .element-spacing(sidebar-submenu-item-link, null, screen-small);
                .property-variant(sidebar-submenu-item, height, null, screen-small);
              }
            }
          }
        }
      }
    }
  }
}

& when (@layout-screen-medium-enabled) {

  @media (min-width: @layout-screen-medium-min-width) {

    & when (@sidebar-enabled) and (@sidebar-screen-medium-enabled) {

      // Sidebar
      .sidebar {
        width: @sidebar-width-screen-medium;
      }

      .sidebar-overlay {

        .sidebar-docked.sidebar-visible & {
          display: none;
        }
      }

      // Sidebar Section
      .sidebar-section {
        .property-variant(sidebar-section, margin-bottom, null, screen-medium);

        // Sidebar Section Header
        .sidebar-section-header {
          .element-text-size(sidebar-section-header, screen-medium);
          .element-spacing(sidebar-section-header, null, screen-medium);
          .property-variant(sidebar-section-header, height, null, screen-medium);
        }
      }

      // Sidebar Menu
      ul.sidebar-menu {

        li {
          .element-text-size(sidebar-submenu-item, screen-medium);
          .element-spacing(sidebar-menu-item, null, screen-medium);
          .property-variant(sidebar-menu-item, min-height, height, null, screen-medium);

          & > * {
            & when not (@sidebar-menu-item-content-padding-horizontal-screen-medium = null) {
              padding-right: @sidebar-menu-item-content-padding-horizontal-screen-medium;
            }
          }

          &.expandable {

            &:after {
              .property-variant(sidebar-menu-item-dropdown-caret, right, null, screen-medium);
              .property-variant(sidebar-menu-item-dropdown-caret, top, null, screen-medium);

              & when not (@sidebar-menu-item-dropdown-caret-width-screen-medium = null) {
                .triangle-size-width('right', @sidebar-menu-item-dropdown-caret-width-screen-medium);
              }

              & when not (@sidebar-menu-item-dropdown-caret-height-screen-medium = null) {
                .triangle-size-height('right', @sidebar-menu-item-dropdown-caret-height-screen-medium);
              }
            }
          }

          a {
            .element-spacing(sidebar-menu-item-link, null, screen-medium);
            .property-variant(sidebar-menu-item, height, null, screen-medium);

            & > * {
              & when not (@sidebar-menu-item-content-padding-horizontal-screen-medium = null) {
                padding-right: @sidebar-menu-item-content-padding-horizontal-screen-medium;
              }
            }
          }
        }

        > li.open {

          > ul {
            .element-spacing(sidebar-submenu, null, screen-medium);

            li {
              .element-text-size(sidebar-submenu-item, screen-medium);
              .element-spacing(sidebar-submenu-item, null, screen-medium);
              .property-variant(sidebar-submenu-item, min-height, height, null, screen-medium);

              a {
                .element-spacing(sidebar-submenu-item-link, null, screen-medium);
                .property-variant(sidebar-submenu-item, height, null, screen-medium);
              }
            }
          }
        }
      }
    }
  }
}

& when (@layout-screen-large-enabled) {

  @media (min-width: @layout-screen-large-min-width) {

    & when (@sidebar-enabled) and (@sidebar-screen-large-enabled) {

      // Sidebar Wrapper
      .sidebar-wrapper {

        .sidebar-docked & {
          width: @sidebar-width-screen-large;
        }
      }

      // Sidebar
      .sidebar {
        width: @sidebar-width-screen-large;

        .sidebar-docked & {
          transform: translateX(0);
        }
      }

      // Sidebar Section
      .sidebar-section {
        .property-variant(sidebar-section, margin-bottom, null, screen-large);

        // Sidebar Section Header
        .sidebar-section-header {
          .element-text-size(sidebar-section-header, screen-large);
          .element-spacing(sidebar-section-header, null, screen-large);
          .property-variant(sidebar-section-header, height, null, screen-large);
        }
      }

      // Sidebar Menu
      ul.sidebar-menu {

        li {
          .element-text-size(sidebar-menu-item, screen-large);
          .element-spacing(sidebar-menu-item, null, screen-large);
          .property-variant(sidebar-menu-item, min-height, height, null, screen-large);

          & > * {
            & when not (@sidebar-menu-item-content-padding-horizontal-screen-large = null) {
              padding-right: @sidebar-menu-item-content-padding-horizontal-screen-large;
            }
          }

          &.expandable {

            &:after {
              .property-variant(sidebar-menu-item-dropdown-caret, right, null, screen-large);
              .property-variant(sidebar-menu-item-dropdown-caret, top, null, screen-large);

              & when not (@sidebar-menu-item-dropdown-caret-width-screen-large = null) {
                .triangle-size-width('right', @sidebar-menu-item-dropdown-caret-width-screen-large);
              }

              & when not (@sidebar-menu-item-dropdown-caret-height-screen-large = null) {
                .triangle-size-height('right', @sidebar-menu-item-dropdown-caret-height-screen-large);
              }
            }
          }

          a {
            .element-spacing(sidebar-menu-item-link, null, screen-large);
            .property-variant(sidebar-menu-item, height, null, screen-large);

            & > * {
              & when not (@sidebar-menu-item-content-padding-horizontal-screen-large = null) {
                padding-right: @sidebar-menu-item-content-padding-horizontal-screen-large;
              }
            }
          }
        }

        > li.open {

          > ul {
            .element-spacing(sidebar-submenu, null, screen-large);

            li {
              .element-text-size(sidebar-submenu-item, screen-large);
              .element-spacing(sidebar-submenu-item, null, screen-large);
              .property-variant(sidebar-submenu-item, min-height, height, null, screen-large);

              a {
                .element-spacing(sidebar-submenu-item-link, null, screen-large);
                .property-variant(sidebar-submenu-item, height, null, screen-large);
              }
            }
          }
        }
      }
    }
  }
}

& when (@layout-screen-jumbo-enabled) {

  @media (min-width: @layout-screen-jumbo-min-width) {

    & when (@sidebar-enabled) and (@sidebar-screen-jumbo-enabled) {

      // Sidebar Wrapper
      .sidebar-wrapper {

        .sidebar-docked & {
          width: @sidebar-width-screen-jumbo;
        }
      }

      // Sidebar
      .sidebar {
        width: @sidebar-width-screen-jumbo;
      }

      // Sidebar Section
      .sidebar-section {
        .property-variant(sidebar-section, margin-bottom, null, screen-jumbo);

        // Sidebar Section Header
        .sidebar-section-header {
          .element-text-size(sidebar-section-header, screen-jumbo);
          .element-spacing(sidebar-section-header, null, screen-jumbo);
          .property-variant(sidebar-section-header, height, null, screen-jumbo);
        }
      }

      // Sidebar Menu
      ul.sidebar-menu {

        li {
          .element-text-size(sidebar-menu-item, screen-jumbo);
          .element-spacing(sidebar-menu-item, null, screen-jumbo);
          .property-variant(sidebar-menu-item, min-height, height, null, screen-jumbo);

          & > * {
            & when not (@sidebar-menu-item-content-padding-horizontal-screen-jumbo = null) {
              padding-right: @sidebar-menu-item-content-padding-horizontal-screen-jumbo;
            }
          }

          &.expandable {

            &:after {
              .property-variant(sidebar-menu-item-dropdown-caret, right, null, screen-jumbo);
              .property-variant(sidebar-menu-item-dropdown-caret, top, null, screen-jumbo);

              & when not (@sidebar-menu-item-dropdown-caret-width-screen-jumbo = null) {
                .triangle-size-width('right', @sidebar-menu-item-dropdown-caret-width-screen-jumbo);
              }

              & when not (@sidebar-menu-item-dropdown-caret-height-screen-jumbo = null) {
                .triangle-size-height('right', @sidebar-menu-item-dropdown-caret-height-screen-jumbo);
              }
            }
          }

          a {
            .element-spacing(sidebar-menu-item-link, null, screen-jumbo);
            .property-variant(sidebar-menu-item, height, null, screen-jumbo);

            & > * {
              & when not (@sidebar-menu-item-content-padding-horizontal-screen-jumbo = null) {
                padding-right: @sidebar-menu-item-content-padding-horizontal-screen-jumbo;
              }
            }
          }
        }

        > li.open {

          > ul {
            .element-spacing(sidebar-submenu, null, screen-jumbo);

            li {
              .element-text-size(sidebar-submenu-item, screen-jumbo);
              .element-spacing(sidebar-submenu-item, null, screen-jumbo);
              .property-variant(sidebar-submenu-item, min-height, height, null, screen-jumbo);

              a {
                .element-spacing(sidebar-submenu-item-link, null, screen-jumbo);
                .property-variant(sidebar-submenu-item, height, null, screen-jumbo);
              }
            }
          }
        }
      }
    }
  }
}
