:host {
  /* Cores e outras definições */
  --ez-avatar--background-color: var(--color--ocean-green-600, #008561);
  --ez-avatar--color: var(--color--gray-70, #fff);
  --ez-avatar--border-radius-circle: 50%;
  --ez-avatar--border-radius-square: 25%;

  /* Hover */
  --ez-avatar--background-color-hover: var(--color--ocean-green-700, #00684C);

}

button,
figure {
  display: flex;
  align-items: center;
  justify-content: center;
  border: var(--ez-avatar--border);
  background-color: var(--ez-avatar--background-color);
  color: var(--ez-avatar--color);
  font-weight: var(--font-weight--medium, 500);
  font-family: var(--font-pattern, 'Roboto');
  transition: background-color 0.2s linear, color 0.2s linear;
  margin: 0;
  padding: 0;
}

button:hover {
  cursor: pointer;
  background-color: var(--ez-avatar--background-color-hover);
}

/* Definindo o tamanho do avatar com variáveis 
 * A largura e altura do avatar são definidas em rem para manter a consistência e escalabilidade em relação ao --avatar-size. 
 * Por exemplo, width: 20rem significa que o avatar terá 20 vezes o tamanho base da fonte do root (normalmente 320px se a base for 16px).
*/
.avatar--320 {
  --avatar-size: 320px;
  width: 20rem;
  height: 20rem;
}
.avatar--300 {
  --avatar-size: 300px;
  width: 18.75rem;
  height: 18.75rem;
}
.avatar--280 {
  --avatar-size: 280px;
  width: 17.5rem;
  height: 17.5rem;
}
.avatar--260 {
  --avatar-size: 260px;
  width: 16.25rem;
  height: 16.25rem;
}
.avatar--240 {
  --avatar-size: 240px;
  width: 15rem;
  height: 15rem;
}
.avatar--220 {
  --avatar-size: 220px;
  width: 13.75rem;
  height: 13.75rem;
}
.avatar--200 {
  --avatar-size: 200px;
  width: 12.5rem;
  height: 12.5rem;
}
.avatar--180 {
  --avatar-size: 180px;
  width: 11.25rem;
  height: 11.25rem;
}
.avatar--160 {
  --avatar-size: 160px;
  width: 10rem;
  height: 10rem;
}
.avatar--140 {
  --avatar-size: 140px;
  width: 8.75rem;
  height: 8.75rem;
}
.avatar--120 {
  --avatar-size: 120px;
  width: 7.5rem;
  height: 7.5rem;
}
.avatar--100 {
  --avatar-size: 100px;
  width: 6.25rem;
  height: 6.25rem;
}
.avatar--80 {
  --avatar-size: 80px;
  width: 5rem;
  height: 5rem;
}
.avatar--60 {
  --avatar-size: 60px;
  width: 3.75rem;
  height: 3.75rem;
}

/* Estilo para inicial do Avatar */
.avatar-initial {
  font-size: calc(0.375 * var(--avatar-size)); /* 37.5% do tamanho do avatar. */
}

/* Classes de formato */
.avatar--circle {
  border-radius: var(--ez-avatar--border-radius-circle);
}

.avatar--square {
  border-radius: var(--ez-avatar--border-radius-square);
}

/* Estilo para imagens dentro do avatar */
.avatar-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.avatar--has-image {
  background-color: transparent;
}

ez-icon {
  --ez-icon--color: var(--color--gray-70, #fff);

  font-weight: var(--font-weight--medium, 500);
}