.nut-indicator {
  &__dot {
    margin: 0 $indicator-dot-margin;

    &:first-child {
      margin-left: 0px;
    }

    &:last-child {
      margin-right: 0px;
    }
  }

  &__dot {
    display: inline-block;
    vertical-align: middle;
    width: $indicator-dot-size;
    height: $indicator-dot-size;
    border-radius: 50%;
    background-color: $indicator-dot-color;
  }

  &__active {
    width: $indicator-dot-active-size;
    border-radius: $indicator-border-size;
    background-color: $indicator-color;
  }

  &__vertical {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .nut-indicator__dot {
      margin: $indicator-dot-vertical-margin 0;

      &:first-child {
        margin-top: 0px;
      }

      &:last-child {
        margin-bottom: 0px;
      }
    }

    .nut-indicator__active {
      width: $indicator-dot-size;
      height: $indicator-dot-active-size;
    }
  }
}