.sidebar {
  background-color: $color-light1;
  height: 100%;

  .sidebar-x-options {
    overflow-y: auto;
    max-height: 100%;
    padding: 8px;
    padding-bottom: $gridspacing * 3;
  }

  .sidebar-x-empty {
    margin-bottom: $gridspacing * 4;
    padding-left: $gridspacing;
    padding-right: $gridspacing * 2;
  }

  .sidebar-x-emptytext1{
    gap: 1rem;

    img {
      height: $gridspacing * 3;
      position: relative;
      top: $gridspacing;
      width: $gridspacing * 3;
    }

    .sidebar-x-emptybody > * + * {
      margin-top: $gridspacing;
    }
  }

  .sidebar-x-emptybacklink {
    display: inline-block;
    margin-top: $gridspacing;
  }
}

.sidebar-desktop {
  max-width: 320px;

  .sidebar-x-options {
    padding-top: 0;
  }

  @media (min-width: $media-hd) {
    max-width: $sidebar-max-width;
  }
}

.sidebar-dialog {
  margin-left: auto;
  margin-right: auto;
  max-width: $sidebar-max-width;

  .sidebar-x-options {
    height: calc(100% - #{$brandvoice-dialog-height});
  }

  nav {
    height: 100%;
    overflow-y: auto;
  }

  @media (min-width: $sidebar-max-width) {
    border-top-left-radius: $border-radius;
    border-top-right-radius: $border-radius;
  }
}