.column-indicator {
  overflow: visible;
  transform: translate(-50%, -50%);

  @include abs-position(50%, auto, auto, 50%);

  &--loading & {
    &__figure {
      border: 6px solid lighten($ui-base-color, 26%);
    }
  }

  &--missing & {
    &__figure {
      &:before {
        @include pseudo('!');
        @include text-sizing(40px, 600, 1, center);
        @include abs-position(0, 0, 0, 0, false);
      }
    }
  }

  &__figure {
    transform: translate(-50%, -50%);
    box-sizing: border-box;
    background-color: transparent;

    @include circle(42px);
    @include abs-position(50%, auto, auto, 50%);
  }

  span {
    display: block;
    float: left;
    margin-left: 50%;
    transform: translateX(-50%);
    margin: 82px 0 0 50%;
    white-space: nowrap;
    color: $dark-text-color;

    @include text-sizing(14px, 400);
  }
}

.no-reduce-motion .column-indicator--loading span {
  animation: loader-label 1.15s infinite cubic-bezier(0.215, 0.610, 0.355, 1.000);
}

.no-reduce-motion .column-indicator--loading .column-indicator__figure {
  animation: loader-figure 1.15s infinite cubic-bezier(0.215, 0.610, 0.355, 1.000);
}

@keyframes loader-label {
  0% {
    opacity: 0.25;
  }

  30% {
    opacity: 1;
  }

  100% {
    opacity: 0.25;
  }
}

@keyframes loader-figure {
  0% {
    background-color: lighten($ui-base-color, 26%);

    @include size(0);
  }

  29% {
    background-color: lighten($ui-base-color, 26%);
  }

  30% {
    background-color: transparent;
    border-width: 21px;
    opacity: 1;

    @include size(42px);
  }

  100% {
    border-width: 0;
    opacity: 0;
    background-color: transparent;

    @include size(42px);
  }
}