@tailwind components;


/**
 * @prop --mds-avatar-background-color-pending: The background-color when an image is loading
 * @prop --mds-avatar-background-color: The background-color of the component
 * @prop --mds-avatar-color: The color of the placeholder icon
 * @prop --mds-avatar-radius: The border-radius of the element
 */

:host {
  --mds-avatar-background-color-pending: rgb(var(--tone-neutral-08));
  --mds-avatar-background-color: rgb(var(--variant-primary-05));
  --mds-avatar-color: rgb(var(--variant-primary-10));
  --mds-avatar-radius: 9999px;
  --mds-avatar-initials-padding: 20%;

  aspect-ratio: 1/1;
  border-radius: var(--mds-avatar-radius);
  container-name: mds-avatar;
  container-type: inline-size;
  display: inline-flex;
  overflow: hidden;
  width: 3rem;
}

.avatar{
  transition-duration: 200ms;

  aspect-ratio: 1/1;
  border-radius: var(--mds-avatar-radius);
  color: transparent;
  display: inline-flex;
  overflow: hidden;
  transition-property: color, background-color, box-shadow, fill;
  width: 100%;
}

.avatar--pending {
  background-color: var(--mds-avatar-background-color-pending);
}

.avatar--loaded {
  animation: none;
}

.avatar--icon,
.avatar--fallback,
.avatar--initials {
  background-color: var(--mds-avatar-background-color);
  box-shadow: none;
}

.avatar--fallback,
.avatar--initials {
  align-items: stretch;
  display: flex;
  justify-items: stretch;
}

.avatar--icon,
.avatar--fallback {
  padding: 20%;
}

.avatar--initials {
  padding: 30% var(--mds-avatar-initials-padding) 25%;
}

.image {
  aspect-ratio: 1/1;
  border-radius: var(--mds-avatar-radius);
}

.fallback-icon{
  display: flex;
}

.fallback-icon svg{
  aspect-ratio: 1/1;
  height: 100%;
  width: 100%;
}

.fallback-icon {

  aspect-ratio: 1/1;
  fill: var(--mds-avatar-color);
  width: 100%;
}


.initials-text{
  font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 700;

  align-items: center;
  color: var(--mds-avatar-color);
  display: flex;
  height: 100%;
  justify-content: center;
  text-transform: uppercase;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  width: 100%;
}

.fit {
  display: inline-block;
  white-space: nowrap !important;
}

.icon{
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(1, 0, 0, 1);

  fill: var(--mds-avatar-color);
  height: 100%;
  transition-property: fill;
  width: 100%;
}

:host([variant="primary"]),
:host([variant="primary"][tone="strong"]) {
  --mds-avatar-background-color: rgb(var(--variant-primary-05));
  --mds-avatar-color: rgb(var(--variant-primary-10));
}

:host([variant="primary"][tone="weak"]) {
  --mds-avatar-background-color: rgb(var(--variant-primary-09));
  --mds-avatar-color: rgb(var(--variant-primary-05));
}

:host([variant="orange"]),
:host([variant="orange"][tone="strong"]) {
  --mds-avatar-background-color: rgb(var(--label-orange-05));
  --mds-avatar-color: rgb(var(--label-orange-10));
}

:host([variant="orange"][tone="weak"]) {
  --mds-avatar-background-color: rgb(var(--label-orange-09));
  --mds-avatar-color: rgb(var(--label-orange-05));
}

:host([variant="amaranth"]),
:host([variant="amaranth"][tone="strong"]) {
  --mds-avatar-background-color: rgb(var(--label-amaranth-05));
  --mds-avatar-color: rgb(var(--label-amaranth-10));
}

:host([variant="amaranth"][tone="weak"]) {
  --mds-avatar-background-color: rgb(var(--label-amaranth-09));
  --mds-avatar-color: rgb(var(--label-amaranth-05));
}

:host([variant="orchid"]),
:host([variant="orchid"][tone="strong"]) {
  --mds-avatar-background-color: rgb(var(--label-orchid-05));
  --mds-avatar-color: rgb(var(--label-orchid-10));
}

:host([variant="orchid"][tone="weak"]) {
  --mds-avatar-background-color: rgb(var(--label-orchid-09));
  --mds-avatar-color: rgb(var(--label-orchid-05));
}

:host([variant="violet"]),
:host([variant="violet"][tone="strong"]) {
  --mds-avatar-background-color: rgb(var(--label-violet-05));
  --mds-avatar-color: rgb(var(--label-violet-10));
}

:host([variant="violet"][tone="weak"]) {
  --mds-avatar-background-color: rgb(var(--label-violet-09));
  --mds-avatar-color: rgb(var(--label-violet-05));
}

:host([variant="blue"]),
:host([variant="blue"][tone="strong"]) {
  --mds-avatar-background-color: rgb(var(--label-blue-05));
  --mds-avatar-color: rgb(var(--label-blue-10));
}

:host([variant="blue"][tone="weak"]) {
  --mds-avatar-background-color: rgb(var(--label-blue-09));
  --mds-avatar-color: rgb(var(--label-blue-05));
}

:host([variant="sky"]),
:host([variant="sky"][tone="strong"]) {
  --mds-avatar-background-color: rgb(var(--label-sky-05));
  --mds-avatar-color: rgb(var(--label-sky-10));
}

:host([variant="sky"][tone="weak"]) {
  --mds-avatar-background-color: rgb(var(--label-sky-09));
  --mds-avatar-color: rgb(var(--label-sky-05));
}

:host([variant="aqua"]),
:host([variant="aqua"][tone="strong"]) {
  --mds-avatar-background-color: rgb(var(--label-aqua-05));
  --mds-avatar-color: rgb(var(--label-aqua-10));
}

:host([variant="aqua"][tone="weak"]) {
  --mds-avatar-background-color: rgb(var(--label-aqua-09));
  --mds-avatar-color: rgb(var(--label-aqua-05));
}

:host([variant="green"]),
:host([variant="green"][tone="strong"]) {
  --mds-avatar-background-color: rgb(var(--label-green-05));
  --mds-avatar-color: rgb(var(--label-green-10));
}

:host([variant="green"][tone="weak"]) {
  --mds-avatar-background-color: rgb(var(--label-green-09));
  --mds-avatar-color: rgb(var(--label-green-05));
}

:host([variant="lime"]),
:host([variant="lime"][tone="strong"]) {
  --mds-avatar-background-color: rgb(var(--label-lime-05));
  --mds-avatar-color: rgb(var(--label-lime-10));
}

:host([variant="lime"][tone="weak"]) {
  --mds-avatar-background-color: rgb(var(--label-lime-09));
  --mds-avatar-color: rgb(var(--label-lime-05));
}

:host([variant="yellow"]),
:host([variant="yellow"][tone="strong"]) {
  --mds-avatar-background-color: rgb(var(--label-yellow-05));
  --mds-avatar-color: rgb(var(--label-yellow-10));
}

:host([variant="yellow"][tone="weak"]) {
  --mds-avatar-background-color: rgb(var(--label-yellow-09));
  --mds-avatar-color: rgb(var(--label-yellow-05));
}

:host([variant="error"]),
:host([variant="error"][tone="strong"]) {
  --mds-avatar-background-color: rgb(var(--status-error-05));
  --mds-avatar-color: rgb(var(--status-error-10));
}

:host([variant="error"][tone="weak"]) {
  --mds-avatar-background-color: rgb(var(--status-error-09));
  --mds-avatar-color: rgb(var(--status-error-05));
}

:host([variant="warning"]),
:host([variant="warning"][tone="strong"]) {
  --mds-avatar-background-color: rgb(var(--status-warning-05));
  --mds-avatar-color: rgb(var(--status-warning-10));
}

:host([variant="warning"][tone="weak"]) {
  --mds-avatar-background-color: rgb(var(--status-warning-09));
  --mds-avatar-color: rgb(var(--status-warning-05));
}

:host([variant="info"]),
:host([variant="info"][tone="strong"]) {
  --mds-avatar-background-color: rgb(var(--status-info-05));
  --mds-avatar-color: rgb(var(--status-info-10));
}

:host([variant="info"][tone="weak"]) {
  --mds-avatar-background-color: rgb(var(--status-info-09));
  --mds-avatar-color: rgb(var(--status-info-05));
}

:host([variant="success"]),
:host([variant="success"][tone="strong"]) {
  --mds-avatar-background-color: rgb(var(--status-success-05));
  --mds-avatar-color: rgb(var(--status-success-10));
}

:host([variant="success"][tone="weak"]) {
  --mds-avatar-background-color: rgb(var(--status-success-09));
  --mds-avatar-color: rgb(var(--status-success-05));
}

:host-context(.pref-animation-reduce) .avatar,
:host-context(.pref-animation-reduce) .icon {
  transition-duration: 0s;
}

@media (prefers-reduced-motion) {
  :host-context(.pref-animation-system) .avatar,
  :host-context(.pref-animation-system) .icon {
    transition-duration: 0s;
  }
}

:host-context(.pref-contrast-more) .avatar--icon,
:host-context(.pref-contrast-more) .avatar--fallback,
:host-context(.pref-contrast-more) .avatar--initials {
  box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;
}

@media (prefers-contrast: more) {
  :host-context(.pref-contrast-system) .avatar--icon,
  :host-context(.pref-contrast-system) .avatar--fallback,
  :host-context(.pref-contrast-system) .avatar--initials {
    box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3), 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  }
}


@container (max-width: 24px) {
  :host-context(:not(.safari)) .avatar--initials {
    padding: 0 var(--mds-avatar-initials-padding);
  }

  :host-context(:not(.safari)) .initials-text{
    font-weight: 900;
  }
}

:host(:not(:is([hydrated], .hydrated))) {
  animation-duration: 0s;
  border-color: transparent;
  box-shadow: 0 0 0 transparent;
  opacity: 0;
  outline-color: transparent;
  transition-delay: 0s;
  transition-duration: 0s;
  visibility: hidden;
}

/* TODO refact(stencil): Uses only used selector from parent shadowDOM component */

mds-accordion:not(:is([hydrated], .hydrated)),
mds-accordion-item:not(:is([hydrated], .hydrated)),
mds-accordion-timer:not(:is([hydrated], .hydrated)),
mds-accordion-timer-item:not(:is([hydrated], .hydrated)),
mds-author:not(:is([hydrated], .hydrated)),
mds-avatar:not(:is([hydrated], .hydrated)),
mds-badge:not(:is([hydrated], .hydrated)),
mds-banner:not(:is([hydrated], .hydrated)),
mds-benchmark-bar:not(:is([hydrated], .hydrated)),
mds-bibliography:not(:is([hydrated], .hydrated)),
mds-breadcrumb:not(:is([hydrated], .hydrated)),
mds-breadcrumb-item:not(:is([hydrated], .hydrated)),
mds-button:not(:is([hydrated], .hydrated)),
mds-card:not(:is([hydrated], .hydrated)),
mds-card-content:not(:is([hydrated], .hydrated)),
mds-card-footer:not(:is([hydrated], .hydrated)),
mds-card-header:not(:is([hydrated], .hydrated)),
mds-card-media:not(:is([hydrated], .hydrated)),
mds-chip:not(:is([hydrated], .hydrated)),
mds-details:not(:is([hydrated], .hydrated)),
mds-dropdown:not(:is([hydrated], .hydrated)),
mds-entity:not(:is([hydrated], .hydrated)),
mds-file:not(:is([hydrated], .hydrated)),
mds-file-preview:not(:is([hydrated], .hydrated)),
mds-filter:not(:is([hydrated], .hydrated)),
mds-filter-item:not(:is([hydrated], .hydrated)),
mds-header:not(:is([hydrated], .hydrated)),
mds-header-bar:not(:is([hydrated], .hydrated)),
mds-help:not(:is([hydrated], .hydrated)),
mds-horizontal-scroll:not(:is([hydrated], .hydrated)),
mds-hr:not(:is([hydrated], .hydrated)),
mds-icon:not(:is([hydrated], .hydrated)),
mds-img:not(:is([hydrated], .hydrated)),
mds-input:not(:is([hydrated], .hydrated)),
mds-input-field:not(:is([hydrated], .hydrated)),
mds-input-range:not(:is([hydrated], .hydrated)),
mds-input-select:not(:is([hydrated], .hydrated)),
mds-input-switch:not(:is([hydrated], .hydrated)),
mds-input-tip:not(:is([hydrated], .hydrated)),
mds-input-tip-item:not(:is([hydrated], .hydrated)),
mds-input-upload:not(:is([hydrated], .hydrated)),
mds-keyboard:not(:is([hydrated], .hydrated)),
mds-keyboard-key:not(:is([hydrated], .hydrated)),
mds-kpi:not(:is([hydrated], .hydrated)),
mds-kpi-item:not(:is([hydrated], .hydrated)),
mds-label:not(:is([hydrated], .hydrated)),
mds-list:not(:is([hydrated], .hydrated)),
mds-list-item:not(:is([hydrated], .hydrated)),
mds-modal:not(:is([hydrated], .hydrated)),
mds-note:not(:is([hydrated], .hydrated)),
mds-notification:not(:is([hydrated], .hydrated)),
mds-paginator:not(:is([hydrated], .hydrated)),
mds-paginator-item:not(:is([hydrated], .hydrated)),
mds-pref:not(:is([hydrated], .hydrated)),
mds-pref-animation:not(:is([hydrated], .hydrated)),
mds-pref-consumption:not(:is([hydrated], .hydrated)),
mds-pref-contrast:not(:is([hydrated], .hydrated)),
mds-pref-language:not(:is([hydrated], .hydrated)),
mds-pref-language-item:not(:is([hydrated], .hydrated)),
mds-pref-theme:not(:is([hydrated], .hydrated)),
mds-price-table:not(:is([hydrated], .hydrated)),
mds-price-table-features:not(:is([hydrated], .hydrated)),
mds-price-table-features-cell:not(:is([hydrated], .hydrated)),
mds-price-table-features-row:not(:is([hydrated], .hydrated)),
mds-price-table-header:not(:is([hydrated], .hydrated)),
mds-price-table-list:not(:is([hydrated], .hydrated)),
mds-price-table-list-item:not(:is([hydrated], .hydrated)),
mds-progress:not(:is([hydrated], .hydrated)),
mds-push-notification:not(:is([hydrated], .hydrated)),
mds-push-notifications:not(:is([hydrated], .hydrated)),
mds-quote:not(:is([hydrated], .hydrated)),
mds-separator:not(:is([hydrated], .hydrated)),
mds-spinner:not(:is([hydrated], .hydrated)),
mds-stepper-bar:not(:is([hydrated], .hydrated)),
mds-stepper-bar-item:not(:is([hydrated], .hydrated)),
mds-tab:not(:is([hydrated], .hydrated)),
mds-tab-bar:not(:is([hydrated], .hydrated)),
mds-tab-bar-item:not(:is([hydrated], .hydrated)),
mds-tab-item:not(:is([hydrated], .hydrated)),
mds-table:not(:is([hydrated], .hydrated)),
mds-table-body:not(:is([hydrated], .hydrated)),
mds-table-cell:not(:is([hydrated], .hydrated)),
mds-table-footer:not(:is([hydrated], .hydrated)),
mds-table-header:not(:is([hydrated], .hydrated)),
mds-table-header-cell:not(:is([hydrated], .hydrated)),
mds-table-row:not(:is([hydrated], .hydrated)),
mds-text:not(:is([hydrated], .hydrated)),
mds-toast:not(:is([hydrated], .hydrated)),
mds-tooltip:not(:is([hydrated], .hydrated)),
mds-tree:not(:is([hydrated], .hydrated)),
mds-tree-item:not(:is([hydrated], .hydrated)),
mds-url-view:not(:is([hydrated], .hydrated)),
mds-usage:not(:is([hydrated], .hydrated)),
mds-video-wall:not(:is([hydrated], .hydrated)),
mds-zero:not(:is([hydrated], .hydrated))
{
  animation-duration: 0s;
  border-color: transparent;
  box-shadow: 0 0 0 transparent;
  opacity: 0;
  outline-color: transparent;
  transition-delay: 0s;
  transition-duration: 0s;
  visibility: hidden;
}