.nav-container {
  width: 240px;
  height: 100%;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--mat-sys-outline-variant, rgba(0,0,0,0.12));
  background-color: rgba(153,153,153,0.16);
  backdrop-filter: blur(8px);
  position: fixed;
  z-index: 100;
  &.collapsed {
    width: 64px;

    .label {
      display: none;
    }
  }
}

.nav-header {
  display: flex;
  justify-content: flex-end;

//  border-bottom: 1px solid var(--mat-sys-outline-variant, rgba(0,0,0,0.12));
  padding-bottom: 1px;
}


a.mat-mdc-list-item {
  height: 44px;
  border-radius: 8px;
  margin: 4px 4px;
  color: cyan;
  &.active {
    background: color-mix(in oklab, var(--mat-sys-primary, #3f51b5) 16%, transparent);
  }
}

.nav-list{
  //background-color: #f5f7fb; /* your color */
  background-color: rgba(153,153,153,0.16);
  backdrop-filter: blur(8px);
}
.nav-list .mdc-list-item {
  background-color: rgba(153,153,153,0.16);
  backdrop-filter: blur(8px);
}
.nav-list .mdc-list-item:hover,
.nav-list .mdc-list-item:focus {
  background-color: rgba(153,153,153,0.16);
  backdrop-filter: blur(8px);
}
.nav-list .mdc-list-item--selected {
  background-color: rgba(153, 153, 153, 0.50);
  backdrop-filter: blur(8px);
}

/* Primary and secondary text */
.nav-list .mdc-list-item__primary-text,
.nav-list .mdc-list-item__secondary-text {
  color: cyan;
}

/* Optional: icons inside list items */
.nav-list .mat-icon {
  color: cyan;
}