@use 'mixins/mixins' as *;
@use 'mixins/var' as *;
@use 'common/var' as *;

@include b(loading) {
  display: inline-flex;
  align-items: center;
  @include e(icon) {
    width: 1em;
    height: 1em;
    animation: loading-rotate 2s linear infinite;
    flex-shrink: 0;
  }

  @include e(text) {
    margin-left: var(--xzx-padding-xs);
    flex-shrink: 0;
    height: fit-content;
  }

  .path {
    animation: loading-dash 1.5s ease-in-out infinite;
    stroke-dasharray: 90, 150;
    stroke-dashoffset: 0;
    stroke-width: 4;
    stroke: currentColor;
    stroke-linecap: round;
  }

  @keyframes loading-rotate {
    to {
      transform: rotate(360deg);
    }
  }

  @keyframes loading-dash {
    0% {
      stroke-dasharray: 1, 200;
      stroke-dashoffset: 0;
    }

    50% {
      stroke-dasharray: 90, 150;
      stroke-dashoffset: -40px;
    }

    to {
      stroke-dasharray: 90, 150;
      stroke-dashoffset: -120px;
    }
  }
}