@mantine/core/styles/Avatar.layer.css

React components library focused on usability, accessibility and developer experience

@layer mantine {.m-11def92b{--ag-spacing:var(--mantine-spacing-sm);--ag-offset:calc(var(--ag-spacing)*-1);display:flex;padding-left:var(--ag-spacing)}:where([dir=rtl]) .m-11def92b{padding-left:0;padding-right:var(--ag-spacing)}.m-f85678b6{--avatar-size-xs:calc(1rem*var(--mantine-scale));--avatar-size-sm:calc(1.625rem*var(--mantine-scale));--avatar-size-md:calc(2.375rem*var(--mantine-scale));--avatar-size-lg:calc(3.5rem*var(--mantine-scale));--avatar-size-xl:calc(5.25rem*var(--mantine-scale));--avatar-size:var(--avatar-size-md);--avatar-radius:calc(62.5rem*var(--mantine-scale));--avatar-bg:var(--mantine-color-gray-light);--avatar-bd:calc(0.0625rem*var(--mantine-scale)) solid transparent;--avatar-color:var(--mantine-color-gray-light-color);--avatar-placeholder-fz:calc(var(--avatar-size)/2.5);-webkit-tap-highlight-color:transparent;border-radius:var(--avatar-radius);display:block;height:var(--avatar-size);min-width:var(--avatar-size);overflow:hidden;padding:0;position:relative;text-decoration:none;user-select:none;width:var(--avatar-size)}.m-f85678b6:where([data-within-group]){background:var(--mantine-color-body);border:calc(.125rem*var(--mantine-scale)) solid var(--mantine-color-body);margin-left:var(--ag-offset)}:where([dir=rtl]) .m-f85678b6:where([data-within-group]){margin-left:unset;margin-right:var(--ag-offset)}.m-11f8ac07{display:block;height:100%;object-fit:cover;width:100%}.m-104cd71f{align-items:center;background:var(--avatar-bg);border:var(--avatar-bd);border-radius:var(--avatar-radius);color:var(--avatar-color);display:flex;font-size:var(--avatar-placeholder-fz);font-weight:700;height:100%;justify-content:center;user-select:none;width:100%}.m-104cd71f>[data-avatar-placeholder-icon]{height:70%;width:70%}}