.dropdown {
  position: relative;

  & > a {
    &::after {
      @include icon-font();

      content: "\e900";
      line-height: 0;
    }
  }

  .dropdown-menu,
  .user-menu {
    @include transition (all 0.2s ease-in-out);

    position: absolute;
    text-align: left;
    z-index: 9;
    background-color: $primary-colour;
    color: #fff;
    padding-top: $base-spacing /2;
    padding-bottom: $base-spacing /2;
    box-sizing: border-box;
    display: none;

    &.show-menu {
      display: block;
    }
  }

  .dropdown-menu {
    top: 2em;

    li {
      display: block;
      padding: 0;

      @media (min-width: $screen-md-min) {
        white-space: nowrap;
      }

      a {
        padding: $base-spacing /2 $base-spacing;
        border-bottom: solid 1px lighten($primary-colour, 5%);
        border-top: none;
        display: block;
        border-left: none;
        border-right: none;
        color: inherit;

        &:hover {
          background-color: rgba(#fff, 0.2);
        }
      }
    }
  }

  .user-menu {
    left: auto;
    float: none;
    $menu-height: 6em;

    top: 1.5em;
    right: 0;
    min-width: $menu-height * 1.6;
    padding: $base-spacing /2;
    background-repeat: no-repeat;
    background-position: - $menu-height center;
    background-size: $menu-height auto;
    background-color: darken($grey, 2);
    border-right: solid 3px $primary-colour;

    @media (min-width: $screen-md-min) {
      background-position: left center;
      min-width: $menu-height + ($menu-height * 1.6);
      padding-left: $menu-height + ($base-spacing /2);
      height: $menu-height;
    }

    li {
      display: block;
      font-size: 0.8em;
      line-height: 1.1;

      &.name {
        font-size: 1.2em;
        font-weight: 600;
        padding-bottom: 0.05em;
      }

      &.packages {
        padding-top: 0.5em;

        span {
          display: inline-block;
          background-color: #fff;
          color: darken($grey, 2);
          padding-left: 0.2em;
          padding-right: 0.2em;
        }
      }

      &.logout {
        a {
          background-color: $primary-colour;
          padding: 3px 4px 1px 5px;
          margin: 0;
          white-space: nowrap;
          text-transform: none;

          @include transition (all 0.5s ease-in-out);

          box-sizing: border-box;
          margin-top: 0.5em;
          color: #fff;

          &::before {
            content: "\e908";
          }
        }

        @media (min-width: $screen-md-min) {
          position: absolute;
          top: 0;
          left: 0;

          a {
            width: 20px;
            overflow: hidden;
            margin-top: 0;

            &:hover {
              width: 5.5em;
            }
          }
        }
      }
    }
  }
}

.main-nav {
  padding: $base-spacing/2 0 0 0;
  margin: 0;
  clear: both;
  margin-left: -0.4em;

  a {
    text-decoration: none;
  }

  $highlight-height: 8px;

  li {
    list-style: none;

    a {
      display: block;
      font-size: 1.4rem;
      padding: $base-spacing /2;
      border-bottom-width: 1px;
      border-style: solid;
      color: #fff;
      border-color: $grey;
    }
  }

  @media (min-width: $screen-md-min) {
    position: static;
    width: auto;
    background: transparent;
    text-align: left;
    padding-bottom: $highlight-height;

    li {
      display: table-cell;
      vertical-align: middle;
      padding-right: $base-spacing;

      a {
        display: inline-block;
        font-size: 1.5rem;
        padding: 0.4em 0.2em;
        border-bottom: none;

        @include transition(all 0.2s);

        color: lighten($grey, 50%);

        .no-touch &:hover {
          color: #fff;
        }
      }

      &.selected a,
      a.selected {
        color: #fff;
        box-shadow: 0 ($highlight-height + 2px) 0 #fff;
      }
    }
  }
}

.secondary-nav {
  position: absolute;
  top: 0.9em;
  right: 1em;
  z-index: 2;

  a {
    text-decoration: none;
  }

  li {
    display: inline-block;

    a {
      font-size: 1.3rem;
      text-transform: uppercase;
      display: block;
      margin-left: $base-spacing;
    }

    & > a {
      padding: 0.5em;
      line-height: 1;
    }
  }
}