// 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';

// Change the color of the yes button.
//
// Apply directly to the <material-yes-no-buttons> element.
@mixin material-yes-button-color($value) {
  ::ng-deep .btn-yes[raised],
  ::ng-deep .btn-yes.btn:not([disabled]).highlighted[raised] {
    background-color: $value;
  }
}

// Change the color of text in the yes button.
//
// Apply directly to the <material-yes-no-buttons> element.
@mixin material-yes-button-text-color($value) {
  ::ng-deep .btn-yes.btn:not([disabled]) {
    &,
    &.highlighted,
    &.highlighted[raised] {
      color: $value;
    }
  }
}

// Change the color of the no button.
//
// Apply directly to the <material-yes-no-buttons> element.
@mixin material-no-button-color($value) {
  ::ng-deep .btn-no[raised] {
    background-color: $value;
  }
}

// Change the color of text in the no button.
//
// Apply directly to the <material-yes-no-buttons> element.
@mixin material-no-button-text-color($value) {
  ::ng-deep .btn-no.btn:not([disabled]) {
    color: $value;
  }
}

// Remove the left-margin from the yes/no button on the left side to align with content.
//
// Apply directly to the <material-yes-no-buttons> element.
@mixin material-yes-no-button-remove-left-margin() {
  &[reverse] ::ng-deep .btn.btn-no {
    margin-left: 0;
  }

  &:not([reverse]) ::ng-deep .btn.btn-yes {
    margin-left: 0;
  }
}

// Change the yes-button to be raised and highlighted.
//
// Apply directly to the <material-yes-no-buttons> element.
@mixin material-yes-button-raised-highlighted($color, $text-color) {
  ::ng-deep .btn-yes.btn:not([disabled]) {
    @include _button-raised;
    background-color: $color;
    color: $text-color;
  }
}

@mixin material-no-button-highlight($color, $raised-text-color: $mat-white) {
  ::ng-deep .btn-no[raised] {
    background-color: $color;
    color: $raised-text-color;
  }

  ::ng-deep .btn-no:not([raised]) {
    color: $color;
  }
}
