@import '~@cainiaofe/cn-ui-m-theme/token.px.scss';
@import '../../styles/keyframes.scss';
@import '../../styles/mixins.scss';

$m-loading-prefix: 'cn-ui-m-loading';

.#{$hashClassName}.#{$m-loading-prefix} {
  width: 100%;
  display: flex;
  justify-content: center;

  // size
  &-small {
    .cn-ui-m-loading-indicator {
      width: $m-s-16;
      height: $m-s-16;
    }
  }

  &-medium {
    .cn-ui-m-loading-indicator {
      width: $m-s-28;
      height: $m-s-28;
    }
  }

  &-large {
    .cn-ui-m-loading-indicator {
      width: $m-s-40;
      height: $m-s-40;
    }
  }

  &-relative {
    width: auto;
    display: inline-block;
    position: relative;
  }

  .cn-ui-m-load-svg {
    color: $m-color-primary;
  }

  .cn-load {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border-width: 2px;
    border-style: solid;
    border-top-color: $m-color-bg-dark;
    border-left-color: $m-color-primary;
    border-bottom-color: $m-color-primary;
    border-right-color: $m-color-bg-dark;
  }

  .#{$m-loading-prefix} {
    &-tip-content {
      word-break: break-all;
      color: $m-color-text-title3;
    }

    &-indicator {
      animation: rotateCircle infinite 0.8s linear;
    }

    &-with-children {
      display: block;
      position: absolute;
      top: 50%;
      left: 50%;
      z-index: 4;
      transform: translate(-50%, -50%);
      text-align: center;
    }

    &-component {
      filter: blur(0);
      opacity: 0.15;
    }

    &-masker {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 99;
      opacity: 0.2;
      background: $m-color-bg-white;
    }
  }

  &-inverse {
    .cn-ui-m-load-svg {
      color: $m-color-bg-white;
    }
    .#{$m-loading-prefix}-tip-content {
      color: $m-color-bg-white;
    }
    .cn-load {
      border-top-color: $m-color-bg-dark;
      border-left-color: $m-color-bg-white;
      border-bottom-color: $m-color-bg-white;
      border-right-color: $m-color-bg-dark;
    }
  }
}

.#{$hashClassName}.#{$m-loading-prefix}-toast {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: $m-s-114;
  background-color: $m-color-bg-toast;
  z-index: $cn-loading-toast-z-index;
  border-radius: $m-radius;
  padding: $m-s-24 $m-s-12;
  text-align: center;

  .cn-ui-m-loading-anim {
    height: $m-s-40;
    width: $m-s-40;
    color: $m-color-bg-white;
    animation: rotateCircle infinite 1s linear;
    margin: auto;
    margin-bottom: $m-s-16;
  }

  .cn-ui-m-loading-text {
    color: $m-color-bg-white;
    font-size: $m-font-size-body-1;
  }
}