HBM/md-components

/**
 * http://www.google.com/design/spec/components/menus.html#menus-specs
 */

$padding: 16px;
$item-height-mobile: 48px;
$item-height: 32px;
$item-padding-mobile: 16px;
$item-padding: 24px;

.mdc-Menu {
  position: relative;
  font-size: 13px;
  display: inline-block;
}

.mdc-Menu-list {
  margin: 0;
  padding: 0;
  z-index: 1;
  position: absolute;
  background: #fff;
  border-radius: 2px;
  box-shadow: 0 2px 40px rgba(0, 0, 0, 0.4);
  overflow: hidden;
  will-change: transform;
  transform: scale(0);

  @include medium {
    padding-top: $padding;
    padding-bottom: $padding;
  }
}

.mdc-Menu-list.is-visible {
  transition: transform 400ms ease-out;
  transform: scale(1);
}

.mdc-Menu-list-item {
  color: #333;
  display: block;
  white-space: nowrap;
  will-change: opacity;
  opacity: 0;
}

.mdc-Menu-list-item.is-visible {
  transition: opacity 400ms ease-out;
  opacity: 1;
}

/**
 * Menu-list-item-link is of type <a href="#" ...>...</a>
 */
.mdc-Menu-list-item-link {
  text-decoration: none;
  color: initial;
  height: $item-height-mobile;
  padding: 0 $item-padding-mobile;
  display: flex;
  align-items: center;

  @include medium {
    height: $item-height;
    padding-left: $item-padding;
    padding-right: $item-padding;
  }
}

.mdc-Menu-list-item-link:hover {
  background-color: rgba(0, 0, 0, 0.025);
}

.mdc-Menu-divider {
  height: 1px;
  margin: 7px 0;
  background-color: rgba(0, 0, 0, 0.12);
}

.mdc-Menu-icon {
  display: inline-block;
  margin-right: 16px;
  min-width: 24px;
}