@import "../../../themes/ionic.globals";

// Action Sheet
// --------------------------------------------------

/// @prop - Width of the action sheet
$action-sheet-width: 100% !default;

/// @prop - Maximum width of the action sheet
$action-sheet-max-width: 500px !default;

.ion-action-sheet {
  position: fixed;
  z-index: $z-index-overlay + $z-index-overlay-sheet;
  display: block;
  width: $action-sheet-width;
  height: $action-sheet-width;
  
  @include position(0, null, null, 0);
}

.action-sheet-wrapper {
  position: absolute;
  z-index: $z-index-overlay-wrapper;
  display: block;
  width: $action-sheet-width;
  max-width: $action-sheet-max-width;
  pointer-events: none;
  transition: all cubic-bezier(0.36, 0.66, 0.04, 1) 400ms;
  
  @include position(null, 0, 0, 0);
  @include margin(auto);
}

.action-sheet-button {
  width: $action-sheet-width;
}

.action-sheet-container {
  display: flex;
  height: 100%;
  max-height: 100%;
  flex-flow: column;
  justify-content: flex-end;
}

.action-sheet-group {
  overflow: scroll;
  pointer-events: all;
  flex-shrink: 2;
  
  .action-sheet-buttons {
    position: relative;
    z-index: 1;
    max-height: 265px;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
  }
}

.action-sheet-group-cancel {
  overflow: hidden;
  flex-shrink: 0;
}