// *************************************
//
//   Menu
//   -> Menus in Navbar
//
// -------------------------------------
//   Template (Haml)
// -------------------------------------
//
// .menu
//   .menu-item[.menu-item-icon]
//     a
//
// *************************************

.menu {
  list-style: none;
  margin: 0;
  padding: 0;

  a {
    border: 0;
    color: $c-links;
    font-family: $base-font-family-heading;
    outline: none;
    text-transform: uppercase;

    &:hover {
      color: $c-highlight;
    }
  }

  .menu-item {
    border: 0;
    display: none;
    float: left;
    margin: 0;
    position: relative;

    > a {
      display: block;
      font-size: 12px;
      height: 51px;
      letter-spacing: 1px;
      line-height: 51px;
      padding: 0 24px;
    }

    &--settings,
    &--preview {
      display: block;
    }

    &--save-to,
    &--import-from,
    &--link-unlink,
    &--documents {
      &.in-sidebar {
        display: block;
      }
    }

    &--documents {
      padding-bottom: 1rem;
    }

    @include from('tablet') {
      &--save-to,
      &--import-from {
        display: block;
      }

      &--preview {
        display: none;
      }

      &--save-to,
      &--import-from {
        &.in-sidebar {
          display: none;
        }
      }
    }

    @include from('desktop') {
      &--export-as {
        display: block;
      }

      &--preview {
        display: none;
      }
    }

    &.open {
      > a {
        background-color: $c-background-highlight;
      }
    }

    &-icon {

      > a {
        height: auto;
        padding: 0;
      }

      &:hover {
        > a {
          background-color: transparent;
        }
      }
    }
  }

  .menu-link {
    &.open {
      i {
        background-color: $c-background-highlight;
      }

      g {
        fill: $c-highlight;
      }
    }

    &-preview {
      margin-top: 8px;
      width: 51px;
    }

    &-settings {
      margin-top: 8px;
      width: 51px;
    }
  }

  &-sidebar {
    width: 100%;

    .menu-item {
      float: none;
      margin-bottom: 1px;
      width: 100%;

      &.open {
        > a {
          background-color: $c-text;
        }
      }
    }

    .open {
      .caret {
        transform: rotate(180deg);
      }
    }

    > .menu-item:hover {

      .dropdown a {
        background-color: transparent;
      }
    }

    .menu-link {
      background-color: $c-text;
      font-weight: 600;
      @include clearfix;

      > span {
        float: left;
      }

      > .caret {
        float: right;
        text-align: right;
        top: 22px;
      }
    }

    .dropdown {
      background-color: transparent;
      position: static;
      width: 100%;
    }
  }

}