/**
 * @prop --lu-side-menu-desktop-width: width of side menu on desktop
 * @prop --lu-side-menu-mobile-width: width of side menu on mobile
 */
:host {
  margin: 0;
  padding: 0;
  position: relative;
}
:host aside {
  left: 0;
  position: fixed;
  top: 0;
  width: var(--lu-side-menu-desktop-width, 448px);
  height: 100vh;
  transform: translate3d(-486px, 0, 0);
  transition: transform 0.25s ease-out;
  border-right: 1px solid #F1F1F1;
  background: white;
  box-shadow: none;
  z-index: 2;
  will-change: transform;
}

:host([data-is-visible]) aside {
  transform: translate3d(0, 0, 0);
  transition: transform 0.25s ease-in;
}

:host([data-has-box-shadow]) aside {
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.3);
}

:host([data-is-collapsible]) .collapse-button {
  display: block;
}

:host([data-is-collapsed]) aside {
  transform: translate3d(-448px, 0, 0);
  transition: transform 0.25s ease-in;
  box-shadow: none;
}

header {
  padding: 0 20px;
  display: flex;
  position: relative;
  flex: 1 1 auto;
  align-items: center;
  justify-content: space-between;
  background-color: #1a2b57;
  color: white;
}

/**
 * @prop --side-menu-button-top: how far down does the collapse button go
 * @prop --side-menu-button-padding-top: collapse button padding
 * @prop --side-menu-button-padding-end: collapse button padding
 * @prop --side-menu-button-padding-bottom: collapse button padding
 * @prop --side-menu-button-padding-start: collapse button padding
 * @prop --side-menu-button-color: color of side menu button
 * @prop --side-menu-button-border-color: color of side menu button border
 * @prop --side-menu-button-font-size: controls size of icon
 */
.collapse-button {
  left: 100%;
  padding: var(--side-menu-button-padding-top, 14px) var(--side-menu-button-padding-end, 8px) var(--side-menu-button-padding-bottom, 10px) var(--side-menu-button-padding-start, 8px);
  display: none;
  position: absolute;
  top: var(--side-menu-button-top, 68px);
  border: 1px solid var(--side-menu-button-border-color, #F1F1F1);
  background: white;
  color: var(--side-menu-button-color, #333333);
  font-size: var(--side-menu-button-font-size, 17px);
  cursor: pointer;
  z-index: 3;
}

@media (max-width: 680px) {
  :host aside {
    width: var(--lu-side-menu-mobile-width, 75%);
    transform: translate3d(-125%, 0, 0);
  }

  :host([data-is-visible]) aside {
    transform: translate3d(0, 0, 0);
  }

  :host([data-is-collapsed]) aside {
    transform: translate3d(-125%, 0, 0);
  }

  .backdrop {
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    height: 100vh;
    transition: opacity 0.25s ease-out;
    background: #333333;
    opacity: 0;
    z-index: 1;
    pointer-events: none;
  }

  :host([data-is-visible]) .backdrop {
    opacity: 0.6;
    pointer-events: all;
  }

  :host([data-is-collapsible]) .collapse-button {
    display: none;
  }
}