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

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

$action-sheet-wp-text-align:                      left !default;
$action-sheet-wp-background:                      #fff !default;
$action-sheet-wp-box-shadow-color:                rgba(0, 0, 0, .2) !default;
$action-sheet-wp-box-shadow:                      0 -1px 0 $action-sheet-wp-box-shadow-color !default;
$action-sheet-wp-group-margin-bottom:             8px !default;

$action-sheet-wp-title-padding:                   19px 16px 17px !default;
$action-sheet-wp-title-font-size:                 2rem !default;
$action-sheet-wp-title-color:                     #4d4d4d !default;
$action-sheet-wp-title-text-align:                $action-sheet-wp-text-align !default;

$action-sheet-wp-button-height:                   4.8rem !default;
$action-sheet-wp-button-text-color:               #4d4d4d !default;
$action-sheet-wp-button-font-size:                1.5rem !default;
$action-sheet-wp-button-padding:                  0 16px !default;
$action-sheet-wp-button-text-align:               $action-sheet-wp-text-align !default;
$action-sheet-wp-button-background:               transparent !default;
$action-sheet-wp-button-background-activated:     $list-wp-activated-background-color !default;

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


.action-sheet-wrapper {
  box-shadow: $action-sheet-wp-box-shadow;
}

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

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

.action-sheet-button {
  padding: $action-sheet-wp-button-padding;

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

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

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

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

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

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

.action-sheet-group {
  background: $action-sheet-wp-background;

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

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

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

.action-sheet-cancel {
  background: $action-sheet-wp-button-background;
}