aside#main-sidebar {
  overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
  background-color: $gray-100;
  border-right: 1px solid $gray-200;
  width: 100%;
  left: -100%;
  margin-top: 0;
  height: 100%;
  transition: 0.3s ease;
  z-index: 1041;
}

body.sidebar-open {
  overflow-x: hidden;
  aside#main-sidebar {
    left:0;
    transition: 0.3s ease;
  }
  .disable-when-main-menu-is-open {
    z-index: 1040 !important;
  }
}

a.sidebar-submenu-item:hover {
    text-decoration: none;
    background-color: $gray-200;
    cursor: pointer
}

ul.active-option {
  background-color: $gray-200;
  .drop-menu-indicator {
    transform: rotate(-90deg);
  }
}

ul.nav-sidebar {
  > li {
    > a {
      color: $gray-700;

      &:hover,
      &[aria-expanded="true"] {
        text-decoration: none;
      }

      .drop-menu-indicator {
        right: 1rem;
      }

      &[aria-expanded="true"] {
        .drop-menu-indicator {
          transform: rotate(-90deg);
          transition: .3s ease-in-out;
        }
      }

      &[aria-expanded="false"] {
        .drop-menu-indicator {
          transform: rotate(0deg);
          transition: .3s ease-in-out;
        }
      }
    }
  }
}

#contextualSideMenu {
  max-height: 85vh;
  overflow-x: auto;
  background-color: white;
  position: fixed;
  left:0;
  top: -100%;
  z-index: 1041;
  transition: .3s ease-in-out;
  .page-actions__close {
    margin: -1.5rem -1.5rem 1.5rem;
  }
}

#contextual-menu-toggle {
  & svg {
    transform:rotate(0deg);
    transition: transform .3s ease-in-out;
  }
}

#sidebar a svg {
  margin-bottom: 3px;
}

body.contextualSideMenu-open #contextualSideMenu {
  top: 0;
  transition: .3s ease-in-out;
}

body.contextualSideMenu-open #contextual-menu-toggle {
  svg {
    transform:rotate(180deg);
    transition: transform .3s ease-in-out;
  }
}

.contextual-title {
  font-size:1.25rem;
}

@include media-breakpoint-up(sm) {
  aside#main-sidebar {
    width: 50%;
  }
}

@include media-breakpoint-up(md) {
  aside#main-sidebar {
    width: 30%;
  }
}

@include media-breakpoint-up(lg) {

  #contextualSideMenu {
    border: none;
    height: max-content;
    z-index: 1000;
    position: sticky;
    top: 75px;
    transition: none;
  }
  aside#main-sidebar {
    left: 0;
    z-index: 999;
    margin-top: 50px;
    height: calc(100% - 50px);
    transition: none;
    body.sidebar-open {
      aside#main-sidebar {
        left:0;
        transition: none;
      }
    }
  }

  .contextual-title {
    font-size:1.5rem;
  }
}