.va-side-wrapper {
  height: 100%;
  padding-top: $sidebar-brand-height;
  border-right: solid $border-default-width transparent;

  position: absolute;
  z-index: $z-index-sidebar;
  left: 0;
  top: 0;
  bottom: 0;

  transition: $transition-width, $transition-padding, $transition-transform;

  a {
    text-decoration: none;
  }
}

.va-side-backdrop {
  background-color: $color-overlay;

  position: absolute;
  z-index: $z-index-sidebar-backdrop;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  transition: $transition-opacity;
}

.va-side-brand {
  height: $sidebar-brand-height;
  padding: $sidebar-brand-padding-y $sidebar-brand-padding-x;
  color: $color-theme;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  transition: $transition-padding, $transition-height;

  .brand-logo {
    width: $sidebar-brand-logo-size;
    height: $sidebar-brand-logo-size;
  }

  .brand-title {
    width: 103px;
    height: $sidebar-brand-title-height;
    margin-left: $spacer-base;
    vertical-align: 2px;
  }
}

.va-side-main {
  height: 100%;
  padding-bottom: $sidebar-nav-link-height + $border-default-width;
  position: relative;
}

@media screen and (min-width: $device-lg) {
  .va-side-backdrop {
    display: none;
  }

  .va-app-wrapper.sidebar-collapse {

    .va-side-nav {
      &.expanded {
        background-color: transparent;
      }

      .item-name, .expander-icon {
        display: none;
      }
    }
  }
}


@media screen and (max-width: $device-lg) {
  .va-app-wrapper {
    &.sidebar-expanded .va-side-backdrop {
      visibility: visible;
      opacity: 1;
    }

    &.sidebar-collapse .va-side-backdrop {
      visibility: hidden;
      opacity: 0;
    }
  }
}
