@import '../styles/themes/themes.less';
@import '../styles/mixins/mixins.less';

@dotSize: 14px;
@dotGap: 10px;
@ovalWidth: 6px;
@ovalHeight: 8px;
@ovalGap: 20px;
@titleMarginTop: 8px;
@spinOvalGap: 24px;

@miniDotSize: 3px;
@miniDotGap: 3px;
@miniOvalWidth: 2px;
@miniOvalHeight: 3px;
@miniOvalGap: 8px;
@miniSpinOvalGap: 8px;

@smallDotSize: 6px;
@smallDotGap: 6px;
@smallOvalWidth: 4px;
@smallOvalHeight: 5px;
@smallOvalGap: 11px;
@smallSpinOvalGap: 16px;

@largeDotSize: 20px;
@largeDotGap: 12px;
@largeOvalWidth: 8px;
@largeOvalHeight: 12px;
@largeOvalGap: 26px;
@largeSpinOvalGap: 34px;

.create-rotate(@time, @deg) {
  transform: rotate(@deg);
  animation-delay: -@time;
}

.loading-theme(@theme) {
  .oval,
  .dot,
  .dot-1,
  .dot-2,
  .dot-3,
  .dot-4 {
    background-color: @theme;
  }
}

@sizeSelectors: mini, small, large;
@selectors: @danger-color, @warning-color, @success-color, @primary-color;
@themeSelectors: {
  success: @success-color;
  danger: @danger-color;
  warning: @warning-color;
  primary: @primary-color;
  white: @white-color;
  default: @light-gray;
};

.@{bk-prefix}-loading-wrapper {
  position: static;
  vertical-align: middle;
  &:not(.@{bk-prefix}-nested-loading):not(.@{bk-prefix}-directive-loading) {
    display: inline-flex;
  }

  &.@{bk-prefix}-directive-loading {
    width: 100%;
    height: 100%;
  }

  &.@{bk-prefix}-directive-loading,
  &.@{bk-prefix}-nested-loading {
    position: relative;
    // width: 100%;
    // height: 100%;

    &.is-block {
      display: block;
    }

    .@{bk-prefix}-loading-indicator {
      position: absolute;
      top: 50%;
      left: 50%;
      z-index: 11;
      text-align: center;
      transform: translate(-50%, -50%);
    }
  }

  .dot {
    display: inline-flex;
    width: @dotSize;
    height: @dotSize;
    margin-right: @dotGap;
    border-radius: 50%;
    transform: scale(.6);
    animation-duration: .8s;
    animation-iteration-count: infinite;
    animation-name: loading-scale-animate;
    animation-direction: normal;
  }

  .oval {
    position: absolute;

    width: @ovalWidth;
    height: @ovalHeight;
    background-color: @default-color;
    border-radius: @ovalHeight;
    animation-duration: 1.2s;
    animation-iteration-count: infinite;
    animation-name: fade;
    transform-origin: center @spinOvalGap;
  }

  .@{bk-prefix}-loading-mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  .@{bk-prefix}-loading-indicator {
    display: flex;
    line-height: 1;
    text-align: center;
    flex-direction: column;
    each(@themeSelectors, {
      &.@{bk-prefix}-loading-@{key} {
        .loading-theme(@value);
      }
    })

      each(@selectors, {
      .dot-@{index} {
        background-color: @value;
        animation-delay: .1s + (@index - 1) * .15;
        & when (@index = 4) {
          margin-right: 0px;
        }
      }
    });

    each(range(8), {
      .oval-@{value} {
        .create-rotate(.45s + ((@value - 1) * .15), 135deg - (45 * (@value - 1)));
      }
    });

    .@{bk-prefix}-normal-indicator {
      display: inline-flex;
      justify-content: center;
    }

    .@{bk-prefix}-spin-indicator {
      position: relative;
      display: inline-flex;
      justify-content: center;
      width: 2 * @spinOvalGap;
      height: 2 * @spinOvalGap;
    }

    each(@sizeSelectors, {
    @sizedDotSize: '@{value}DotSize';
    @sizedDotGap: '@{value}DotGap';
    @sizedOvalWidth: '@{value}OvalWidth';
    @sizedOvalHeight: '@{value}OvalHeight';
    @sizedOvalGap: '@{value}OvalGap';
    @sizedSpinOvalGap: '@{value}SpinOvalGap';

    &.@{bk-prefix}-loading-size-@{value} {
      .@{bk-prefix}-spin-indicator  {
        height: 2 * @@sizedSpinOvalGap;
        width: 2 * @@sizedSpinOvalGap;
      }
      .dot {
        width: @@sizedDotSize;
        height: @@sizedDotSize;
        margin-right: @@sizedDotGap;
        &.dot-4 {
          margin-right: 0;
        }
      }
      .oval {
        width: @@sizedOvalWidth;
        height: @@sizedOvalHeight;
        border-radius: @@sizedOvalHeight;
        transform-origin: center @@sizedSpinOvalGap;
      }
      .@{bk-prefix}-loading-title {
        font-size: if(@value = small, @font-size-base, @font-size-medium);
      }
    }
  })
    .@{bk-prefix}-loading-title {
      margin-top: @titleMarginTop;
      font-size: @font-size-medium;
      line-height: normal;
      color: @default-color;
      text-align: center;
    }
  }
}
