// Material Design Action Menu
// --------------------------------------------------

$action-menu-md-background-color:         #fafafa !default;

$action-menu-md-height:                   4.8rem !default;

$action-menu-md-title-color:              #757575 !default;
$action-menu-md-title-font-size:          1.6rem !default;
$action-menu-md-title-padding:            1.9rem 1.6rem 1.7rem !default;

$action-menu-md-button-text-color:        #222 !default;
$action-menu-md-button-font-size:         1.6rem !default;
$action-menu-md-background-active:        #f1f1f1 !default;

$action-menu-md-icon-font-size:           2.4rem !default;
$action-menu-md-icon-margin:              0 28px 0 0 !default;


ion-action-menu[mode=md] {
  margin: 0;

  .action-menu-container {
    margin: 0;
  }

  .action-menu-title,
  .action-menu-option,
  .action-menu-destructive,
  .action-menu-cancel button {
    text-align: left;
    border-color: transparent;
    font-size: $action-menu-md-button-font-size;
    color: $action-menu-md-button-text-color;
    box-shadow: none;
    text-transform: none;

    .icon {
      display: inline-block;
      margin: $action-menu-md-icon-margin;
      min-width: 24px;
      text-align: center;
      vertical-align: middle;
      font-size: $action-menu-md-icon-font-size;
    }
  }

  .action-menu-title {
    padding: $action-menu-md-title-padding;
    font-size: $action-menu-md-title-font-size;
    color: $action-menu-md-title-color;
  }

  button {
    font-weight: normal;
    min-height: $action-menu-md-height;

    &.activated {
      background: $action-menu-md-background-active;
      border-radius: 0;
    }
  }

  .action-menu-group {
    margin: 0;
    border-radius: 0;
    background-color: $action-menu-md-background-color;

    &:last-child button {
      margin-bottom: 8px;
    }
  }

  .action-menu-cancel {
    background-color: $action-menu-md-background-color;
    width: auto;
    border: none;
  }

}