@kubit-ui-web/react-components/dist/esm/components/avatar/avatar.styled.js

Kubit React Components is a customizable, accessible library of React web components, designed to enhance your application's user experience

import styled, { css } from 'styled-components';
import { getStyles } from '../../utils/getStyles/getStyles';
const getBorderStyle = (styles, backgroundColor) => css `
  border: ${`${styles?.containerBorderWidth} solid ${styles?.containerBackgroundColor?.[backgroundColor]?.borderColor}`};
`;
export const AvatarStyled = styled.span `
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  ${props => getBorderStyle(props.styles, props.backgroundColor)};
  background-color: ${props => props.styles?.containerBackgroundColor?.[props.backgroundColor]?.backgroundColor};
  background-image: url(${props => props.image});
  background-position: 50%, 50%;
  background-size: 100%;
  cursor: pointer;
  ${props => getStyles(props.styles?.linkContainer)}
`;
export const AvatarLinkStyled = styled.div `
  position: relative;
  ${props => getBorderStyle(props.styles, props.backgroundColor)};
  background-color: ${props => props.styles?.containerBackgroundColor?.[props.backgroundColor]?.backgroundColor};
  background-image: url(${props => props.image});
  background-position: 50%, 50%;
  background-size: 100%;
  cursor: pointer;
  ${props => getStyles(props.styles?.linkContainer)}

  a {
    display: flex;
    justify-content: center;
    align-items: center;

    &:focus {
      border-radius: 50%;
    }
  }
`;
export const AvatarDotStyled = styled.span `
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
`;
//# sourceMappingURL=avatar.styled.js.map