@import '../variables/default.scss';
@import '../mixins/index.scss';

$ink-loading-spin-size: 56px !default;
$ink-loading-spin-color: $ink-color-brand !default;
$ink-loading-text-color: $ink-color-text-secondary !default;
$ink-loading-text-font-size: $ink-font-size-md !default;
$ink-loading-text-line-height: $ink-line-height-md !default;
$ink-loading-text-margin: $ink-spacing-xs !default;

@keyframes ink-loading {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.ink-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  &--horizontal {
    flex-direction: row;

    .ink-loading__text {
      margin: 0 0 0 $ink-loading-text-margin;
    }
  }

  &__spin {
    width: $ink-loading-spin-size;
    height: $ink-loading-spin-size;
    border: $ink-one-px solid transparent;
    border-color: $ink-loading-spin-color $ink-loading-spin-color transparent;
    animation: ink-loading 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    border-radius: $ink-border-radius-circle;
  }

  &__text {
    margin: $ink-loading-text-margin 0 0;
    font-size: $ink-loading-text-font-size;
    line-height: $ink-loading-text-line-height;
    color: $ink-loading-text-color;
  }
}