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

$button-font-size:                1.6rem !default;
$button-margin:                   0.4rem 0.2rem !default;
$button-padding:                  0 1em !default;
$button-height:                   2.8em !default;
$button-border-radius:            4px !default;

$button-round-padding:            0 2.6rem !default;
$button-round-border-radius:      64px !default;

$button-color:                    color(primary) !default;
$button-color-activated:          color-shade($button-color) !default;
$button-text-color:               inverse($button-color) !default;
$button-hover-opacity:            0.8 !default;


button,
[button] {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: center;
  line-height: 1;


  font-size: $button-font-size;
  font-family: inherit;
  font-variant: inherit;
  font-style: inherit;

  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;

  text-align: center;
  text-transform: none;

  vertical-align: top; // the better option for most scenarios
  vertical-align: -webkit-baseline-middle; // the best for those that support it

  cursor: pointer;
  @include user-select-none();
  @include appearance(none);
}

a[button] {
  text-decoration: none;
}