/**
 * Auto-generated file. Do not edit directly.
 */
/* stylelint-disable value-keyword-case */
/* stylelint-enable value-keyword-case */
:host {
  /**
   * @prop --cat-avatar-bg: The background color of the avatar.
   * @prop --cat-avatar-fill: The text color of the avatar.
   * @prop --cat-avatar-size: The size of the avatar.
   * @prop --cat-avatar-font-size: The font size of the avatar.
   */
  display: contents;
}

:host([hidden]) {
  display: none;
}

.avatar {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--cat-border-radius-m, 0.25rem);
  text-decoration: inherit;
  color: var(--cat-avatar-fill, #515c6c);
  background-color: var(--cat-avatar-bg, #f2f4f7);
  background-size: cover;
  background-position: center;
  white-space: nowrap;
  overflow: hidden;
  vertical-align: middle;
  font-weight: 600;
  /* stylelint-disable property-no-vendor-prefix */
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  /* stylelint-enable property-no-vendor-prefix */
}
.avatar:focus-visible {
  outline: 2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));
  outline-offset: 1px;
}

.avatar-round {
  border-radius: 50%;
}

.avatar-xs {
  width: var(--cat-avatar-size, 1.5rem);
  height: var(--cat-avatar-size, 1.5rem);
  line-height: var(--cat-avatar-size, 1.5rem);
  font-size: var(--cat-avatar-font-size, 0.75rem);
}

.avatar-s {
  width: var(--cat-avatar-size, 2rem);
  height: var(--cat-avatar-size, 2rem);
  line-height: var(--cat-avatar-size, 2rem);
  font-size: var(--cat-avatar-font-size, 0.875rem);
}

.avatar-m {
  width: var(--cat-avatar-size, 2.5rem);
  height: var(--cat-avatar-size, 2.5rem);
  line-height: var(--cat-avatar-size, 2.5rem);
  font-size: var(--cat-avatar-font-size, 0.9375rem);
}

.avatar-l {
  width: var(--cat-avatar-size, 3rem);
  height: var(--cat-avatar-size, 3rem);
  line-height: var(--cat-avatar-size, 3rem);
  font-size: var(--cat-avatar-font-size, 1.125rem);
}

.avatar-xl {
  width: var(--cat-avatar-size, 3.5rem);
  height: var(--cat-avatar-size, 3.5rem);
  line-height: var(--cat-avatar-size, 3.5rem);
  font-size: var(--cat-avatar-font-size, 1.25rem);
}