@import "../../globals.md";
@import "./action-sheet";

// Material Design Action Sheet
// --------------------------------------------------

$action-sheet-md-text-align:                            left !default;
$action-sheet-md-background:                            #fafafa !default;
$action-sheet-md-group-margin-bottom:                   8px !default;

$action-sheet-md-title-color:                           #757575 !default;
$action-sheet-md-title-font-size:                       1.6rem !default;
$action-sheet-md-title-padding:                         19px 16px 17px !default;

$action-sheet-md-button-min-height:                     4.8rem !default;
$action-sheet-md-button-text-color:                     #222 !default;
$action-sheet-md-button-font-size:                      1.6rem !default;
$action-sheet-md-button-padding:                        0 16px !default;
$action-sheet-md-button-background:                     transparent !default;
$action-sheet-md-button-background-activated:           #f1f1f1 !default;

$action-sheet-md-icon-font-size:                        2.4rem !default;
$action-sheet-md-icon-min-width:                        24px !default;
$action-sheet-md-icon-text-align:                       center !default;
$action-sheet-md-icon-vertical-align:                   middle !default;
$action-sheet-md-icon-margin:                           0 28px 0 0 !default;


.action-sheet-title {
  padding: $action-sheet-md-title-padding;

  font-size: $action-sheet-md-title-font-size;
  text-align: $action-sheet-md-text-align;
  color: $action-sheet-md-title-color;
}

.action-sheet-button {
  position: relative;
  overflow: hidden;

  padding: $action-sheet-md-button-padding;

  min-height: $action-sheet-md-button-min-height;

  font-size: $action-sheet-md-button-font-size;
  text-align: $action-sheet-md-text-align;
  color: $action-sheet-md-button-text-color;
  background: $action-sheet-md-button-background;

  &.activated {
    background: $action-sheet-md-button-background-activated;
  }
}

.action-sheet-icon {
  margin: $action-sheet-md-icon-margin;

  min-width: $action-sheet-md-icon-min-width;

  font-size: $action-sheet-md-icon-font-size;
  text-align: $action-sheet-md-icon-text-align;
  vertical-align: $action-sheet-md-icon-vertical-align;
}

.action-sheet-group {
  overflow: hidden;

  background: $action-sheet-md-background;

  &:last-child .action-sheet-button {
    margin-bottom: $action-sheet-md-group-margin-bottom;
  }

  .button-inner {
    justify-content: flex-start;
  }
}

.action-sheet-selected {
  font-weight: bold;
}