import { styled } from '../styled';
import { STEPPER_ORDER_COUNTER_NAME, stepperClassnames } from './constants';
export const Wrapper = styled.div `
  counter-reset: ${STEPPER_ORDER_COUNTER_NAME} 0;

  display: flex;
  align-items: flex-start;

  &.${stepperClassnames.orientationHorizontal} {
    flex-direction: row;

    &.${stepperClassnames.arrowConnector} {
      align-items: center;
    }

    &.${stepperClassnames.lineConnector} {
      &:not(.${stepperClassnames.alternativeLabel}) {
        align-items: center;
      }
    }
  }

  &.${stepperClassnames.orientationVertical} {
    flex-direction: column;

    &.${stepperClassnames.lineConnector} {
      gap: ${({ theme }) => theme.microSpacing(1)};
    }
  }

  ${({ theme }) => theme.breakpoints.down('sm')} {
    /* Убираем видимую полосу прокрутки в firefox */
    scrollbar-width: none;

    overflow-x: auto;

    width: 100%;

    /* Убираем видимую полосу прокрутки в chrome */
    &::-webkit-scrollbar {
      display: none;
    }
  }
`;
