@import "~@cultureamp/kaizen-design-tokens/sass/color";
@import "~@cultureamp/kaizen-component-library/styles/color";
@import "~@cultureamp/kaizen-component-library/styles/type";
@import "~@cultureamp/kaizen-component-library/styles/border";

$top: $ca-grid;
$left: $ca-grid;
$icon-width: 18px;
$line-width: 2px;

.iconWrapper {
  position: absolute;
  top: $top;
  left: $left;
  width: $icon-width;
  height: $icon-width;
  line-height: 0; // To avoid problems with the icon being inline-block and having extra whitespace
}

.dot {
  width: 8px;
  height: 8px;
  position: absolute;
  top: 50%;
  left: 50%;
  background: $kz-color-seedling-500;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}

.upcomingIcon {
  composes: iconWrapper;
  color: $kz-color-wisteria-400;
}

.currentInactionableIcon {
  composes: iconWrapper;
  color: $kz-color-wisteria-400;
}

.currentActionableIcon {
  composes: iconWrapper;
  color: $kz-color-cluny-500;
}

.currentStartedIcon {
  composes: iconWrapper;
  color: $kz-color-seedling-500;
}

.completedIcon {
  composes: iconWrapper;
  color: $kz-color-seedling-500;
}

.topLine {
  position: absolute;
  top: 0;
  left: calc(#{$ca-grid} + #{$icon-width/2 - $line-width/2});
  width: $line-width;
  height: calc(#{$top} - 1px);
  border-radius: 0 0 $line-width $line-width;
}

.greenTopLine {
  composes: topLine;
  background: $kz-color-seedling-500;
}

.greyTopLine {
  composes: topLine;
  background: $ca-border-color;
}

.bottomLine {
  position: absolute;
  bottom: 0;
  left: calc(#{$ca-grid} + #{$icon-width/2 - $line-width/2});
  width: $line-width;
  top: calc(#{$top} + #{$icon-width + 1px});
  border-radius: $line-width $line-width 0 0;
}

.greenBottomLine {
  composes: bottomLine;
  background: $kz-color-seedling-500;
}

.greyBottomLine {
  composes: bottomLine;
  background: $kz-color-wisteria-200;
}