/*!------------------------------------*\
    Sidebar
\*!------------------------------------*/
.drawer--sidebar {
  background-color: var(--drawer-bgColor);
}

.drawer--sidebar .drawer-contents {
  background-color: var(--drawer-pageContents-bgColor);
}

@media (--drawer-viewport-md) {
  .drawer--sidebar .drawer-hamburger {
    display: none;
    visibility: hidden;
  }

  .drawer--sidebar .drawer-nav {
    display: block;
    transform: none;
    position: fixed;
    width: var(--drawer-width-md);
    height: 100%;
  }

  /*! Left */
  .drawer--sidebar.drawer--left .drawer-nav {
    left: 0;
    border-right: 1px solid var(--drawer-borderColor);
  }

  .drawer--sidebar.drawer--left .drawer-contents {
    margin-left: var(--drawer-width-md);
  }

  /*! Right */
  .drawer--sidebar.drawer--right .drawer-nav {
    right: 0;
    border-left: 1px solid var(--drawer-borderColor);
  }

  .drawer--sidebar.drawer--right .drawer-contents {
    margin-right: var(--drawer-width-md);
  }

  /*! container */
  .drawer--sidebar .drawer-container {
    max-width: var(--drawer-container-maxWidth-sm);
  }
}

@media (--drawer-viewport-lg) {
  .drawer--sidebar .drawer-nav {
    width: var(--drawer-width-lg);
  }

  .drawer--sidebar.drawer--left .drawer-contents {
    margin-left: var(--drawer-width-lg);
  }

  .drawer--sidebar.drawer--right .drawer-contents {
    margin-right: var(--drawer-width-lg);
  }

  /*! container */
  .drawer--sidebar .drawer-container {
    max-width: var(--drawer-container-maxWidth-md);
  }
}