.account-menu.menu {

  @include breakpoint(small only) {
    margin-top: calc($line-height / 2);

    &,
    .menu {
      border-bottom: 1px solid $border;
      margin-bottom: $line-height;
      padding-bottom: $line-height;
    }
  }

  .is-dropdown-submenu {
    @extend %body-colors;
    margin: 0;
    margin-top: rem-calc(-12);
    padding: 0;
    z-index: 9;
  }

  .is-submenu-item {
    display: block;
    margin-bottom: 0;
  }

  li {
    display: block;
    width: 100%;

    @include breakpoint(medium) {
      width: auto;
    }

    a {
      color: inherit;
      line-height: inherit;
      padding-left: 0;

      @include breakpoint(medium) {
        font-size: $small-font-size;
        padding: rem-calc(8) rem-calc(16);
      }
    }

    .button {
      background: none;
      text-align: left;

      @include breakpoint(medium) {
        @include brand-color;
        background: $body-background;
        text-align: center;
      }
    }
  }

  .has-submenu {

    &.is-active a {
      font-weight: bold;
    }
  }
}