@use "../../themes/native/native.globals.md" as globals;
@import "./avatar.common";
@import "./avatar.md.vars";

// Material Design Avatar
// --------------------------------------------------

:host {
  --border-radius: #{$avatar-md-border-radius};

  width: $avatar-md-width;
  height: $avatar-md-height;
}

// Avatar Empty Badge (hint)
// --------------------------------------------------

::slotted(ion-badge.badge-vertical-top:empty) {
  @include globals.transform(translate(-50%, 50%));
}

::slotted(ion-badge.badge-vertical-bottom:empty) {
  @include globals.transform(translateX(-100%));
}

:host ::slotted(ion-badge.badge-vertical-top:not(:empty)) {
  @include globals.transform(translate(0, 100%));
}

:host ::slotted(ion-badge.badge-vertical-bottom:not(:empty)) {
  @include globals.transform(translate(0, -100%));
}