@use '../../internals/Box/styles/index' as box;
@use './mixin';
@use './variables';

//
// Loader
// --------------------------------------------------

.rs-loader {
  &-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--rs-spacing) * 3);
  }

  // Loader spin
  &-spin {
    position: relative;
    display: inline-block;
    @include mixin.loader-size(var(--rs-loader-size));
    @include mixin.loader-spin;
  }

  &-content {
    font-size: var(--rs-loader-font-size);
  }

  // Backdrop
  &-backdrop {
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    width: 100%;
    height: 100%;
    background: var(--rs-loader-backdrop);
  }

  // Vertical
  &[data-direction="vertical"] {
    .rs-loader-box {
      flex-direction: column;
    }
  }

  // inverse
  &[data-inverse="true"] {
    .rs-loader-content {
      color: var(--rs-text-inverse);
    }

    .rs-loader-backdrop {
      background: var(--rs-loader-backdrop-inverse);
    }

    .rs-loader-spin::before {
      border-color: var(--rs-loader-ring-inverse);
    }

    .rs-loader-spin::after {
      border-top-color: var(--rs-loader-rotor-inverse);
    }
  }

  // Loader speeds
  &[data-speed="fast"] &-spin::after {
    animation-duration: var(--rs-loader-duration-fast);
  }

  &[data-speed="normal"] &-spin::after {
    animation-duration: var(--rs-loader-duration-normal);
  }

  &[data-speed="slow"] &-spin::after {
    animation-duration: var(--rs-loader-duration-slow);
  }

  &[data-speed="paused"] &-spin::after {
    animation-play-state: var(--rs-loader-duration-paused);
  }

  // Position center
  &[data-center="true"] {
    position: absolute;
    top: 0;
    bottom: 0;
    inset-inline-start: 0;
    inset-inline-end: 0;
    margin: auto;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    .rs-loader-content {
      z-index: 1;
    }
  }
}

// Size variants
$sizes: (xs, sm, md, lg);

@each $size in $sizes {
  .rs-loader[data-size='#{$size}'] {
    --rs-loader-size: var(--rs-loader-size-#{$size});
    --rs-loader-font-size: var(--rs-loader-font-size-#{$size});
  }
}

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

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