$menu-padding-right: 1rem;

$menu-color: map-get($k-colors, 'primary-3');

// We need a fixed with to position correctly '.karl-Menu__header__title'
$menu-width: 14rem;

// ARROWS
$arrowBottom-path: '~icons/arrow-bottom.svg';
$arrowTop-path: '~icons/arrow-top.svg';

// Shadow
.karl-MenuShadow {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  background-color: rgba(map-get($k-colors, 'background-3'), .8);
}

// Menu Dropdown
.karl-Menu {
  position: fixed;
  left: 0;
  z-index: 3;

  // TODO manage transition
  //transition: width 0.5s, background-color 0.5;

  &.is-opened {
    width: $menu-width;
    height: 100%;
    margin-top: 50px;

    background-color: map-get($k-colors, 'primary-2');
    overflow: scroll;

    @include k-media-xs { width: 100%; }
  }

  // This class simulates closing on the menu only on XS media query.
  &.is-clicked {
    @include k-media-xs {
      width: auto;
      height: auto;

      background-color: transparent;
    }
  }

  ul { margin: 0; padding: 0; }

  .karl-Menu__header {
    background-color: map-get($k-colors, 'primary-1');
    border: none;

    .karl-Menu__header__logo {
      fill: #fff;

      @include k-media-max('xs') {
        display: none;
      }
    }
  }

  .karl-Menu__header__button {
    background-color: $menu-color;
    border-color:  $menu-color;
    z-index: 1;

    &:hover,
    &:focus {
      background-color: $menu-color;
      border-color:  $menu-color;

      .karl-Menu__header__icon {
        fill: #fff;
      }
    }

    .karl-Menu__header__icon--closed {
      fill: #fff;
    }

    .karl-Menu__header__icon--opened {
      display: none;
    }
  }
}

.karl-Menu.is-opened {
  .karl-Menu__header__icon--closed {
    display: none;
  }

  .karl-Menu__header__icon--opened {
    display: block;
    fill: #fff;
  }
}

.karl-Menu__header__title {
  position: absolute;
  width: 100%;

  color: map-get($k-colors, 'background-1');
}

.karl-Menu__content {
  display: none;
  clear: both;

  .karl-Menu.is-opened & {
    display: block;
    top: 0;
    bottom: 0;
  }

  // This class simulates closing on the menu only on XS media query.
  .karl-Menu.is-clicked & {
    @include k-media-xs { display: none; }
  }
}

.karl-Menu__list {
  & > a {
    color: white;
    text-decoration: none;
    font-weight: 400;
  }
}

.karl-Menu__listTitle {
  display: block;
  position: relative;

  padding: 3.125rem 0 1rem 1rem;

  border-bottom: 1px solid $menu-color;

  font-size: 1.5rem;
  font-weight: 300;
  text-decoration: none;
  color: white;
}

.karl-Menu__listItem {
  position: relative;
  display: block;
  padding-right: $menu-padding-right;

  padding: 1.5rem 0 .75rem 1rem;
  padding-right: $menu-padding-right;

  border-bottom: 1px solid $menu-color;

  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: 1px;

  &.with-arrow {
    &:after {
      position: absolute;
      right: $menu-padding-right;

      content: url($arrowBottom-path);
    }

    &.is-opened {
      background-color: $menu-color;

      &:after {
        content: url($arrowTop-path);
      }
    }
  }

  &:hover,
  &:focus {
    background-color: $menu-color;
  }
}

.karl-Menu__link {
  display: block;

  border-bottom: 1px solid $menu-color;
  list-style: none;

  font-size: 0.75rem;
  font-weight: 400;
  line-height: 3.2rem;
  text-decoration: none;
}

.karl-Menu__subListItem {
  position: relative;

  padding-left: 2rem;

  color: white;

  &.with-arrow {
    &:after {
      position: absolute;
      right: $menu-padding-right;

      content: url($arrowBottom-path);
    }

    &.is-opened {
      background-color: $menu-color;

      &:after {
        content: url($arrowTop-path);
      }
    }
  }

  &:hover,
  &:focus {
    background-color: $menu-color;
  }
}

.karl-Menu__subList,
.karl-Menu__subSecondList {
  display: none;

  &.is-opened {
    display: block;
  }
}

.karl-Menu__subSecondListItem {
  padding-left: 3rem;

  color: #cadbfd;

  &:hover,
  &:focus,
  &.is-selected,
  &.is-opened {
    background-color: $menu-color;
  }
}