@kubit-ui-web/react-components/dist/esm/components/stepperNumber/stepperNumber.styled.js

Kubit React Components is a customizable, accessible library of React web components, designed to enhance your application's user experience

import styled, { css } from 'styled-components';
import { srOnlyMixin } from '../../styles/mixins/srOnly.mixin';
import { getStyles } from '../../utils/getStyles/getStyles';
import { StepperNumberOrientationType } from './types/orientation';
export const StepperNumberContainerStyled = styled.section ``;
export const StepsContainerStyled = styled.ol `
  ${({ styles }) => getStyles(styles?.container)};
`;
export const BuilStepContainerStyled = styled.li `
  ${({ $orientation, horizontalOrientationWidth }) => $orientation === StepperNumberOrientationType.VERTICAL
    ? css `
          display: flex;
        `
    : css `
          width: ${horizontalOrientationWidth};
        `}
`;
export const StepContainerStyled = styled.span `
  ${({ styles, state }) => getStyles(styles?.[state]?.stepContainer)};
`;
export const StepCircleBarWrapperStyled = styled.span `
  display: flex;
  flex-direction: ${({ $orientation }) => $orientation === StepperNumberOrientationType.VERTICAL ? 'column' : 'row'};
  align-items: center;
  flex: 1;
`;
export const StepCircleStyled = styled.span `
  ${({ styles, state }) => getStyles(styles?.[state]?.stepCircle)};
`;
export const StepBarStyled = styled.span `
  ${({ styles, state }) => getStyles(styles?.[state]?.stepBar)};
`;
export const StepperNumberContainerVerticalStep = styled.span `
  ${({ styles, state }) => getStyles(styles?.[state]?.stepNameContainer)};
  ${({ styles, state, isLastStep }) => isLastStep && getStyles(styles?.[state]?.stepNameContainer?.isLast)};
`;
export const ScreenReaderTitle = styled.h2 `
  ${srOnlyMixin}
`;
export const ScreenReaderCompletedStep = styled.span `
  ${srOnlyMixin}
`;
//# sourceMappingURL=stepperNumber.styled.js.map