@layer components{.file__input{display:none}.file__label{align-items:center;background-color:var(--color-light);border-radius:50%;box-shadow:var(--box-shadow-bs);color:var(--color-grey-400);cursor:pointer;display:flex;flex-direction:row;height:3rem;justify-content:center;transition:var(--transition-speed-rapid) ease-out;width:3rem}.file__label:hover{color:var(--color-primary)}}@layer components{.avatar{align-items:center;color:var(--user-avatar-color);display:flex;font-family:var(--font-family-primary);gap:var(--spacing-xs);letter-spacing:1.5px}.avatar--LARGE{font-size:var(--font-size-sm);gap:var(--spacing-sm)}.avatar--LARGE .avatar__wrapper{height:4rem;width:4rem}.avatar--EDITABLE{align-items:center;display:flex;flex-direction:row;flex-direction:column;height:30rem;justify-content:center;padding:var(--spacing-lg);position:relative}.avatar--EDITABLE .avatar__img{background-color:var(--color-light);border:4px solid var(--color-light)}.avatar--EDITABLE .avatar__wrapper{height:12rem;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:12rem}.avatar--EDITABLE .avatar__name{color:var(--color-secondary);flex:initial;font-size:var(--font-size-lg);font-weight:var(--font-weight-medium);letter-spacing:1.5px;margin-top:auto;text-align:center;white-space:wrap}.avatar__wrapper{height:2.4rem;width:2.4rem}.avatar__img{border-radius:50%;height:100%;width:100%}.avatar__name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.avatar__cover{border-radius:var(--border-radius-sm);height:50%;top:0;right:0;bottom:0;left:0;position:absolute}@media only screen and (min-width:768px){.avatar__cover{border-radius:0}}.avatar__controls{align-items:center;bottom:.3rem;display:flex;flex-direction:row;gap:var(--spacing-xs);justify-content:space-between;left:.3rem;position:absolute;right:.3rem;z-index:1}.avatar__controls--ALT{bottom:50%;justify-content:flex-end;right:var(--spacing-lg);transform:translateY(50%)}.avatar__controls .file{margin-left:auto}.avatar__button{--button-border-color:transparent;--button-background-color:var(--color-light);--button-color:var(--color-grey-400);border:none;border-radius:50%;box-shadow:var(--box-shadow-bs);cursor:pointer;height:3rem;transition:var(--transition-speed-rapid) ease-out;width:3rem}@media only screen and (min-width:768px){.avatar__button:hover:not(:disabled){--button-background-color:var(--color-light);--button-color:var(--color-primary)}}}