.sub-nav {
  $padding-vertical: -2;
  $padding-vertical-small: -5;
  $padding-horizontal: -4;
  $margin-horizontal: -2;
  $margin-vertical: -4;
  $height-item: spacing($padding-vertical, $times: 2, $add: "#{line-height("single", $include-calc: false)}");

  position: relative;
  display: inline-flex;
  align-items: center;

  &__content {
    @include content-container;
    display: none;
    width: spacing(0, $times: 2, $add: 12rem);
    position: absolute;
    right: 0.8em;
    top: 1.7em;
    padding: spacing(-1);
    box-shadow: $shadow-style-front color("shadow");

    @include breakpoint("wide") {
      right: 0;
      top: 2.7em;
    }
  }

  &__item {
    display: block;
    white-space: nowrap;
    padding: spacing($padding-vertical-small) 0;
    margin-bottom: spacing($margin-vertical);

    &--icon {
      @include icon-style {
        margin-right: spacing(-4);
      }

      //TODO deprecate, use .icon-[icon name] class instead
      &[data-icon] {
        &::before {
          content: attr(data-icon);
        }
      }
    }

    &:hover {
      color: color("foreground-hover");
    }

    &:active {
      color: color("foreground-theme");
    }

    &:last-child {
      margin-bottom: 0;
    }
  }

  &__user {
    display: flex;
    flex-direction: column;
    line-height: 1;

    &-name {
      @include set-font(0, "single");
      margin: 0 0 spacing(-5) 0;
      font-weight: $font-weight-bold;
    }

    button {
      @include set-font(-1, "single");
      color: color("foreground-secondary");
      align-self: flex-start;
    }
  }

  hr {
    margin: spacing(-2) 0;
  }

  &--toggled {

    .nav__item {
      &::before {
        font-weight: bold;
      }
    }

    & .sub-nav__content {
      display: block;
      z-index: $z-index-navigation;
    }
  }

}