@import 'position';

.fws-menu {
  backface-visibility: hidden;
  background: $teal;
  color: $white;
  height: 100%;
  transform: translateY(-100%) translateZ(0);
  transition: all $transition-duration;
  visibility: hidden;
  width: 100%;
  z-index: 1;

  a,
  li {
    height: 50px;
    line-height: 50px;
  }

  a:focus {
    background: lighten($teal, 10);
    outline: none;
  }

  &.fws-menu-active {
    transform: translateY(0);
    transition: all $transition-duration;
    visibility: visible;
  }

  @media (min-width: $break-lg) {
    width: $docked-width;
  }
}

.sub-menu {
  position: relative;

  @media (min-width: $break-lg) {
    box-shadow: -2px 0 3px 0 $dark-grey;
    margin-top: 0;
    z-index: 10;
  }
}

.fws-menu-content,
.fws-menu-content ul {
  height: 100%;
  padding-left: 0;
  padding-top: 50px;
  position: absolute;
  top: 0;
  transition: all $transition-duration;
  width: 100%;

  a {
    color: $white;
    display: block;
    overflow: hidden;
    padding: 0 40px;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;

    &:hover {
      background: lighten($teal, 10);
    }
  }

  li {
    color: $teal;
    text-align: left;
  }

  &.menu-hidden {
    opacity: 0;

    .back-block {
      display: none;
    }
  }

  &.move-out {
    > li > a {
      transform: translateX(-100%);
    }
  }

  @media (min-width: $break-lg) {
    background: $teal;
    margin-top: 0;

    li {
      color: $white;
    }

    &.move-out {
      background: darken($teal, 5);

      > li > a {
        transform: none;
      }
    }
  }
}

.menu-back {
  background: $teal;
  border: none;
  color: white;
  display: block;
  font-size: 16px;
  height: 100%;
  padding: 0 50px;
  position: relative;
  text-align: left;
  top: -50px;
  width: 100%;

  &:focus {
    background: lighten($teal, 10);
  }
}

ul .back-block {
  display: none;

  @media (min-width: $break-lg) {
    display: block;
    height: 100%;
    opacity: 0;
    position: absolute;
    top: 0;
    width: 50px;
  }
}

.has-children > a,
.menu-back {
  position: relative;
}

.has-children > a::after {
  content: '\E5CC'; // Right Chevron
  font-family: 'Material Icons';
  font-size: 1.4em;
  position: absolute;
  right: 20px;
}

.menu-back {

  &::before {
    content: '\E5CB'; // Left Chevron
    font-family: 'Material Icons';
    font-size: 1.4em;
    left: 20px;
    position: absolute;
  }
}

// A list item automatically generated by the script for each sub-menu
// who's sole purpose is to be a click target to close nav
.back-block {
  display: none;

  @media (min-width: $break-lg) {
    display: block;
    height: 100%;
    opacity: 0;
    position: absolute;
    top: 0;
    width: 50px;

    &:focus {
      background: lighten($teal, 10);
    }
  }
}

.fws-menu-close {
  background: $teal;
  border: none;
  border-radius: 5px;
  color: white;
  cursor: pointer;
  font-size: 35px;
  height: 40px;
  line-height: 30px;
  padding: 0;
  position: absolute;
  top: 3px;
  width: 40px;
  z-index: 1000;

  &:hover {
    background: darken($teal, 5);
  }
}