import styled from 'styled-components';
import { Flag } from '../../../..';
export var StyledNestedBadge = styled.div.withConfig({
  displayName: "NestedBadgestyles__StyledNestedBadge",
  componentId: "sc-168bhj8-0"
})(["position:relative;height:", "px;width:", "px;"], function (p) {
  return p.$badgeSize === 'm' ? 28 : 32;
}, function (p) {
  return p.$badgeSize === 'm' ? 26 : 28;
});
export var StyledImg = styled.img.withConfig({
  displayName: "NestedBadgestyles__StyledImg",
  componentId: "sc-168bhj8-1"
})(["border-radius:50%;height:24px;width:24px;margin:", "px 0;"], function (p) {
  return p.$badgeSize === 'm' ? 2 : 4;
});
export var StyledFallback = styled.div.withConfig({
  displayName: "NestedBadgestyles__StyledFallback",
  componentId: "sc-168bhj8-2"
})(["display:flex;align-items:center;justify-content:center;background:", ";border-radius:50%;height:24px;width:24px;position:absolute;margin:", "px 0;span{line-height:unset;}"], function (p) {
  return p.theme.colorTokens.neutral.background_disabled;
}, function (p) {
  return p.$badgeSize === 'm' ? 2 : 4;
});
export var StyledFlag = styled(Flag).withConfig({
  displayName: "NestedBadgestyles__StyledFlag",
  componentId: "sc-168bhj8-3"
})(["position:absolute;left:", "px;top:", "px;height:16px;width:16px;border-radius:50%;"], function (p) {
  return p.$badgeSize === 'm' ? 10 : 12;
}, function (p) {
  return p.$badgeSize === 'm' ? 12 : 16;
});
export var StyledOverlay = styled.div.withConfig({
  displayName: "NestedBadgestyles__StyledOverlay",
  componentId: "sc-168bhj8-4"
})(["position:absolute;left:", "px;top:", "px;height:12px;width:12px;border:2px solid ", ";border-radius:50%;"], function (p) {
  return p.$badgeSize === 'm' ? 10 : 12;
}, function (p) {
  return p.$badgeSize === 'm' ? 12 : 16;
}, function (p) {
  return p.theme.colorTokens.neutral.border_focus;
});