@import "../lib.less";
@import "../variables/components/loading.less";

.@{veui-prefix}-loading {
  line-height: 1.5;
  align-items: center;
  display: inline-flex;
  font-size: @veui-loading-font-size-m;
  .veui-transition(opacity);

  &-fade-enter,
  &-fade-leave-to {
    opacity: 0;
  }

  &[ui~="s"] {
    font-size: @veui-loading-font-size-s;
  }

  &[ui~="l"] {
    font-size: @veui-loading-font-size-l;
  }

  &[ui~="overlay"] {
    display: flex;
    .absolute(0);
    justify-content: center;
    background-color: @veui-loading-background-color;
    border-radius: inherit;
    backdrop-filter: blur(1px);

    &[ui~="reverse"] {
      background-color: @veui-loading-background-color-reverse;
    }
  }

  &-text {
    color: @veui-loading-font-color-normal;
    margin-left: @veui-loading-content-spacing;

    .@{veui-prefix}-loading[ui~="strong"] & {
      color: @veui-loading-font-color-strong;
    }

    .@{veui-prefix}-loading[ui~="reverse"] & {
      color: @veui-loading-font-color-reverse;
    }
  }

  &-spinner {
    display: flex;
    color: @veui-loading-color-normal;

    .@{veui-prefix}-loading-content,
    .@{veui-prefix}-icon {
      .veui-icon-size(@veui-loading-size-m);
    }

    .@{veui-prefix}-loading[ui~="s"] & {
      .@{veui-prefix}-loading-content,
      .@{veui-prefix}-icon {
        .veui-icon-size(@veui-loading-size-s);
      }
    }

    .@{veui-prefix}-loading[ui~="l"] & {
      .@{veui-prefix}-loading-content,
      .@{veui-prefix}-icon {
        .veui-icon-size(@veui-loading-size-l);
      }
    }

    .@{veui-prefix}-loading[ui~="strong"] & {
      color: @veui-loading-color-strong;
    }

    .@{veui-prefix}-loading[ui~="reverse"] & {
      color: @veui-loading-color-reverse;
    }

    .@{veui-prefix}-loading[ui~="vertical"] & {
      margin-bottom: @veui-loading-padding;
    }
  }

  &[ui~="vertical"] {
    flex-direction: column;

    .@{veui-prefix}-loading-text {
      margin-left: 0;
    }
  }
}