import styled, { css } from "styled-components";
export const StyledWrapper = styled.div.withConfig({
  displayName: "Styles__StyledWrapper",
  componentId: "sc-o6dcyu-0"
})(["position:relative;display:inline-flex;"]);
StyledWrapper.displayName = "StyledWrapper";
export const StyledChildrenWrapper = styled.div.withConfig({
  displayName: "Styles__StyledChildrenWrapper",
  componentId: "sc-o6dcyu-1"
})(["position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:inline-flex;"]);
StyledChildrenWrapper.displayName = "StyledChildrenWrapper";
export const StyledSvg = styled.svg.withConfig({
  displayName: "Styles__StyledSvg",
  componentId: "sc-o6dcyu-2"
})(["transform:rotate(-90deg);"]);
StyledSvg.displayName = "StyledSvg";
export const StyledBackgroundCircle = styled.circle.withConfig({
  displayName: "Styles__StyledBackgroundCircle",
  componentId: "sc-o6dcyu-3"
})(["fill:transparent;transition:stroke-dashoffset 0.5s linear,stroke 300ms ease-out;", " ", ""], props => props.$color ? css(["stroke:", ";"], props.$color) : css(["stroke:var(--color-theme-transparent-300);"]), props => props.$strokeDashOffset && css(["stroke-dashoffset:", ";"], props.$strokeDashOffset));
StyledBackgroundCircle.displayName = "StyledBackgroundCircle";
export const StyledForegroundCircle = styled.circle.withConfig({
  displayName: "Styles__StyledForegroundCircle",
  componentId: "sc-o6dcyu-4"
})(["fill:transparent;transition:stroke-dashoffset 0.5s linear,stroke 300ms ease-out;", " ", " ", ""], props => props.$roundStroke && css(["stroke-linecap:round;"]), props => props.$color ? css(["stroke:", ";"], props.$color) : css(["stroke:var(--color-secondary);"]), props => props.$strokeDashOffset && css(["stroke-dashoffset:", ";"], props.$strokeDashOffset));
StyledForegroundCircle.displayName = "StyledForegroundCircle";
export const StyledProgressRingPercentage = styled.text.withConfig({
  displayName: "Styles__StyledProgressRingPercentage",
  componentId: "sc-o6dcyu-5"
})(["transform:rotate(90deg);", " ", ""], props => props.$color ? css(["fill:", ";"], props.$color) : css(["fill:var(--color-secondary);"]), props => props.$fontSize ? css(["font-size:", "px;"], props.$fontSize) : css(["font-size:10px;"]));
StyledProgressRingPercentage.displayName = "StyledProgressRingPercentage";
//# sourceMappingURL=Styles.js.map