// Import all the tools needed to customize the theme and extract parts of it
// @import '~@angular/material/core/theming/all-theme';
@import '../../all-theme';

// Define a mixin that accepts a theme and outputs the color styles for the component.
@mixin ap-button-theme($theme) {
  // Extract whichever individual palettes you need from the theme.
  $primary: map-get($theme, primary);
  $accent: map-get($theme, accent);

  $button-xl-padding: 15px 20px;
  $button-xl-height: 50px;

  $button-l-padding: 10px 20px;
  $button-l-height: 40px;

  $button-m-padding: 8px 20px;
  $button-m-height: 36px;

  $button-sm-padding: 5px 10px;
  $button-sm-height: 30px;

  [md-button][ap-button],
  [md-raised-button][ap-button] {
    max-width: 100%;
    line-height: 20px;
    font-family: "Hind";
    letter-spacing: 0.5px;
    font-size: 13px;
    overflow: hidden;
    padding: $button-m-padding;
    text-overflow: ellipsis;
    margin: 0 10px;

    [ap-icon] { margin-right: 5px; }
    span { margin-top: inherit; }

    &[size='xl'] { padding: $button-xl-padding; height: $button-xl-height; }
    &[size='l'] { padding: $button-l-padding; height: $button-l-height; }
    &[size='m'] { padding: $button-m-padding; height: $button-m-height; }
    &[size='sm'] { padding: $button-sm-padding; height: $button-sm-height; }

    &[round] {
      border-radius: 5rem;
    }

    &[right] { margin-right: 0; }
    &[left] { margin-left: 0; }

    &[clear] {
      box-shadow: none;
      border: 1px solid md-color($primary);
      color: md-color($primary);
    }

    &[action] {
      font-family: "Open Sans";
      letter-spacing: 0.3px;
      min-width: auto;
      color: #7D93A0;
    }

    &[transparent] { background: transparent; }

    &[only-icon] {
      [ap-icon] { margin: 0; }
    }
    &[no-shadow] {
      box-shadow: none;
    }
    &[mini-button] {
      padding: 5px;
      border: 0;
      box-shadow: none;
      border-radius: 100%;
      min-width: auto;
      background: transparent;
      width: 32px;
      height: 32px;
      color: $color-placeholder;
      md-icon, i {
        display: block;
        margin: 0;
        line-height: 1;
        height: auto;
        width: auto;
        font-size: 20px;
      }
    }
    &[bar-button] {
      margin: 0;
      height: 100%;
      box-shadow: none;
      padding: 5px 20px;
      background: transparent;
      color: $item-text-color;
      border-right: 1px solid $color-placeholder;

      &.review-color { color: $color-success; }
      &.remove-color { color: $color-error; }
      &.flag-color { color: $color-error; }
      &.assign-color { color: $color-assign; }
      &.tag-color { color: $color-tag; }
    }

    &.review {
      color: #fff;
      background-color: $color-placeholder;
      &.reviewed { background-color: $color-success; }
    }

    &[color='primary'] {
      background: md-color($primary, 500);
      color: md-contrast($primary, 500);
    }
    &[color='success'] { background: $color-success; color: white; }
    &[color='dark'] {
      background: md-color($md-ap-dark, 500);
      color: md-contrast($md-ap-dark, 500);
    }
    &[color='dark-grey'] {
      background: md-color($md-ap-dark-grey, 500);
      color: white;
    }
  }

}