import styled, { css } from 'styled-components';
import { size } from 'polished';
import { defaultThemeProp } from '../../theme';
import BareButton from '../Button/BareButton';
import Popover from '../Popover';
import { StyledText } from '../Text';
import { calculateFontSize } from '../../styles';
import { useDirection } from '../../hooks';
import Flex from '../Flex';
export const CurrentStepPopover = styled(Popover) `
  max-width: 100%;
  background-color: transparent;
  z-index: 0;
  box-shadow: none;

  & > ${StyledText} {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
`;
export const StyledBar = styled.div(({ theme }) => {
    const { base: { palette: { 'border-line': borderColor } } } = theme;
    return css `
    position: absolute;
    width: 100%;
    height: 0.0625rem;
    background: ${borderColor};

    @media (forced-colors: active) {
      background: CanvasText;
    }
  `;
});
StyledBar.defaultProps = defaultThemeProp;
export const StyledFill = styled.div(({ theme }) => {
    const { base: { animation: { speed: animationSpeed, timing: { ease: animationTiming } }, palette: { interactive } } } = theme;
    const { ltr } = useDirection();
    return css `
    position: absolute;
    width: 100%;
    height: 100%;
    background: ${interactive};
    transition: all calc(2 * ${animationSpeed}) ${animationTiming};
    transform: scaleX(var(--fillScale));
    transform-origin: ${ltr ? 0 : '100%'} 0;

    @media (forced-colors: active) {
      background: Highlight;
    }
  `;
});
StyledFill.defaultProps = defaultThemeProp;
export const StyledFormProgress = styled(Flex)(({ theme }) => {
    const { base: { spacing, 'font-size': fontSize, 'font-scale': fontScale }, components: { text: { h4: { 'font-size': h4fontSize } } } } = theme;
    const fontSizes = calculateFontSize(fontSize, fontScale);
    return css `
    position: relative;
    padding-block-start: calc(${spacing} + ${fontSizes[h4fontSize]} * 1.35);
  `;
});
StyledFormProgress.defaultProps = defaultThemeProp;
export const StyledStepMarkers = styled.ol(({ theme }) => {
    return css `
    list-style-type: none;

    li {
      display: flex;
    }

    &:has(:focus-visible) {
      box-shadow: ${theme.base.shadow['focus-group']};
    }
  `;
});
StyledStepMarkers.defaultProps = defaultThemeProp;
export const StyledVerticalStepMarkers = styled.ol `
  list-style-type: none;
`;
export const StepMarker = styled(BareButton)(({ current, depth, prior, theme }) => {
    const { base: { 'font-size': fontSize, 'font-scale': fontScale, animation: { speed: animationSpeed, timing: { ease: animationTiming } }, palette: { interactive, 'primary-background': primaryBackground }, shadow: { focus: focusShadow }, 'hit-area': { 'mouse-min': buttonSize, 'finger-min': touchButtonSize } }, components: { 'form-control': { 'border-color': borderColor } } } = theme;
    const { m: stepMarkerSize } = calculateFontSize(fontSize, fontScale);
    const smallStepMarkerSize = `calc(${stepMarkerSize} / 1.5)`;
    return css `
    position: relative;
    z-index: 1;
    ${size(depth === 1 ? smallStepMarkerSize : stepMarkerSize)}
    border-radius: 100%;
    background: ${primaryBackground};
    border: 0.0625rem solid ${borderColor};
    transition: all calc(2 * ${animationSpeed}) ${animationTiming};

    ${current &&
        css `
      background: ${interactive};
      border-color: ${interactive};

      @media (forced-colors: active) {
        background: Highlight;
        border-color: Highlight;
      }
    `}

    ${prior &&
        css `
      border-color: ${interactive};

      @media (forced-colors: active) {
        border-color: Highlight;
      }
    `}

    ::after {
      content: '';
      position: absolute;
      inset-block-start: ${depth === 1
        ? `calc((${buttonSize} - ${smallStepMarkerSize}) / -2) `
        : `calc((${buttonSize} - ${stepMarkerSize}) / -2) `};
      inset-inline-start: ${depth === 1
        ? `calc((${buttonSize} - ${smallStepMarkerSize}) / -2) `
        : `calc((${buttonSize} - ${stepMarkerSize}) / -2) `};
      ${size(buttonSize)}

      @media (pointer: coarse) {
        inset-block-start: ${depth === 1
        ? `calc((${touchButtonSize} - ${smallStepMarkerSize}) / -2) `
        : `calc((${touchButtonSize} - ${stepMarkerSize}) / -2) `};
        inset-inline-start: ${depth === 1
        ? `calc((${touchButtonSize} - ${smallStepMarkerSize}) / -2) `
        : `calc((${touchButtonSize} - ${stepMarkerSize}) / -2) `};
        ${size(touchButtonSize)}
      }
    }

    &:not(:only-child):first-child::after {
      inset-inline-start: 0;
    }

    &:not(:only-child):last-child::after {
      inset-inline-start: unset;
      inset-inline-end: 0;
    }

    :focus {
      box-shadow: ${focusShadow};

      @media (forced-colors: active) {
        outline: 0.125rem solid Highlight;
        outline-offset: 0.125rem;
      }
    }
  `;
});
StepMarker.defaultProps = defaultThemeProp;
export const StyledBulletWrapper = styled.div(({ theme, hasNext, prior }) => {
    const { base: { animation: { speed: animationSpeed }, palette: { interactive } }, components: { 'form-control': { 'border-color': borderColor } } } = theme;
    return css `
    position: relative;
    text-align: center;
    min-width: 2rem;
    padding-block-start: calc(1.15 * ${theme.base.spacing});

    ${hasNext &&
        css `
      &::after {
        content: '';
        position: absolute;
        margin-block-start: 0.85rem;
        inset-inline-start: calc(50% - 0.03125rem);
        width: 0.0625rem;
        height: 100%;
        background: ${prior ? interactive : borderColor};
        transition: background calc(2 * ${animationSpeed});

        @media (forced-colors: active) {
          background: ${prior ? 'Highlight' : 'CanvasText'};
        }
      }
    `}
  `;
});
StyledBulletWrapper.defaultProps = defaultThemeProp;
export const StyledStepText = styled.div(({ theme }) => {
    return css `
    padding-block: ${theme.base.spacing};
    overflow-wrap: break-word;
  `;
});
StyledStepText.defaultProps = defaultThemeProp;
//# sourceMappingURL=FormProgress.styles.js.map