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