//@import '../theme/core/spacing/vars';
@import '../../../../../grid-deprecated/vars';
@import '../../mixins/scrollbar';
@import '../../mixins/z-index';
@import '../../global/variables';

:host {
  pointer-events: none;
  display: block;
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: tds-z-index(side-menu);

  .wrapper {
    height: inherit;

    /* default slot */
    slot:not([name])::slotted(*) {
      border-bottom: 1px solid var(--tds-sidebar-side-menu-bottom-menu-border-top);
    }

    /* 'end' slot */
    ::slotted([slot='end']) {
      border-top: 1px solid var(--tds-sidebar-side-menu-bottom-menu-border-top);
    }

    .tds-side-menu-list-end {
      margin-top: 68px;
    }
  }

  .state-closed {
    display: none;
  }

  .state-open {
    slot[name='overlay']::slotted(tds-side-menu-overlay) {
      opacity: 0.4;
    }

    slot[name='close-button']::slotted(tds-side-menu-close-button) {
      opacity: 1;
    }
  }

  .state-upper-slot-empty {
    .tds-side-menu-list-upper {
      display: none;
    }

    .tds-side-menu-list-end {
      margin-top: 0;
    }

    ::slotted([slot='end']) {
      border-top: none;
      border-bottom: 1px solid var(--tds-sidebar-side-menu-bottom-menu-border-top);
    }
  }
}

@media (max-width: $grid-lg) {
  :host(.menu-opened) {
    pointer-events: auto;
    z-index: tds-z-index(side-menu);
  }
}

@media (min-width: $grid-lg) {
  :host(.menu-persistent) {
    pointer-events: auto;
    position: static;
    width: 272px;
    height: auto;
    border-right: 1px solid var(--tds-sidebar-side-menu-bottom-menu-border-top);

    .wrapper {
      slot[name='overlay']::slotted(tds-side-menu-overlay) {
        display: none;
      }

      slot[name='close-button']::slotted(tds-side-menu-close-button) {
        display: none;
      }
    }

    .menu {
      width: 272px;
    }

    .state-closed {
      display: block;
    }

    &:host(.menu-collapsed) {
      width: 69px; // 68 + 1px for border
      box-sizing: border-box;

      .menu {
        width: 68px;
      }
    }

    slot[name='end']::slotted(*) {
      display: none;
    }
  }
}

.menu {
  * {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }

  width: 80%;
  height: inherit;
  position: relative;
  left: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

@media (max-width: $media-fullwidth) {
  .menu {
    width: 100%;
  }
}

aside {
  .tds-side-menu-wrapper {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    flex-grow: 1;
    background-color: var(--tds-sidebar-side-menu-background-cover);
    @include tds-scrollbar;

    overflow-y: auto;
  }

  [role='navigation'] {
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  li {
    list-style: none;
    padding: 0;
    margin: 0;
  }
}