.account-sidemenu {
   color: $text-dark;
   text-transform: uppercase;

   ul {
      @include list-unstyled;

      border-top: 1px solid $border-color;
   }

   li {
      border-bottom: 1px solid $border-color;
      letter-spacing: .04em;
   }

   a {
      @include underline-hover;

      display: block;
      padding: $grid-gutter-width;
   }

   .active {
      color: $black;
      font-weight: $font-weight-bold;
   }

   .account-logout-link {
      position: relative;
      display: flex;
      align-items: center;
      line-height: 1;
      padding-left: calc(#{$grid-gutter-width} + 30px);

      &::before {
         @include fonticon;

         content: $icons_logout;
         font-size: 20px;
         position: absolute;
         left: $grid-gutter-width;
         color: $text-dark;
         text-decoration: none;
      }
   }

   @media screen and (max-width: $lg - 1) {
      a {
         padding: $grid-gutter-width 0;
      }

      .account-logout-link {
         padding-left: 30px;

         &::before {
            left: 0;
         }
      }
   }

   @media screen and (max-width: $md - 1) {
      margin-bottom: $spacer-xl;

      a {
         padding: .75rem;
      }

      .account-logout-link {
         padding-left: calc(.75rem + 30px);

         &::before {
            left: .75rem;
         }
      }
   }
}
