import styled from 'styled-components';
import { Box, Button } from '../..';
export var StyledBox = styled(Box).withConfig({
  displayName: "ProgressIndicatorstyled__StyledBox",
  componentId: "sc-jimls6-0"
})(["border-radius:", ";border-bottom:1px solid ", ";"], function (p) {
  return !p.$isMobile && p.theme.borderRadius8;
}, function (p) {
  return p.$isMobile && p.$borderBottomMobile ? p.theme.colorTokens.neutral.border_medium : 'transparent';
});
export var CompletionBar = styled.div.withConfig({
  displayName: "ProgressIndicatorstyled__CompletionBar",
  componentId: "sc-jimls6-1"
})(["height:", "px;position:relative;width:100%;border-radius:100px;overflow:hidden;background:", ";margin:", " auto;&::after{position:absolute;left:0;top:0;transition:transform 333ms;transform:scaleX(", ");background:", ";transform-origin:left;width:100%;height:100%;display:block;content:'';border-top-right-radius:", ";border-bottom-right-radius:", ";}"], function (p) {
  return p.theme.spacing.unit(1);
}, function (p) {
  return p.theme.color.progressIndicatorBarEmpty;
}, function (p) {
  return p.noButtons ? '7px' : 0;
}, function (p) {
  return p.completion;
}, function (p) {
  return p.theme.color.progressIndicatorBar;
}, function (p) {
  return p.theme.borderRadius100;
}, function (p) {
  return p.theme.borderRadius100;
});
export var StyledButton = styled(Button.Icon).withConfig({
  displayName: "ProgressIndicatorstyled__StyledButton",
  componentId: "sc-jimls6-2"
})(["display:", ";visibility:", ";background-color:", ";min-height:", ";width:", ";height:", ";padding:", ";&:hover{background-color:", ";}"], function (p) {
  return p.$hide ? 'none' : 'flex';
}, function (p) {
  return p.$visible ? 'visible' : 'hidden';
}, function (p) {
  return p.$isMobile ? p.theme.color.pillButtonBackgroundTertiary : 'transparent';
}, function (p) {
  return !p.$isMobile && '16px';
}, function (p) {
  return !p.$isMobile && '16px';
}, function (p) {
  return !p.$isMobile && '16px';
}, function (p) {
  return !p.$isMobile && '0';
}, function (p) {
  return p.$isMobile ? p.theme.color.pillButtonBackgroundTertiary : 'transparent';
});
export var StyledButtonPill = styled(Button.Pill).withConfig({
  displayName: "ProgressIndicatorstyled__StyledButtonPill",
  componentId: "sc-jimls6-3"
})(["min-width:max-content;"]);