// Application Menu
//================================================== //
@use 'sass:color';

body.is-open-touch {
  overflow: hidden;
}

.application-menu {
  .accordion.panel {
    .accordion-header {
      &.is-selected {
        background-color: $app-menu-accordion-header-selected-bg-color !important;
        border-color: transparent;

        &.is-focused,
        &:hover {
          border-color: $app-menu-accordion-header-border-color-hover;
        }

        a > span {
          color: $app-menu-accordion-header-text-selected !important;
        }

        .icon {
          color: $app-menu-accordion-header-text-selected !important;
        }
      }
    }
  }
}

.resize-app-menu-container {
  @include css3(transform, translateZ(0));
  @include transition(left 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94),
  box-shadow 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94));

  display: flex;
  height: 100vh; // this is needed for the popupmenu to work properly

  .application-menu.is-open {
    flex-basis: 300px;
    height: 100vh !important;
    min-width: 300px;
    position: relative;

    + .resizer {
      background: $application-menu-border-color;
      cursor: col-resize;
      flex-basis: 3px;
      height: 100vh;
      left: 0;
      position: relative;
      z-index: 2;

      + .page-container {
        position: relative;
      }
    }
  }

  .resizer {
    @include css3(transform, translateZ(0));
    @include transition(left 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94),
    box-shadow 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94));

    left: -$application-menu-width;
  }

  .application-menu {
    ~ .page-container {
      right: 0;
    }
  }

  .page-container:nth-child(2) {
    margin-top: 65px;
    top: 0;
  }

  .page-container.tab-panel-container {
    margin-top: 100px;
    top: 0;
  }

  .resize-page-container {
    display: flex;
    flex-direction: column;

    .page-container.scrollable {
      @include transition(height 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94),
      margin 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94),
      left 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94),
      width 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94));

      right: 0;
    }

    .page-container:last-child {
      height: calc(100% - 60px);
    }
  }
}

.application-menu {
  @include css3(transform, translateZ(0));
  @include transition(left 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94),
  box-shadow 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94));

  background-color: $ids-color-palette-slate-80;
  border-right: 1px solid $application-menu-border-color;
  bottom: 0;
  color: $ids-color-palette-white;
  display: flex;
  flex-direction: column;
  height: 100%;
  left: -$application-menu-width;
  overflow-x: hidden;
  overflow-y: auto;
  position: fixed;
  width: $application-menu-width;
  z-index: 500;

  &.is-open {
    left: 0;
  }

  &.has-open-switcher {
    overflow-y: hidden;
  }

  .audible {
    color: $ids-color-palette-white !important;
  }

  &.show-shadow.is-open {
    @include drawer-box-shadow;
  }

  // Add animation to the page container when Nav is in use
  + .page-container {
    @include transition(height 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94),
    margin 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94),
    left 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94),
    width 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94));

    right: 0;
  }

  .searchfield-wrapper + .accordion {
    min-height: calc(100% - 36px);
  }

  .accordion {
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
    flex: 0 0 auto;
    margin-bottom: calc(-2rem - 38px);
    margin-left: 1px;
    min-height: 100%;
    width: calc(100% - 1px);

    &::after {
      clear: both;
      content: '';
      display: table;
    }

    .accordion-content {
      .content {
        display: inline-block;
        max-width: calc(100% - 46px);
      }
    }

    .panel {
      padding-left: 49px;

      > * {
        vertical-align: middle;
      }

      &.logout {
        .icon.avatar {
          border-radius: 24px;
          height: 48px;
          vertical-align: top;
          width: 48px;
        }

        .content {
          font-size: $ids-size-font-base;
          max-width: calc(100% - 52px);
          padding-left: 0.5em;

          > * {
            display: block;
            line-height: 1.5em;
          }

          > .name {
            @include font-size(20);
          }
        }

        span {
          display: inline-block;
        }
      }
    }
  }

  .searchfield-wrapper {
    background-color: $accordion-inverse-pane-bg-color;
    border-bottom-color: $ids-color-palette-slate-90 !important;
    margin-bottom: 0;
    width: 100%;

    .icon {
      @include transition(fill 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94));

      color: color.adjust($application-menu-trigger-icon-fill-color, $lightness: 20%);

      &:not(.close) {
        left: 18px;
      }
    }

    button.close {
      align-items: center;
      justify-content: center;
      top: 5px;

      &:focus:not(.hide-focus) {
        box-shadow: 0 0 0 1px $body-color-primary-background, 0 0 0 2px transparent, 0 0 4px 3px rgba(33, 34, 36, 0.3);

        .icon {
          color: $ids-color-palette-white;
        }
      }

      &:not(.is-empty) {
        display: flex;
      }
    }

    &.has-go-button {
      .icon {
        &.close {
          right: 45px;
        }
      }
    }

    &.is-hovered {
      .searchfield {
        border-left-color: transparent;
      }

      .searchfield-category-button {
        border-color: transparent;
      }
    }

    &.active,
    &.is-hovered.active {
      .searchfield,
      .searchfield-category-button {
        border-color: transparent;
        color: $application-menu-searchfield-text-active-color;
      }

      .icon {
        color: $application-menu-searchfield-icon-active-color;
      }
    }

    &.has-categories.show-category {
      .searchfield {
        border-left-color: $application-menu-border-color;
      }

      &.is-hovered {
        .searchfield {
          border-left-color: $application-menu-border-color;
        }
      }
    }

    &.has-focus {
      box-shadow: none !important;
    }

    .searchfield {
      padding-left: 39px;
      padding-right: 34px;
    }

    .icon:not(.close):not(.icon-error) {
      left: 18px;
    }
  }

  .searchfield,
  .searchfield-category-button {
    @include transition(
      color 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94),
      background-color 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94)
    );

    background-color: transparent;
    border-color: transparent;
  }

  .go-button {
    margin: 0;
  }

  .searchfield {
    color: $application-menu-searchfield-text-color;
    display: block;

    &::placeholder {
      color: $application-menu-searchfield-placeholder-color;
    }

    &::-webkit-input-placeholder {
      color: $application-menu-searchfield-placeholder-color;
    }

    &::-moz-placeholder {
      color: $application-menu-searchfield-placeholder-color;
      opacity: 1;
    }

    &:-ms-input-placeholder {
      color: $application-menu-searchfield-placeholder-color;
    }
  }

  .accordion-static-panel {
    background-color: $accordion-static-panel-bg-color;
    border-bottom-color: $ids-color-palette-slate-90 !important;
    margin: 0 auto;
    min-height: 85px;
    padding: 10px 0 10px 30px;

    .name {
      display: block;
      font-size: $ids-size-font-lg;
      line-height: 1.5em;
      padding: 15px 10px 10px;
      position: relative;
    }

    .btn-menu {
      margin-top: -5px;
      text-align: left;

      span {
        color: inherit;
        display: inline-block;
        max-width: 168px;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }

  .icon.avatar {
    border-radius: 20px;
    background-color: $ids-color-palette-slate-50;
    min-width: 40px;
    min-height: 40px;
    max-width: 40px;
    max-height: 40px;
    height: 40px;
    top: 3px;
    vertical-align: top;
    width: 40px;
  }

  .icon.avatar.l-center {
    top: 5px;
    vertical-align: middle;
  }

  .expandable-area {
    display: inline-block;
    vertical-align: middle;
  }

  .accordion-content {
    h1,
    h2,
    h3,
    h4,
    p {
      color: $ids-color-palette-slate-10;
    }
  }

  .accordion::after,
  .branding {
    height: calc(2rem + 38px);
  }

  .branding {
    padding: 1rem 0 0 1rem;

    .icon {
      height: 34px;
      margin-top: 1px;
      width: 34px;
    }
  }

  .hyperlink {
    color: $accordion-inverse-text-color;

    &:hover:not([disabled]) {
      color: $accordion-inverse-text-hover-color;
    }
  }

  // Fixed header and foot areas
  .application-menu-content {
    flex: 1 1 auto;
  }

  .application-menu-header,
  .application-menu-footer {
    background-color: $ids-color-palette-slate-70;
    border-bottom-color: $ids-color-palette-slate-90 !important;
    flex: 0 0 auto;
    padding: 10px 0 10px 20px;

    button {
      margin: 5px 15px;

      &:first-child {
        margin: 5px 0;
      }

      span {
        color: $accordion-inverse-text-color;
      }

      .icon {
        color: $accordion-inverse-text-color;
      }

      &:not(:disabled):hover .icon,
      &:not(:disabled):hover span {
        color: $accordion-inverse-text-hover-color !important;
      }
    }
  }

  .application-menu-header {
    padding-top: 15px;

    .name,
    .name-xl {
      display: block;
      font-size: $ids-size-font-lg;
      line-height: 1.5em;
      padding: 15px 10px 10px;
      position: relative;
    }

    .name-xl {
      font-size: $ids-size-font-xl;
      line-height: normal;
      padding-left: 0;
      padding-top: 2.5rem;
    }

    .content {
      display: inline-block;
      max-width: calc(100% - 46px);
    }
  }

  .application-menu-footer {
    border-bottom-color: $ids-color-palette-slate-70 !important;
    border-top-color: $ids-color-palette-slate-90 !important;

    .hyperlink {
      margin-left: 5px;
      position: relative;
      top: -4px;
    }

    .application-menu-toolbar {
      button {
        &:first-child {
          margin: 5px -3px;
        }
      }
    }
  }

  .application-menu-toolbar {
    margin-left: -10px;
    margin-top: -5px;
    margin-bottom: -3px;
  }

  .application-menu-switcher-panel {
    background-color: $ids-color-palette-slate-80;
    border-top: 1px solid $application-menu-border-color;
    height: 100%;
    left: 0;
    position: absolute;
    top: 70px;
    width: 100%;
    z-index: 501;

    .content {
      max-width: 100%;
      overflow-y: auto;
      padding: 0 !important;
      width: 100%;
    }
  }

  .accordion-heading {
    border-top: 1px solid $application-menu-border-color;
    color: $ids-color-palette-white;
    font-size: $ids-size-font-sm;
    font-weight: 400;
    opacity: 0.9;
    padding-bottom: 5px;
    padding-left: 20px;
    padding-top: 15px;
    text-transform: uppercase;
  }

  .application-menu-switcher-trigger {
    float: right;
    height: auto;
    margin-left: 0 !important;
    max-width: 78%;
    min-height: 34px;
    white-space: normal;
    z-index: 1;

    > * {
      vertical-align: top;
    }

    span {
      display: inline-block;
      max-width: 85%;
      padding-top: 1px;
      text-align: right;
    }
  }

  &.has-menu-footer {
    .accordion,
    .searchfield-wrapper + .accordion {
      min-height: auto;
    }
  }
}

// Mobile viewport 767px below
@include respond-to(phone) {
  .application-menu {
    z-index: 7001;
  }
}

// Container Class for wrapping internal content in NG
.application-menu-wrapper {
  display: inherit;
  flex-direction: inherit;
  height: inherit;
}

// Ie11
.ie11 {
  .application-menu {
    &.has-menu-footer {
      &.has-scrollbar {
        overflow-y: scroll;
      }
    }
  }
}

// Generic CSS Class that allows block-level elements like "divs" to become "clickable" on iOS 8 and up
// https://stackoverflow.com/questions/3705937/document-click-not-working-correctly-on-iphone-jquery
.ios-click-target {
  cursor: pointer;
}

// Firefox
.is-firefox {
  &.is-mac {
    .application-menu {
      .application-menu-switcher-trigger {
        padding-top: 8px;

        span {
          padding-top: 2px;
        }

        .icon {
          padding-top: 0;
        }
      }
    }
  }

  .application-menu {
    .application-menu-switcher-trigger {
      span {
        padding-top: 0;
      }

      .icon {
        padding-top: 1px;
      }
    }
  }
}

// Right-to-Left Styles
html[dir='rtl'] {
  .application-menu {
    @include transition(right 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94),
    box-shadow 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94));

    background-color: $ids-color-palette-slate-80;
    border-left: 1px solid $application-menu-border-color;
    border-right: 0;
    left: unset;
    right: -$application-menu-width;

    &.is-open {
      left: unset;
      right: 0;
    }

    .searchfield-wrapper {
      .icon {
        &:not(.close) {
          left: auto;
          right: 18px;
        }
      }

      .searchfield {
        padding-left: 34px;
        padding-right: 53px;
      }
    }

    .accordion {
      margin-left: 0;
      margin-right: 1px;

      .panel.logout .content {
        padding-left: 0;
        padding-right: 0.5em;
      }
    }

    .branding {
      padding: 1rem 1rem 0 0;
    }

    + .page-container {
      left: 0;
      right: unset;
    }

    .btn-menu {
      left: inherit;
      right: 43px;
    }
  }

  &.ie11 {
    .application-menu {
      + .page-container {
        right: auto;
      }
    }
  }
}

// On large + extra-large breakpoints, the .page-content element will shift to the left while the menu is open
@media (min-width: $breakpoint-phone-to-tablet) {
  .application-menu {
    + .page-container {
      @include css3(transform, none);

      left: 0;
      margin: 0 0 0 auto;
      width: 100%;

      //Effects menu calculation
      //@include css3(transform, translateZ(0));
    }

    &.is-open {
      @include css3(box-shadow, none);

      + .page-container {
        left: 300px;
        margin: 0;
        width: calc(100% - 300px);

        &.scrollable {
          right: 0;
        }
      }
    }
  }

  html[dir='rtl'] {
    .application-menu.is-open + .page-container.scrollable {
      right: auto;
    }
  }
}

html[dir='rtl'] .application-menu .searchfield-wrapper.has-close-icon-button.has-text .btn-icon.close {
  right: calc(300px - 34px);
  top: 6px !important;
}

.application-menu .btn-icon:hover:not([disabled]):not(.btn-primary):not(.trigger) svg.icon {
  color: #fff;
}

html[dir='rtl'] .application-menu .hyperlink {
  margin-right: 10px;
}

.application-menu .application-menu-toolbar .toolbar-section {
  display: flex;
  justify-content: center;
}

.application-menu .accordion.panel.inverse .accordion-header .btn:hover,
.application-menu .accordion.panel.inverse .accordion-header .btn-expander:hover {
  background-color: transparent !important;
  color: #fff !important;
}

.accordion.panel.inverse .accordion-header:hover .icon {
  color: #fff !important;
}

.application-menu .btn-icon.close:hover:not([disabled]) {
  background-color: transparent !important;
}

.application-menu .btn:hover:not([disabled]) {
  background-color: rgba(255, 255, 255, .1) !important;
}

.application-menu .btn-icon:hover:not([disabled]) {
  background-color: rgba(255, 255, 255, .1) !important;
}

.application-menu .btn-menu {
  span {
    position: relative;
    top: 1px;
  }

  .icon-dropdown {
    position: relative;
    top: 1px;
  }
}

.application-menu  .btn-menu:hover:not([disabled]) {
  background-color: rgba(255, 255, 255, .1) !important;
  color: #fff !important;

  .icon-dropdown {
    color: #fff !important;
  }
}