// #navbar{}
// #navbar-router{}

.btn-toggle {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  background-color: $col-alt-bg;
  color: $col-alt-fg;
  font-size: 1.5em;
  padding: 0.5em;
  cursor: pointer;
}

#navbar {
  background-color: $col-dark-bg;
  color: $col-dark-fg;
  max-width: 16rem;
  position: sticky;
  top: 0;
  height: 100%;
  max-height: 100vh;
  &.open {
    transform: translateX(0);
  }
  &:after {
    //Shadow
    $shadow-width: 4px;
    $shadow-opacity: 0.35;
    content: '';
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    right: -$shadow-width;
    width: $shadow-width;
    background-image: linear-gradient(
      to right,
      rgba(0, 0, 0, $shadow-opacity),
      transparent
    );
  }
}

@media (max-width: 32rem) {
  .btn-toggle {
    display: block;
  }
  #navbar {
    transform: translateX(-100%);
    transition: transform 0.5s ease;
    position: absolute;
    top: auto;
    z-index: 1;
  }
  #header {
    padding-left: 3rem;
  }
}

#menu-items {
  > * {
    display: block;
    border-bottom: 1px solid rgba(white, 0.5);
    sib-route {
      display: block;
      cursor: pointer;
    }
    &[active] {
      background-color: $col-highlight-bg;
      color: $col-highlight-fg;
    }
    > div {
      width: max-content;
      padding: 2em;
    }
    &[id-prefix] {
      display: none;
    }
    > sib-display {
      display: block;
      font-size: 0.9em;
      color: #aaa;
      > div {
        margin-bottom: 1.5em;
        > sib-display {
          cursor: pointer;
          display: block;
          padding: 0.5em 2em;
        }
      }
    }
  }
}

/* sub menu (right menu) */

#mainContainer > div {
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-start;
  > sib-router {
    display: block;
    background-color: #ccc;
    sib-route {
      display: block;
      > div {
        position: relative;
        padding: 1em 2em;
        border-bottom: 1px solid #888;
      }
      &[active] {
        font-weight: bold;
        > div:before {
          content: '<';
          position: absolute;
          transform: translateX(-150%);
        }
      }
    }
  }
  > div {
    margin: 0.5em;
    flex: 1 1 0px;
  }
}