/* ==========================================================
   AYW DESIGN SYSTEM
   COMPONENTS / AVATARS

   Responsabilidades:
   - avatar base;
   - tamanhos;
   - variações semânticas;
   - indicador de presença;
   - contador sobre o avatar;
   - grupos de avatares;
   - avatar acompanhado de identificação.

   O estado de carregamento pertence a:
   components/loaders.css
   ========================================================== */


/* ==========================================================
   AVATAR BASE
   ========================================================== */

   .ayw-avatar {
    position: relative;

    display: inline-grid;
    place-items: center;

    flex: 0 0 auto;

    width: 44px;
    height: 44px;

    overflow: hidden;

    border: 1px solid var(--ayw-border);
    border-radius: 50%;

    background: var(--ayw-bg-muted);
    color: var(--ayw-text-soft);

    font-size: var(--ayw-font-size-sm);
    font-weight: var(--ayw-font-weight-semibold);
    line-height: 1;

    text-transform: uppercase;

    box-shadow: var(--ayw-shadow-xs);
}

.ayw-avatar img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* ==========================================================
   TAMANHOS

   O tamanho padrão já possui 44px.
   Não existe ayw-avatar-md porque seria redundante.
   ========================================================== */

.ayw-avatar-xs {
    width: 28px;
    height: 28px;

    font-size: 0.68rem;
}

.ayw-avatar-sm {
    width: 36px;
    height: 36px;

    font-size: var(--ayw-font-size-xs);
}

.ayw-avatar-lg {
    width: 56px;
    height: 56px;

    font-size: var(--ayw-font-size-md);
}

.ayw-avatar-xl {
    width: 72px;
    height: 72px;

    font-size: var(--ayw-font-size-lg);
}

.ayw-avatar-2xl {
    width: 96px;
    height: 96px;

    font-size: var(--ayw-font-size-2xl);
}


/* ==========================================================
   VARIAÇÕES SEMÂNTICAS
   ========================================================== */

.ayw-avatar-primary {
    border-color: var(--ayw-primary-border);

    background: var(--ayw-primary-soft);
    color: var(--ayw-primary);
}

.ayw-avatar-success {
    background: var(--ayw-success-soft);
    color: var(--ayw-success);
}

.ayw-avatar-danger {
    background: var(--ayw-danger-soft);
    color: var(--ayw-danger);
}

.ayw-avatar-warning {
    background: var(--ayw-warning-soft);
    color: var(--ayw-warning);
}

.ayw-avatar-info {
    background: var(--ayw-info-soft);
    color: var(--ayw-info);
}


/* ==========================================================
   BORDA DE DESTAQUE
   ========================================================== */

.ayw-avatar-ring {
    border: 3px solid var(--ayw-surface);

    box-shadow:
        0 0 0 2px
        var(--ayw-primary);
}


/* ==========================================================
   WRAPPER
   ========================================================== */

.ayw-avatar-wrap {
    position: relative;

    display: inline-flex;

    flex: 0 0 auto;

    line-height: 0;
}


/* ==========================================================
   STATUS
   ========================================================== */

.ayw-avatar-status {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 2;

    width: 12px;
    height: 12px;

    border: 2px solid var(--ayw-surface);
    border-radius: 50%;

    background: var(--ayw-text-disabled);

    box-shadow: var(--ayw-shadow-xs);
}

.ayw-avatar-status.is-online,
.ayw-avatar-status.is-success {
    background: var(--ayw-success);
}

.ayw-avatar-status.is-away,
.ayw-avatar-status.is-warning {
    background: var(--ayw-warning);
}

.ayw-avatar-status.is-busy,
.ayw-avatar-status.is-danger {
    background: var(--ayw-danger);
}

.ayw-avatar-status.is-info {
    background: var(--ayw-info);
}


/* ==========================================================
   STATUS POR TAMANHO

   A classe de tamanho deve ser aplicada também ao wrapper:

   <span class="ayw-avatar-wrap ayw-avatar-sm">
   ========================================================== */

.ayw-avatar-wrap.ayw-avatar-xs
.ayw-avatar-status {
    width: 9px;
    height: 9px;

    border-width: 1px;
}

.ayw-avatar-wrap.ayw-avatar-sm
.ayw-avatar-status {
    width: 10px;
    height: 10px;

    border-width: 1px;
}

.ayw-avatar-wrap.ayw-avatar-lg
.ayw-avatar-status {
    width: 14px;
    height: 14px;
}

.ayw-avatar-wrap.ayw-avatar-xl
.ayw-avatar-status {
    width: 16px;
    height: 16px;
}

.ayw-avatar-wrap.ayw-avatar-2xl
.ayw-avatar-status {
    width: 18px;
    height: 18px;
}


/* ==========================================================
   CONTADOR SOBRE O AVATAR
   ========================================================== */

.ayw-avatar-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    z-index: 3;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 20px;
    height: 20px;

    padding:
        0
        0.35rem;

    border: 2px solid var(--ayw-surface);
    border-radius: var(--ayw-radius-pill);

    background: var(--ayw-danger);
    color: #ffffff;

    font-size: 0.62rem;
    font-weight: var(--ayw-font-weight-bold);
    line-height: 1;
}


/* ==========================================================
   GRUPO DE AVATARES
   ========================================================== */

.ayw-avatar-group {
    display: flex;
    align-items: center;

    min-width: 0;

    padding-left: var(--ayw-space-2);
}

.ayw-avatar-group .ayw-avatar-wrap,
.ayw-avatar-group > .ayw-avatar,
.ayw-avatar-group > .ayw-avatar-more {
    margin-left: -0.55rem;
}

.ayw-avatar-group .ayw-avatar-wrap:first-child,
.ayw-avatar-group > .ayw-avatar:first-child,
.ayw-avatar-group > .ayw-avatar-more:first-child {
    margin-left: 0;
}

.ayw-avatar-group .ayw-avatar {
    border: 2px solid var(--ayw-surface);

    box-shadow: var(--ayw-shadow-sm);
}

.ayw-avatar-group .ayw-avatar-wrap {
    transition:
        transform
        var(--ayw-transition-fast);
}

.ayw-avatar-group .ayw-avatar-wrap:hover {
    z-index: 2;

    transform: translateY(-2px);
}


/* ==========================================================
   AVATAR ADICIONAL
   ========================================================== */

.ayw-avatar-more {
    display: inline-grid;
    place-items: center;

    flex: 0 0 auto;

    width: 44px;
    height: 44px;

    border: 2px solid var(--ayw-surface);
    border-radius: 50%;

    background: var(--ayw-bg-muted);
    color: var(--ayw-text-muted);

    font-size: var(--ayw-font-size-xs);
    font-weight: var(--ayw-font-weight-semibold);
    line-height: 1;

    box-shadow: var(--ayw-shadow-sm);
}

.ayw-avatar-more.ayw-avatar-xs {
    width: 28px;
    height: 28px;
}

.ayw-avatar-more.ayw-avatar-sm {
    width: 36px;
    height: 36px;
}

.ayw-avatar-more.ayw-avatar-lg {
    width: 56px;
    height: 56px;
}

.ayw-avatar-more.ayw-avatar-xl {
    width: 72px;
    height: 72px;
}

.ayw-avatar-more.ayw-avatar-2xl {
    width: 96px;
    height: 96px;
}


/* ==========================================================
   AVATAR COM IDENTIFICAÇÃO
   ========================================================== */

.ayw-avatar-profile {
    display: flex;
    align-items: center;

    min-width: 0;

    gap: var(--ayw-space-3);
}

.ayw-avatar-profile-main {
    flex: 1 1 auto;

    min-width: 0;
}

.ayw-avatar-name,
.ayw-avatar-meta {
    display: block;

    overflow: hidden;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.ayw-avatar-name {
    color: var(--ayw-text);

    font-size: var(--ayw-font-size-sm);
    font-weight: var(--ayw-font-weight-semibold);
    line-height: var(--ayw-line-height-normal);
}

.ayw-avatar-meta {
    margin-top: var(--ayw-space-1);

    color: var(--ayw-text-muted);

    font-size: var(--ayw-font-size-xs);
    line-height: var(--ayw-line-height-normal);
}


/* ==========================================================
   AVATAR CLICÁVEL
   ========================================================== */

.ayw-avatar-link {
    display: inline-flex;

    border-radius: 50%;

    color: inherit;

    text-decoration: none;

    transition:
        box-shadow var(--ayw-transition-fast),
        transform var(--ayw-transition-fast);
}

.ayw-avatar-link:hover {
    color: inherit;

    transform: translateY(-1px);
}

.ayw-avatar-link:focus-visible {
    outline: 3px solid var(--ayw-focus-ring);
    outline-offset: 2px;
}


/* ==========================================================
   ESTADO DESABILITADO
   ========================================================== */

.ayw-avatar.is-disabled,
.ayw-avatar-wrap.is-disabled,
.ayw-avatar[aria-disabled="true"],
.ayw-avatar-wrap[aria-disabled="true"] {
    opacity: 0.5;

    filter: grayscale(1);

    pointer-events: none;
}


/* ==========================================================
   ACESSIBILIDADE
   ========================================================== */

.ayw-avatar[role="img"] {
    user-select: none;
}

.ayw-avatar img[alt=""] {
    pointer-events: none;
}


/* ==========================================================
   MOVIMENTO REDUZIDO
   ========================================================== */

@media (prefers-reduced-motion: reduce) {
    .ayw-avatar-link,
    .ayw-avatar-group .ayw-avatar-wrap {
        transition: none;
    }
}