@import '../core/style/elevation';


$md-button-toggle-padding: 0 16px !default;
$md-button-toggle-line-height: 36px !default;
$md-button-toggle-border-radius: 2px !default;

md-button-toggle-group {
  @include md-elevation(2);
  position: relative;
  display: inline-flex;
  flex-direction: row;

  border-radius: $md-button-toggle-border-radius;

  cursor: pointer;
  white-space: nowrap;
}

.md-button-toggle-vertical {
  flex-direction: column;

  .md-button-toggle-label-content {
    // Vertical button toggles shouldn't be an inline-block, because the toggles should
    // fill the available width in the group.
    display: block;
  }
}


.md-button-toggle-disabled .md-button-toggle-label-content {
  cursor: default;
}

md-button-toggle {
  white-space: nowrap;
}

.md-button-toggle-label-content {
  display: inline-block;
  line-height: $md-button-toggle-line-height;
  padding: $md-button-toggle-padding;
  cursor: pointer;
  user-select: none;
}

.md-button-toggle-label-content > * {
  vertical-align: middle;
}