@spaced-out/ui-design-system/lib/components/StageArrows/StageArrow/StageArrow.module.css

Sense UI components library

@value (
  colorNeutralLightest,
  colorNeutralLight,
  colorInformationLightest,
  colorInformationLight,
  colorSuccessLightest,
  colorSuccessLight,
  colorWarningLightest,
  colorWarningLight,
  colorDangerLightest,
  colorDangerLight,
  colorTextDisabled,
  colorFillDisabled
) from '../../../styles/variables/_color.css';

@value (
  spaceNone,
  spaceSmall,
  spaceFluid,
  spaceXSmall,
  spaceXXSmall,
  spaceHalfFluid
) from '../../../styles/variables/_space.css';

@value (
  size2,
  size4,
  size10,
  size12,
  size34,
  size180,
  size200
) from '../../../styles/variables/_size.css';

@value (
  borderRadiusSmall
) from '../../../styles/variables/_border.css';

@value paddingStageArrow: calc(size12 + size4);
@value maxWidthStageArrow: calc(size200 + size10);
@value maxWidthStageArrowContainer: calc(size180 - size2);

.stageArrowButton {
  composes: buttonTextSmall from '../../../styles/typography.module.css';
  display: flex;
  align-items: center;
  justify-content: center;
  max-height: size34;
  max-width: maxWidthStageArrow;
  padding: spaceNone paddingStageArrow;
  cursor: pointer;
  border: none;
  margin-left: calc(spaceXXSmall * -1);
  background-color: var(--stage-arrow-bg, colorNeutralLightest);
}

.stageArrowButton:hover {
  background-color: var(--stage-arrow-bg-hover, var(--stage-arrow-bg));
}

.stageArrowButton.locked:hover {
  background-color: var(--stage-arrow-bg);
}

.primary {
  --stage-arrow-bg: colorNeutralLightest;
  --stage-arrow-bg-hover: colorNeutralLight;
}

.information {
  --stage-arrow-bg: colorInformationLightest;
  --stage-arrow-bg-hover: colorInformationLight;
}

.success {
  --stage-arrow-bg: colorSuccessLightest;
  --stage-arrow-bg-hover: colorSuccessLight;
}

.warning {
  --stage-arrow-bg: colorWarningLightest;
  --stage-arrow-bg-hover: colorWarningLight;
}

.danger {
  --stage-arrow-bg: colorDangerLightest;
  --stage-arrow-bg-hover: colorDangerLight;
}

.disabled {
  color: colorTextDisabled;
  --stage-arrow-bg: colorFillDisabled;
  --stage-arrow-bg-hover: colorFillDisabled;
}

.stageArrowButton:first-child {
  margin-left: spaceNone;
}

.stageArrowRow {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: spaceXSmall;
  padding: spaceXSmall spaceSmall;
  width: maxWidthStageArrowContainer;
}

.stageArrowLeftIcon {
  align-self: flex-start;
}

.stageArrowText {
  flex: 1;
  text-align: center;
}

.stageArrowRightIcon {
  align-self: flex-end;
}

.startStageArrow {
  border-top-left-radius: borderRadiusSmall;
  border-bottom-left-radius: borderRadiusSmall;
  clip-path: polygon(
    spaceNone spaceNone,
    calc(spaceFluid - paddingStageArrow) spaceNone,
    spaceFluid spaceHalfFluid,
    calc(spaceFluid - paddingStageArrow) spaceFluid,
    spaceNone spaceFluid,
    spaceNone spaceHalfFluid
  );
}

.endStageArrow {
  border-top-right-radius: borderRadiusSmall;
  border-bottom-right-radius: borderRadiusSmall;
  clip-path: polygon(
    spaceNone spaceNone,
    spaceFluid spaceNone,
    spaceFluid spaceHalfFluid,
    spaceFluid spaceFluid,
    spaceNone spaceFluid,
    paddingStageArrow spaceHalfFluid
  );
}

.inBetweenStageArrow {
  clip-path: polygon(
    spaceNone spaceNone,
    calc(spaceFluid - paddingStageArrow) spaceNone,
    spaceFluid spaceHalfFluid,
    calc(spaceFluid - paddingStageArrow) spaceFluid,
    spaceNone spaceFluid,
    paddingStageArrow spaceHalfFluid
  );
}