import { css } from "styled-components";
import styled from "styled-components";
import { tokens } from "./ProgressBarCircular.tokens";
export var base = css([
    "position:relative;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:var(",
    ");height:var(",
    ");"
], tokens.height, tokens.height);
export var StyledSVG = styled.svg.withConfig({
    displayName: "ProgressBarCircular.styles__StyledSVG",
    componentId: "sc-d9be2df8-0"
})([
    "width:100%;height:100%;"
]);
export var StyledBackgroundCircle = styled.circle.withConfig({
    displayName: "ProgressBarCircular.styles__StyledBackgroundCircle",
    componentId: "sc-d9be2df8-1"
})([
    "fill:none;r:",
    ";stroke:var(",
    ");stroke-width:",
    ";"
], function(param) {
    var _param_customStrokeWidth = param.customStrokeWidth, customStrokeWidth = _param_customStrokeWidth === void 0 ? "var(".concat(tokens.strokeSize, ")") : _param_customStrokeWidth;
    return "calc(50px - calc(calc(50px / var(".concat(tokens.size, ")) * ").concat(customStrokeWidth, "))");
}, tokens.backgroundStroke, function(param) {
    var _param_customStrokeWidth = param.customStrokeWidth, customStrokeWidth = _param_customStrokeWidth === void 0 ? "var(".concat(tokens.strokeSize, ")") : _param_customStrokeWidth;
    return "calc(calc(50px / var(".concat(tokens.size, ")) * calc(").concat(customStrokeWidth, ") * 2)");
});
export var StyledProgressCircle = styled.circle.withConfig({
    displayName: "ProgressBarCircular.styles__StyledProgressCircle",
    componentId: "sc-d9be2df8-2"
})([
    "--percentage:",
    ";--radius:",
    ";--circumference:calc(calc(2 * 3.1415926535) * var(--radius));--dashoffset:calc(var(--circumference) - (var(--percentage,0) * var(--circumference) / 100));fill:none;stroke:var(",
    ");stroke-width:",
    ";stroke-linecap:round;r:var(--radius);stroke-dasharray:var(--circumference);stroke-dashoffset:var(--dashoffset);transition:stroke-dashoffset 0.3s linear;"
], function(param) {
    var percent = param.percent;
    return percent !== null && percent !== void 0 ? percent : 0;
}, function(param) {
    var _param_customStrokeWidth = param.customStrokeWidth, customStrokeWidth = _param_customStrokeWidth === void 0 ? "var(".concat(tokens.strokeSize, ")") : _param_customStrokeWidth;
    return "calc(50px - calc(calc(50px / var(".concat(tokens.size, ")) * ").concat(customStrokeWidth, "))");
}, tokens.progressStroke, function(param) {
    var _param_customStrokeWidth = param.customStrokeWidth, customStrokeWidth = _param_customStrokeWidth === void 0 ? "var(".concat(tokens.strokeSize, ")") : _param_customStrokeWidth;
    return "calc(calc(50px / var(".concat(tokens.size, ")) * calc(").concat(customStrokeWidth, ") * 2)");
});
export var StyledContent = styled.div.withConfig({
    displayName: "ProgressBarCircular.styles__StyledContent",
    componentId: "sc-d9be2df8-3"
})([
    "position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:var(",
    ");font-family:var(",
    ");font-size:var(",
    ");font-style:var(",
    ");font-weight:var(",
    ");letter-spacing:var(",
    ");line-height:var(",
    ");display:flex;align-items:center;justify-content:center;"
], tokens.contentColor, tokens.contentFontFamily, tokens.contentFontSize, tokens.contentFontStyle, tokens.contentFontWeight, tokens.contentLetterSpacing, tokens.contentLineHeight);
