@import '../../../mixins/scrollbar';
@import '../../../mixins/z-index';
@import '../../../global/_variables';

:host {
  .wrapper {
    height: var(--tds-header-height);
    position: relative;

    .menu {
      /** Should control only height, position, and overflow here. 
        Width and appearance are set inside nested components */
      flex-direction: column;

      @include tds-scrollbar;

      overflow-y: auto;
      max-height: calc(100vh - var(--tds-header-height));
      box-shadow: var(--tds-nav-dropdown-menu-box);
      background-color: var(--tds-header-app-launcher-menu-background);
      border-radius: 0;

      @media all and (max-width: $media-fullwidth) {
        width: 100vw;
      }
    }

    &.state-list-type-menu {
      .menu {
        height: calc(100vh - var(--tds-header-height));
      }
    }

    &.state-open {
      .button {
        position: relative;
        z-index: tds-z-index(tooltip) + 1;
      }
    }
  }
}