@import "./chip";
@import "./chip.md.vars";

// Material Design Chip
// --------------------------------------------------

:host {
  --background: #{$chip-md-background-color};
  --color: #{$chip-md-text-color};

  // Chip label
  --label-margin-top: #{$chip-md-label-margin-top};
  --label-margin-end: #{$chip-md-label-margin-end};
  --label-margin-bottom: #{$chip-md-label-margin-bottom};
  --label-margin-start: #{$chip-md-label-margin-start};

  // Chip avatar
  --avatar-width: #{$chip-md-avatar-width};
  --avatar-height: #{$chip-md-avatar-height};
  --avatar-margin-top: #{$chip-md-avatar-margin-top};
  --avatar-margin-end: #{$chip-md-avatar-margin-end};
  --avatar-margin-bottom: #{$chip-md-avatar-margin-bottom};
  --avatar-margin-start: #{$chip-md-avatar-margin-start};

  @include border-radius($chip-md-border-radius);
  @include margin($chip-md-margin-top, $chip-md-margin-end, $chip-md-margin-bottom, $chip-md-margin-start);

  height: $chip-md-height;

  font-family: $chip-md-font-family;
  font-size: $chip-md-font-size;
}