@import "../../themes/liberty.globals";
/**
 * @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 {
  @include margin(0);
  @include padding(0);
  position: relative;

  aside {
    @include position-horizontal(0);
    position: fixed;
    top: 0;

    width: var(--lu-side-menu-desktop-width, 448px);
    // top: 50px;
    // height: calc(100vh - 50px);
    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 {
  @include 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 {
  @include position-horizontal(100%);
  @include 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 {
    @include position-horizontal(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;
  }
}