/**
 * @license EUPL-1.2+
 * Copyright Gemeente Amsterdam
 */

@use "../../common/print-exact" as *;

.ams-avatar {
  aspect-ratio: var(--ams-avatar-aspect-ratio);
  background-color: var(--ams-avatar-background-color);
  border-color: var(--ams-avatar-border-color);
  border-radius: 50%;
  border-style: var(--ams-avatar-border-style);
  border-width: var(--ams-avatar-border-width);
  color: var(--ams-avatar-color);
  display: inline-grid; /* Avoid Safari flexbox bug that distorts images by resolving intrinsic size incorrectly. */
  font-family: var(--ams-avatar-font-family);
  font-size: var(--ams-avatar-font-size);
  inline-size: calc(var(--ams-avatar-line-height) * var(--ams-avatar-font-size));
  line-height: var(--ams-avatar-line-height);
  padding-block: var(--ams-avatar-padding-block);
  padding-inline: var(--ams-avatar-padding-inline);
  place-content: center;

  @include print-exact;

  svg {
    fill: currentColor;
  }
}

.ams-avatar--has-image {
  border: none;
  inline-size: calc(
    var(--ams-avatar-line-height) * var(--ams-avatar-font-size) + 2 * var(--ams-avatar-padding-inline) + 2 *
      var(--ams-border-width-m)
  );
  overflow: hidden;
  padding-block: 0;
  padding-inline: 0;
  place-content: stretch; /* Make the image occupy the full avatar area, even when its intrinsic size is smaller. */
  vertical-align: middle; /* Remove ‘phantom’ white space when image doesn’t load. */

  /* Ensure Safari ignores intrinsic image sizing inside flex/grid containers, preventing incorrect scaling and distortion. */
  img {
    block-size: 100%;
    inline-size: 100%;
    object-fit: cover;
  }
}

.ams-avatar--azure {
  background-color: var(--ams-avatar-azure-background-color);
  border-color: var(--ams-avatar-azure-border-color);
  color: var(--ams-avatar-azure-color);
}

.ams-avatar--green {
  background-color: var(--ams-avatar-green-background-color);
  border-color: var(--ams-avatar-green-border-color);
  color: var(--ams-avatar-green-color);
}

.ams-avatar--lime {
  background-color: var(--ams-avatar-lime-background-color);
  border-color: var(--ams-avatar-lime-border-color);
  color: var(--ams-avatar-lime-color);
}

.ams-avatar--magenta {
  background-color: var(--ams-avatar-magenta-background-color);
  border-color: var(--ams-avatar-magenta-border-color);
  color: var(--ams-avatar-magenta-color);
}

.ams-avatar--orange {
  background-color: var(--ams-avatar-orange-background-color);
  border-color: var(--ams-avatar-orange-border-color);
  color: var(--ams-avatar-orange-color);
}

.ams-avatar--yellow {
  background-color: var(--ams-avatar-yellow-background-color);
  border-color: var(--ams-avatar-yellow-border-color);
  color: var(--ams-avatar-yellow-color);
}