// New clean sidebar

nav.sidebar,
.mobile-menu.sidebar {
  grid-area: sidebar;
  display: none;
  position: relative;
  width: 100%;
  height: auto;
  flex-direction: column;
  flex-shrink: 0;
  overflow-x: auto;
  overflow-y: scroll;
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
  padding: $spacing-xs;
  background-color: $header;
  z-index: 0;
  border-right: none;

  @include media-breakpoint-up(sm) {
    width: $sidebar-width;
    overflow: hidden;
  }

  @include media-breakpoint-up(lg) {
    display: flex;
  }
}

nav.sidebar::-webkit-scrollbar,
nav.sidebar .navlinks::-webkit-scrollbar {
  display: none;
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

.sidebar .navlinks {
  overflow-y: scroll;
  padding-bottom: $spacing;
}

.sidebar .navlink,
.sidebar a.navlink, 
.sidebar.mobile-menu .navlink,
.sidebar .header-dropdown .navlink,
.sidebar .header-dropdown .dropdown-link {
  position: relative;
  display: flex;
  height: auto;
  width: 100%;
  align-items: start;
  justify-content: start;
  margin-bottom: 1px;
  padding: $spacing-xs;
  font-size: $font-size-base;
  font-weight: 600;
  color: $white;
  border-radius: $border-radius;
  line-height: 1.5;
  user-select: none;
  
  & .icon {
    width: $spacing;
    flex-shrink: 0;
  }
  &:hover, 
  &:focus,
  &.active:hover, 
  &.active:focus {
    color: $white;
    background-color: $petrol-dark;
  }

  &:hover .icon {
    color: $white;
  }

  &.active {
    color: $link-hover-color;
    background-color: $petrol-dark;
  }
  &.active .icon {
    color: $link-hover-color;
    flex-shrink: 0;
  }
  &.active .recording-icon {
    color: $danger;
  }
  &.active:hover .icon {
    color: $white;
  }
  &:last-child {
    margin-bottom: 0;
  }
}

.sidebar .navlink .icon-wrapper {
  width: $spacing;
}

.sidebar .navlink .recording-icon,
.sidebar.tester .navlink .recording-icon,
.sidebar.tester .navlink .icon.recording-icon {
  position: absolute;
  left: 10px;
  top: 10px;
  color: $danger;
}

.sidebar .navlink .text-wrapper {
  display: flex;
  flex-direction: column;
}

.sidebar-title {
  width: auto;
  margin-left: (-$spacing-xs);
  margin-top: (-$spacing-xs);
  margin-bottom: $spacing-xs;
  padding: $spacing-xs 0;
  color: $white;
  text-align: center;
  font-size: $h5-font-size;
  font-weight: $font-weight-light;
  border-bottom: $border-width solid $gray-darkest;
}

.sidebar-title + .navlink {
  margin-top: $spacing-xs;
}

.sidebar-divider {
  display: block;
  flex-shrink: 0;
  height: 1px;
  width: auto;
  margin: $spacing-xs (-$spacing-xs);
  background-color: $gray-darkest;
}

.sidebar-label {
  display: block;
  color: $label-color;
  font-size: $font-size-label;
  margin-left: 0;
  margin-top: $spacing-xs;
  margin-bottom: $spacing-xxs;
}

//////// Collapsable ////////

.sidebar summary.navlink,
.sidebar .header-dropdown summary.navlink {
  position: relative;
  cursor: pointer;
  padding-right: $spacing;
  &:hover::after {
    background-color: $teal;
  }
}

.sidebar summary.navlink:after,
.sidebar .header-dropdown summary.navlink::after {
  content: "";
  display: inline-block;
  position: absolute;
  right: $spacing-xxs;
  top: 12px;
  width: $icon-xs;
  height: $icon-xs;
  background-color: $white;
  mask-image: url("@images/triangle-centered-left.svg");
}

.sidebar details[open] summary.navlink:after,
.sidebar .header-dropdown[open] summary.navlink::after {
  mask-image: url("@images/triangle-centered-down.svg");
}

.sidebar details[open],
.header .sidebar details[open],
.sidebar .header-dropdown[open] {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  margin-bottom: $spacing-xxs;
  padding: 0 0 1px 0;
  border-radius: $border-radius;
  background-color: $gray-darkest;
}

.sidebar details[open] .navlink,
.sidebar .header-dropdown[open] .navlink {
  width: auto;
  margin-left: $spacing-xxs;
  margin-right: $spacing-xxs;
  &:last-child {
    margin-bottom: $spacing-xxs;
  }
}

.sidebar details[open] summary.navlink,
.header .sidebar details[open] summary.navlink,
.sidebar .header-dropdown[open] summary.navlink {
  margin-left: 0;
  margin-right: 0;
}


.sidebar .header-dropdown[open] .dropdown-menu {
  position: relative;
  width: 100%;
  max-width: 100%;
  max-height: max-content;
  height: auto;
  top: auto;
  left: auto;
  display: contents;
}

.sidebar summary:focus {
  outline: none;
}


.seatslot {
  position: relative;
  display: flex;
  height: auto;
  width: 100%;
  align-items: start;
  justify-content: start;
  margin-bottom: $spacing-xxs;
  padding: $spacing-xs;
  font-size: $font-size-base;
  font-weight: 600;
  color: $gray-darker;
  line-height: 1.5;
  user-select: none;
  border: 1px dashed $gray-darker;
  border-radius: $border-radius;

  &::before {
    content: "";
    display: inline-block;
    width: $icon;
    height: $icon;
    margin-right: $spacing-xs;
    background-color: $gray-darker;
    mask-image: url("@images/seat.svg");
  }
}

// Test cycle navlink with more info and actions

.mobile-menu .navlink.test-cycle,
.navlink.test-cycle {
  justify-content: space-between;
  align-items: stretch;
  margin-bottom: $spacing-xxs;
  padding: 0;
  background-color: $gray-darker;
  color: $white;
}

.mobile-menu .navlink-wrapper,
.navlink-wrapper {
  display: flex;
  flex-direction: flex-row;
  padding: $spacing-xs;
  pointer-events: all;
}

.navlink-info {
  color: $white;
}

.navlink-title {
  font-size: $font-size-base;
  font-weight: 600;
  line-height: 1.2;
}

.navlink-meta {
  font-size: $font-size-xs;
  line-height: 1.2;
}

.mobile-menu .navlink .dropdown-actions .btn,
.navlink .dropdown-actions .btn {
  justify-content: center;
  align-items: center;
  width: $btn-height;
  height: 100%;
  padding-left: 0;
  padding-right: 0;
  border: 0;
  border-left: 1px solid $gray-900;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  & .icon {
    margin-right: 0;    
  }
  &:hover .icon, &:active .icon {
    color: $white;
  }
}

.navlink .dropdown-actions[open] {
  margin-bottom: 0;
}

.mobile-menu .navlink.test-cycle .dropdown-actions .popover-action .icon,
.mobile-menu .navlink.active.test-cycle .dropdown-actions .popover-action .icon,
.navlink.test-cycle .dropdown-actions .btn:hover .icon,
.navlink.test-cycle .dropdown-actions .btn:focus .icon,
.navlink.active.test-cycle .dropdown-actions .btn:hover .icon,
.navlink.active.test-cycle .dropdown-actions .btn:focus .icon,
.sidebar .navlink.test-cycle .dropdown-actions .popover-action .icon,
.sidebar .navlink.active.test-cycle .dropdown-actions .popover-action .icon,
.navlink.test-cycle .dropdown-actions .popover-action:hover .icon,
.navlink.test-cycle .dropdown-actions .popover-action:focus .icon,
.navlink.active.test-cycle .dropdown-actions .popover-action:hover .icon,
.navlink.active.test-cycle .dropdown-actions .popover-action:focus .icon {
  color: $white !important;
}

.navlink .popover-menu {
  max-width: $spacing-3xl;
}


//////// Marked collapse with color coding, f.e. for sections ////////
 
.sidebar details.marked-collapse.purple summary.navlink:hover,
.sidebar details.marked-collapse.purple summary.navlink:focus,
.sidebar details.marked-collapse.pink summary.navlink:hover,
.sidebar details.marked-collapse.pink summary.navlink:focus,
.sidebar details.marked-collapse.yellow summary.navlink:hover,
.sidebar details.marked-collapse.yellow summary.navlink:focus,
.sidebar details.marked-collapse.red-light summary.navlink:hover,
.sidebar details.marked-collapse.red-light summary.navlink:focus,
.sidebar details.marked-collapse.orange summary.navlink:hover,
.sidebar details.marked-collapse.orange summary.navlink:focus {
  background-color: $gray-800;
}

// Purple //

.sidebar details.marked-collapse.purple .navlink .icon {
  color: $purple;
}

.sidebar details.marked-collapse.purple .navlink:hover,
.sidebar details.marked-collapse.purple .navlink:focus {
  color: $purple;
  background-color: $gray-700;
  .icon {
    color: $purple;
  }
  &:after {
    background-color: $purple;
  }
}

.sidebar details.marked-collapse.purple .navlink.active {
  color: $white;
  background-color: $purple;
  .icon {
    color: $white;
  }
}

.sidebar details.marked-collapse.purple .navlink.active:hover {
  color: $purple;
  background-color: $gray-700;
  .icon {
    color: $purple;
  }
  &:after {
    background-color: $purple;
  }
}

// Orange //

.sidebar details.marked-collapse.orange .navlink .icon {
  color: $orange;
}

.sidebar details.marked-collapse.orange .navlink:hover,
.sidebar details.marked-collapse.orange .navlink:focus {
  color: $orange;
  background-color: $gray-700;
  .icon {
    color: $orange;
  }
  &:after {
    background-color: $orange;
  }
}

.sidebar details.marked-collapse.orange .navlink.active {
  color: $gray-800;
  background-color: $orange;
  .icon {
    color: $gray-800;
  }
}

.sidebar details.marked-collapse.orange .navlink.active:hover {
  color: $orange;
  background-color: $gray-700;
  .icon {
    color: $orange;
  }
  &:after {
    background-color: $orange;
  }
}

// Yellow //

.sidebar details.marked-collapse.yellow .navlink .icon {
  color: $yellow;
}

.sidebar details.marked-collapse.yellow .navlink:hover,
.sidebar details.marked-collapse.yellow .navlink:focus {
  color: $yellow;
  background-color: $gray-700;
  .icon {
    color: $yellow;
  }
  &:after {
    background-color: $yellow;
  }
}

.sidebar details.marked-collapse.yellow .navlink.active {
  color: $gray-800;
  background-color: $yellow;
  .icon {
    color: $gray-800;
  }
}

.sidebar details.marked-collapse.yellow .navlink.active:hover {
  color: $yellow;
  background-color: $gray-700;
  .icon {
    color: $yellow;
  }
  &:after {
    background-color: $yellow;
  }
}

// Red-light //

.sidebar details.marked-collapse.red-light .navlink .icon {
  color: $red-light;
}

.sidebar details.marked-collapse.red-light .navlink:hover,
.sidebar details.marked-collapse.red-light .navlink:focus {
  color: $red-light;
  background-color: $gray-700;
  .icon {
    color: $red-light;
  }
  &:after {
    background-color: $red-light;
  }
}

.sidebar details.marked-collapse.red-light .navlink.active {
  color: $white;
  background-color: $red-light;
  .icon {
    color: $white;
  }
}

.sidebar details.marked-collapse.red-light .navlink.active:hover {
  color: $red-light;
  background-color: $gray-700;
  .icon {
    color: $red-light;
  }
  &:after {
    background-color: $red-light;
  }
}

// Pink //

.sidebar details.marked-collapse.pink .navlink .icon {
  color: $pink;
}

.sidebar details.marked-collapse.pink .navlink:hover,
.sidebar details.marked-collapse.pink .navlink:focus {
  color: $pink;
  background-color: $gray-700;
  .icon {
    color: $pink;
  }
  &:after {
    background-color: $pink;
  }
}

.sidebar details.marked-collapse.pink .navlink.active {
  color: $white;
  background-color: $pink;
  .icon {
    color: $white;
  }
}

.sidebar details.marked-collapse.pink .navlink.active:hover {
  color: $pink;
  background-color: $gray-700;
  .icon {
    color: $pink;
  }
  &:after {
    background-color: $pink;
  }
}

// Blue //

.sidebar details.marked-collapse.blue .navlink .icon {
  color: $blue-dark;
}

.sidebar details.marked-collapse.blue .navlink:hover,
.sidebar details.marked-collapse.blue .navlink:focus {
  color: $blue-dark;
  background-color: $gray-700;
  .icon {
    color: $blue-dark;
  }
  &:after {
    background-color: $blue-dark;
  }
}

.sidebar details.marked-collapse.blue .navlink.active {
  color: $white;
  background-color: $blue-dark;
  .icon {
    color: $white;
  }
}

.sidebar details.marked-collapse.blue .navlink.active:hover {
  color: $blue-dark;
  background-color: $gray-700;
  .icon {
    color: $blue-dark;
  }
  &:after {
    background-color: $blue-dark;
  }
}

// Green //

.sidebar details.marked-collapse.green .navlink .icon {
  color: $green;
}

.sidebar details.marked-collapse.green .navlink:hover,
.sidebar details.marked-collapse.green .navlink:focus {
  color: $green;
  background-color: $gray-700;
  .icon {
    color: $green;
  }
  &:after {
    background-color: $green;
  }
}

.sidebar details.marked-collapse.green .navlink.active {
  color: $white;
  background-color: $green;
  .icon {
    color: $white;
  }
}

.sidebar details.marked-collapse.green .navlink.active:hover {
  color: $green;
  background-color: $gray-700;
  .icon {
    color: $green;
  }
  &:after {
    background-color: $green;
  }
}


//////// Profile picture button ////////

.sidebar .profilepicture-wrapper {
  display: flex;
  justify-content: center;

  @include media-breakpoint-up(sm) {
    display: block;
    margin-left: (-$spacing-xs);
    margin-top: (-$spacing-xs);
    margin-bottom: $spacing-xs;
  }
}

.sidebar .profilepicture-actions {
  position: relative;
  width: $sidebar-width;
  height: $sidebar-width;
}

.sidebar .profilepicture-actions summary {
  position: relative;
  width: $sidebar-width;
  height: $sidebar-width;
}

.sidebar .profilepicture-actions[open] {
  margin-bottom: 0;
}

.sidebar .profilepicture-actions .profilepicture {
  width: $sidebar-width;
  height: $sidebar-width;
  border-radius: $border-radius;
  @include media-breakpoint-up(sm) {
    border-radius: 0;
  }
}

.sidebar .profilepicture-actions .testerlevel-medal {
  position: absolute;
  left: $spacing-xs;
  top: $spacing-xs;
}

// Hover state for profile button //

.sidebar .profilepicture-actions summary:hover:before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: $link-hover-color;
  opacity: 0.9;
  border-radius: $border-radius;
  @include media-breakpoint-up(sm) {
    border-radius: 0;
  }
}

.sidebar .profilepicture-actions summary:hover:after {
  content: "";
  display: block;
  position: absolute;
  width: $icon-xl;
  height: $icon-xl;
  left: 50%;
  top: 50%;
  margin-left: (-1 * $icon-xl * 0.5);
  margin-top: (-1 * $icon-xl * 0.5);
  background-color: $white;
  -webkit-mask-image: url("@images/file-image-plus-xl.svg");
  mask-image: url("@images/file-image-plus-xl.svg");
  mask-repeat: no-repeat;
}

.sidebar .profilepicture-actions .popover-menu,
.sidebar .profilepicture-actions[open] .popover-menu {
  position: absolute;
  top: ($spacing-xxl)+($spacing-xs);
  left: $spacing-xs;
  width: ($sidebar-width)-($spacing-md);
}


// testNow banner //

.banner-install-testnow {
  display: flex;
  flex-shrink: 0;
  justify-content: space-between;
  align-items: center;
  height: $actionbar-height;
  margin-top: auto;
  margin-bottom: (-$spacing-xs);
  margin-left: (-$spacing-xs);
  margin-right: (-$spacing-xs);
  padding: $spacing-xs $spacing-sm $spacing-xs $spacing-md;
  color: $white;
  background-color: $gray-darkest;
  .icon {
    color: $white;
  }
  a.icon:hover {
    color: $link-hover-color;
  }
}