@import '@/styles/common.less';
@import '@/styles/variables.less';

.loading-dialog {

  &__dialog-content {
    .flex-column();

    @keyframes spin {
      from {
        transform: rotate(0deg);
      }

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

    &__icon-wrapper {
      position: relative;
      width: 188px;
      height: 188px;
    }

    &__icon-bg {
      width: 100%;
      height: 100%;
      padding: 8px;
      background: conic-gradient(#6D3DF5, 30%, #ECE5FF);
      border-radius: 50%;
      animation: spin 1.5s linear infinite reverse;
    }

    &__icon {
      width: 188px;
      height: 188px;
      border-radius: 50%;
      background: #F2F2F2;
      position: absolute;
      top: 8px;
      left: 8px;
    }

    &__title {
      font-size: 36px;
      font-weight: 500;
      line-height: 58px;
      margin-top: 24px;
    }
  }

}