.menu-arrow {
  position: relative;
  padding-right: 1em;

  &:after {
    content: '';
    position: absolute;
    display: inline-block;
    width: .5em;
    height: .5em;
    border: solid $gray;
    border-width: 0 1px 1px 0;
    bottom: .5em;
    right: .1em;
    transform: rotate(45deg);
    transition: transform .5s .5s;
  }

  &.top:after {
    transform: rotate(-133deg);
  }
}