// iOS Action Menu
// --------------------------------------------------

$action-menu-ios-group-margin:             10px !default;
$action-menu-ios-background-color:         rgba(243,243,243,.95) !default;

$action-menu-ios-height:                   5.6rem !default;
$action-menu-ios-padding:                  1.8rem !default;
$action-menu-ios-border-color:             #d2d2d6 !default;
$action-menu-ios-border-radius:            1.3rem !default;

$action-menu-ios-title-color:              #5f5f5f !default;
$action-menu-ios-title-font-size:          1.2rem !default;

$action-menu-ios-button-text-color:        #007aff !default;
$action-menu-ios-button-font-size:         2rem !default;
$action-menu-ios-background-active:        #ebebeb !default;

$action-menu-ios-icon-font-size:           1.4em !default;


.action-menu[mode=ios] {
  text-align: center;

  .action-menu-container {
    padding: 0 $action-menu-ios-group-margin;
  }

  button {
    min-height: $action-menu-ios-height;
    padding: $action-menu-ios-padding;

    margin: 0;
    border: 0;

    background: transparent;

    &.activated {
      background: $action-menu-ios-background-active;
    }
  }

  .action-menu-group {
    margin-bottom: $action-menu-ios-group-margin - 2;
    border-radius: $action-menu-ios-border-radius;
  }

  .action-menu-group:last-child {
    margin-bottom: $action-menu-ios-group-margin;
  }

  .action-menu-title,
  .action-menu-option {
    min-height: $action-menu-ios-height;

    background: $action-menu-ios-background-color;
    font-weight: 400;

    border-bottom: 1px solid $action-menu-ios-border-color;
  }

  .action-menu-title {
    padding: 2rem;
    font-size: $action-menu-ios-title-font-size;
    font-weight: 500;
    color: $action-menu-ios-title-color;
    border-radius: 0;
  }

  .action-menu-option {
    font-size: $action-menu-ios-button-font-size;
    color: $action-menu-ios-button-text-color;
    border-radius: 0;
  }

  .action-menu-title:first-child,
  .action-menu-button:first-child {
    border-top-left-radius: $action-menu-ios-border-radius;
    border-top-right-radius: $action-menu-ios-border-radius;
  }

  .action-menu-title:last-child,
  .action-menu-button:last-child {
    border-bottom-left-radius: $action-menu-ios-border-radius;
    border-bottom-right-radius: $action-menu-ios-border-radius;
  }

}

.hairlines .action-menu[mode=ios] {
  .action-menu-title,
  .action-menu-option {
    border-bottom-width: 0.5px;
  }
}