@import url('~antd/es/style/themes/default.less');
@import url('~antd/es/style/color/colors.less');
@import url('../style/var.less');

@loading-prefix-cls: ~'@{style-prefix}-loading';
@loading-duration: 1s;
@loading-color: @primary-color;

.@{loading-prefix-cls} {
  display: flex;
  height: 100%;

  &-icon {
    position: relative;
    width: 40px;
    height: 40px;
    animation: bailu-loading-animator @loading-duration linear infinite;
  }

  &-petal {
    position: absolute;
    border-radius: 50%;

    &:nth-child(1) {
      top: 0;
      left: 50%;
      width: 12px;
      height: 12px;
      background-color: @loading-color;
      transform: translateX(-50%);
    }

    &:nth-child(2) {
      top: 26%;
      left: 20%;
      width: 10px;
      height: 10px;
      background-color: color(~`colorPalette('@{primary-color}', 5) `);
      transform: translate(-50%, -50%);
    }

    &:nth-child(3) {
      top: 50%;
      left: 0;
      width: 8px;
      height: 8px;
      background-color: color(~`colorPalette('@{primary-color}', 4) `);
      transform: translateY(-50%);
    }

    &:nth-child(4) {
      top: 71%;
      left: 21%;
      width: 6px;
      height: 6px;
      background-color: color(~`colorPalette('@{primary-color}', 3) `);
      transform: translate(-50%, -50%);
    }
  }
}

@keyframes bailu-loading-animator {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}