/*

#############################
### MOLECULES: nav-link #####
#############################

*/

@import '_extends.scss';
@import '_functions.scss';
@import '_mixins.scss';
@import '_variables.scss';

@import 'components/atoms/_text.scss';

.#{organism('burger-menu')} {
/* This is where the actual burger-menu starts */
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  padding: 110px 20px 80px;
  z-index: 16;
  background-color: color('white');

  @media (max-width: $minDeviceWidth) {
    padding: 37px 20px 0;

    .has-banner ~ & {
      padding: calc(37px + #{$bannerHeight}) 0 0 20px;
    }
  }

  /* The following elements are not inside the burger-menu itself */
  &-label {
    position: fixed;
    z-index: 1001;
    top: 12px;
    right: 20px;
    cursor: pointer;

    &.mainmenuopen {
      z-index: 1004;
    }

    .has-banner + & {
      top: calc(12px + #{$bannerHeight});
    }

    amp-user-notification[hidden] + .has-banner + &,
    .amp-hidden + .has-banner + & {
      top: 12px;
    }

    @media (min-width: 768px) {
      right: 30px;
    }

    @media (min-width: 1024px) {
      display: none;
    }
  }

  &-icon {
    width: 30px;
    height: 30px;
  }

  @media (min-width: 1024px) {
    display: none;
  }


  &.mainmenuopen {
    display: block;
    z-index: 1003;
  }

  &.mainmenuopen ~ .ap--main {
    max-height: calc(100vh - #{$mobileHeaderHeight});

    .has-banner + & {
      max-height: calc(100vh - #{$mobileHeaderHeight} - #{$bannerHeight});
    }
  }

  &.mainmenuopen ~ .ap--footer {
    display: none;
  }

  &-items {
    list-style: none;
    display: flex;
    flex-direction: column;
    height: 100%;
    margin: 0;
    margin-top: 1rem;
    padding: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;

    @media (max-width: $minDeviceWidth) {
      padding: 1rem 0;
    }

    /* This block defines the styles for the second level elements */
    & & {
      margin-top: 1rem;

      & .#{organism('burger-menu')}-item {
        &:last-child {
          margin-bottom: 0;
        }
      }
    }
  }

    &-item {
      margin-bottom: 1rem;
      position: relative;
      &:last-child {
        margin-top: auto;
      }
      ul {
        display: none;
      }
      &-trigger {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 36px;
        padding: 0;
        margin: 0;
        background: none transparent;
        border: none;
        cursor: pointer;
        -webkit-appearance: none;

        &:focus {
          outline: -webkit-focus-ring-color auto 5px;
        }

        &:checked {
          & ~ ul {
            display: block;
          }
          & + .nav-icon .#{atom('ico')} {
            transform: rotate(0);
          }
        }
        & + .nav-icon .#{atom('ico')} {
          display: inline-block;
          transform: rotate(-90deg);
        }
      }

      .#{atom('ico')} {
        height: 0.6em;
        margin-bottom: 0.3em;
        margin-left: 0.3em;
        width: 0.6em;
      }
    }
}
