import styled, { css } from "styled-components";
import { classes, tokens } from "./Progress.tokens";
export const StyledTopRow = styled.div.withConfig({
    displayName: "Progress.styles__StyledTopRow",
    componentId: "sc-f0df87bb-0"
})([
    `width:100%;display:flex;justify-content:space-between;align-items:center;`
]);
export const StyledMidRow = styled.div.withConfig({
    displayName: "Progress.styles__StyledMidRow",
    componentId: "sc-f0df87bb-1"
})([
    `width:100%;display:flex;align-items:center;`
]);
export const StyledTrack = styled.div.withConfig({
    displayName: "Progress.styles__StyledTrack",
    componentId: "sc-f0df87bb-2"
})([
    `flex:1;position:relative;`
]);
export const StyledProgress = styled.div.withConfig({
    displayName: "Progress.styles__StyledProgress",
    componentId: "sc-f0df87bb-3"
})([
    `position:absolute;left:0;top:50%;transform:translateY(-50%);width:`,
    `;`
], ({ value })=>`${value}%`);
export const StyledLabelWrapper = styled.div.withConfig({
    displayName: "Progress.styles__StyledLabelWrapper",
    componentId: "sc-f0df87bb-4"
})([
    `display:flex;align-items:center;`
]);
export const StyledLabel = styled.span.withConfig({
    displayName: "Progress.styles__StyledLabel",
    componentId: "sc-f0df87bb-5"
})([
    ``
]);
export const StyledLabelContent = styled.div.withConfig({
    displayName: "Progress.styles__StyledLabelContent",
    componentId: "sc-f0df87bb-6"
})([
    `display:inline-flex;`
]);
export const StyledValue = styled.span.withConfig({
    displayName: "Progress.styles__StyledValue",
    componentId: "sc-f0df87bb-7"
})([
    ``
]);
export const StyledCaption = styled.span.withConfig({
    displayName: "Progress.styles__StyledCaption",
    componentId: "sc-f0df87bb-8"
})([
    ``
]);
export const base = css([
    `display:flex;flex-direction:column;&.`,
    ` `,
    `{height:var(`,
    `);}&.`,
    ` `,
    `{height:auto;}&.`,
    ` `,
    `{justify-content:flex-start;}&.`,
    ` `,
    `{justify-content:center;}&.`,
    ` `,
    `{justify-content:flex-end;}`
], classes.hasCaption, StyledMidRow, tokens.trackHeight, classes.labelPlacementLeft, StyledMidRow, classes.valueAlignStart, StyledTopRow, classes.valueAlignCenter, StyledTopRow, classes.valueAlignEnd, StyledTopRow);
