.nut-indicator {
  &--block {
    display: block;
    width: 100%;
  }

  &--align__left {
    text-align: left;
  }

  &--align__right {
    text-align: right;
  }

  &--align__center {
    text-align: center;
  }

  &--dot,
  &--number {
    margin: 0 4px;

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

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

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

  &--number {
    position: relative;
    display: inline-block;
    width: $indicator-size;
    height: $indicator-size;
    font-size: $indicator-number-font-size;
    line-height: $indicator-size;
    color: $indicator-color;
    text-align: center;
    vertical-align: middle;
    background-color: $indicator-bg-color;
    border: 1px solid $indicator-color;
    border-radius: 50%;
    box-shadow: 0 0 1px 1px $indicator-bg-color;
  }
}