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

  $size-large: 140px;
  $size-normal: 80px;
  $size-small: 40px;
  $size-avatar: 30px;
  $size-mini: 25px;
  $size-mini-sm: 20px;

  [ap-avatar] {
    min-width: $size-normal;
    max-width: $size-normal;
    min-height: $size-normal;
    max-height: $size-normal;
    position: relative;

    img { width: 100%; height: 100% }

    &.large {
      min-width: $size-large;
      max-width: $size-large;
      min-height: $size-large;
      max-height: $size-large;
    }
    &.normal {
      min-width: $size-normal;
      max-width: $size-normal;
      min-height: $size-normal;
      max-height: $size-normal;
    }
    &.small {
      min-width: $size-small;
      max-width: $size-small;
      min-height: $size-small;
      max-height: $size-small;
    }
    &.avatar {
      img { border-radius: 3px; }
      min-width: $size-avatar;
      max-width: $size-avatar;
      min-height: $size-avatar;
      max-height: $size-avatar;
    }
    &.mini {
      min-width: $size-mini;
      max-width: $size-mini;
      min-height: $size-mini;
      max-height: $size-mini;
    }
    &.mini-sm {
      min-width: $size-mini-sm;
      max-width: $size-mini-sm;
      min-height: $size-mini-sm;
      max-height: $size-mini-sm;
    }

    &.green-border {
      border: 2px solid $color-success;
    }
  }

}