// Copyright (c) 2016, the Dart project authors.  Please see the AUTHORS file
// for details. All rights reserved. Use of this source code is governed by a
// BSD-style license that can be found in the LICENSE file.

@import 'package:angular_components/css/material/material';
@import 'package:angular_components/material_button/mixins';

$button-height: 9 * $mat-grid-type;

:host {
  display: flex;
}

// Use two classes to increase specificity to override material-buttons values
.btn.btn-yes,
.btn.btn-no {
  height: $button-height;
  margin: 0 $mat-grid-type;
}

.btn:not([disabled]).highlighted {
  &[raised] {
    background-color: $mat-blue-500;
    color: $mat-white;
  }

  &:not([raised]) {
    color: $mat-blue-500;
  }
}

.spinner {
  align-items: center;
  display: flex;
  margin-right: 3 * $mat-grid;
  min-width: 2 * $button-min-width;
}

// TODO(google): remove when Material Button no longer overrides user applied
// margins.
:host(.no-margin) .btn {
  margin: 0;
  min-width: 0;
  padding: 0;

  .content {
    padding-right: 0;
  }
}

:host[reverse] {
  flex-direction: row-reverse;

  .spinner {
    justify-content: flex-end;
  }
}

:host[dense] {
  .btn.btn-yes,
  .btn.btn-no {
    @include button-dense-theme('');
  }
}
