@import '../core/style/elevation';
@import '../core/style/vendor-prefixes';
@import '../core/style/layout-common';

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

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

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

  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
}

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

  .mat-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;
  }
}


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

.mat-button-toggle {
  white-space: nowrap;
  position: relative;

  &.cdk-keyboard-focused,
  &.cdk-program-focused {
    .mat-button-toggle-focus-overlay {
      opacity: 1;
    }
  }
}

.mat-button-toggle-label-content {
  @include user-select(none);
  display: inline-block;
  line-height: $mat-button-toggle-height;
  padding: $mat-button-toggle-padding;
  cursor: pointer;
}

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

// Overlay to be used as a tint.
.mat-button-toggle-focus-overlay {
  border-radius: inherit;

  // Disable pointer events to prevent it from hijacking user events.
  pointer-events: none;
  opacity: 0;
  @include mat-fill;
}