// 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-chip-theme($theme) {
  // Extract whichever individual palettes you need from the theme.
  $primary: map-get($theme, primary);
  $accent: map-get($theme, accent);

  [ap-chip-status] {
    font-size: 11px;
    color: md-color($md-ap-dark-grey, 500);
    display: flex;
    align-items: center;
    min-height: 20px;
    /*.managers-info span {
      margin-left: 10px;
    }*/
    i[ap-icon], md-icon {
      margin-left: 10px;
      margin-right: 5px;
      margin-top: 2px;
    }
    .managers-info { margin-top: -1px; }
    [ap-button].review {
      margin-left: auto;
      margin-right: 0;
      min-width: 18px;
      width: 18px;
      height: 18px;
      i[ap-icon], md-icon { margin-left: 0; font-size: 10px; }
    }
  }

  [ap-chip-tag].md-chip.md-chip-selected:not(.md-basic-chip) {
    border-radius: 4px;
    padding: 5px 10px 5px 10px;
    margin: 4px;
    &.md-primary {
      background-color: md-color($primary, 50);
      border: md-color($primary, 500) 1px solid;
      color: md-color($primary, 500);
    }
    &.md-accent {
      background-color: md-color($accent, 100);
      border: md-color($accent, 500) 1px solid;
      color: md-color($accent, 500);
    }
  }

}