@ozen-ui/kit/__inner__/cjs/components/Avatar/Avatar.css

React component library

.Avatar {
  --avatar-size: 100%;
  --avatar-color: var(--color-content-action-on);
  --avatar-bg-color: unset;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  inline-size: var(--avatar-size);
  block-size: var(--avatar-size);
  color: var(--avatar-color);
  background-color: var(--avatar-bg-color);
  font-family: Roboto, sans-serif;
  border-radius: 50%;
  position: relative;
  overflow: visible;
}

  .Avatar_color_a1 {
      --avatar-bg-color: var(--color-additional-a1);
    }

  .Avatar_color_a2 {
      --avatar-bg-color: var(--color-additional-a2);
    }

  .Avatar_color_a3 {
      --avatar-bg-color: var(--color-additional-a3);
    }

  .Avatar_color_b1 {
      --avatar-bg-color: var(--color-additional-b1);
    }

  .Avatar_color_b2 {
      --avatar-bg-color: var(--color-additional-b2);
    }

  .Avatar_color_b3 {
      --avatar-bg-color: var(--color-additional-b3);
    }

  .Avatar_color_c1 {
      --avatar-bg-color: var(--color-additional-c1);
    }

  .Avatar_color_c2 {
      --avatar-bg-color: var(--color-additional-c2);
    }

  .Avatar_color_c3 {
      --avatar-bg-color: var(--color-additional-c3);
    }

  .Avatar_color_d1 {
      --avatar-bg-color: var(--color-additional-d1);
    }

  .Avatar_color_d2 {
      --avatar-bg-color: var(--color-additional-d2);
    }

  .Avatar_color_d3 {
      --avatar-bg-color: var(--color-additional-d3);
    }

  .Avatar_color_e1 {
      --avatar-bg-color: var(--color-additional-e1);
    }

  .Avatar_color_e2 {
      --avatar-bg-color: var(--color-additional-e2);
    }

  .Avatar_color_e3 {
      --avatar-bg-color: var(--color-additional-e3);
    }

  .Avatar_color_f1 {
      --avatar-bg-color: var(--color-additional-f1);
    }

  .Avatar_color_f2 {
      --avatar-bg-color: var(--color-additional-f2);
    }

  .Avatar_color_f3 {
      --avatar-bg-color: var(--color-additional-f3);
    }

  .Avatar_color_g1 {
      --avatar-bg-color: var(--color-additional-g1);
    }

  .Avatar_color_g2 {
      --avatar-bg-color: var(--color-additional-g2);
    }

  .Avatar_color_g3 {
      --avatar-bg-color: var(--color-additional-g3);
    }

  .Avatar_color_h1 {
      --avatar-bg-color: var(--color-additional-h1);
    }

  .Avatar_color_h2 {
      --avatar-bg-color: var(--color-additional-h2);
    }

  .Avatar_color_h3 {
      --avatar-bg-color: var(--color-additional-h3);
    }

  .Avatar-Image {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 50%;
  }

  .Avatar-Online {
    position: absolute;
  }

  .Avatar_size_4xs {
      --avatar-size: 16px;
      font-size: 6px;
    }

  .Avatar_size_4xs .Avatar-Online {
        inset-block-end: 0;
        inset-inline-end: 0;
      }

  .Avatar_size_3xs {
      --avatar-size: 24px;
      font-size: 10px;
    }

  .Avatar_size_3xs .Avatar-Online {
        inset-block-end: 1px;
        inset-inline-end: 1px;
      }

  .Avatar_size_2xs {
      --avatar-size: 32px;
      font-size: 14px;
    }

  .Avatar_size_2xs .Avatar-Online {
        inset-block-end: 2px;
        inset-inline-end: 2px;
      }

  .Avatar_size_xs {
      --avatar-size: 40px;
      font-size: 16px;
    }

  .Avatar_size_xs .Avatar-Online {
        inset-block-end: 2px;
        inset-inline-end: 2px;
      }

  .Avatar_size_s {
      --avatar-size: 48px;
      font-size: 20px;
    }

  .Avatar_size_s .Avatar-Online {
        inset-block-end: 3px;
        inset-inline-end: 3px;
      }

  .Avatar_size_m {
      --avatar-size: 56px;
      font-size: 24px;
    }

  .Avatar_size_m .Avatar-Online {
        inset-block-end: 4px;
        inset-inline-end: 4px;
      }

  .Avatar_size_l {
      --avatar-size: 64px;
      font-size: 28px;
    }

  .Avatar_size_l .Avatar-Online {
        inset-block-end: 4px;
        inset-inline-end: 4px;
      }

  .Avatar_size_xl {
      --avatar-size: 80px;
      font-size: 32px;
    }

  .Avatar_size_xl .Avatar-Online {
        inset-block-end: 6px;
        inset-inline-end: 6px;
      }