@import 'moda-themes/themes';

$dot-size: 1.65em;
$width: 22em;

.mo-display-progress-dots {
  font-family: font-family('sans');
  margin-left: $dot-size;
  font-size: 12px;
  display: flex;
  width: $width;

  &__dot {
    background-color: color('white');
    border: 1px solid color('sidewalk');
    display: inline-block;
    border-radius: 50%;
    height: $dot-size;
    width: $dot-size;

    &--active {
      background-color: color('cement');
      border: 1px solid color('cement');

      &:after {
        font-weight: bold;
      }
    }

    &:after {
      content: attr(data-label);
      position: absolute;
      margin-left: -1em;
      margin-top: 2em;
    }
  }

  hr {
    width: calc(50% - #{$dot-size} - 0.5em);
    border: 0.5px solid color('sidewalk');
    display: inline-block;
    margin-top: 0.75em;
    height: 1px;

    &:last-of-type {
      display: none;
    }
  }
}