/**
 * Spinner
 * @define spinner
 */

@use 'sass:map';

// Exposed variables
$theme: null !default;
$spinner: null !default;

// Internal variables
$_spinner-sizes: (
  'small': 1.5rem,
  'medium': 2rem,
  'large': 3rem,
);

.ecl-spinner {
  align-items: center;
  display: none;
  flex-direction: column;
  margin: 0 var(--s-xs);
  position: relative;
  z-index: #{map.get($theme, 'z-index', 'modal') + 1};
}

.ecl-spinner--visible {
  display: inline-flex;
}

.ecl-spinner__loader {
  animation: rotate 2s linear infinite;
  height: map.get($_spinner-sizes, 'medium');
  stroke: map.get($spinner, 'stroke-color');
  stroke-linecap: map.get($spinner, 'stroke_linecap');
  transform-origin: center center;
  width: map.get($_spinner-sizes, 'medium');
}

.ecl-spinner__text {
  color: map.get($spinner, 'text-color');
  font: var(--f-m);
  margin-top: var(--s-xs);
}

.ecl-spinner__circle {
  animation:
    dash 1.5s ease-in-out infinite,
    color 6s ease-in-out infinite;
  stroke-dasharray: 1, 200;
  stroke-dashoffset: 0;
}

@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}

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

  50% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -35px;
  }

  100% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -124px;
  }
}

// Centered
.ecl-spinner--centered {
  left: 0;
  margin-left: auto;
  margin-right: auto;
  position: absolute;
  right: 0;
  top: var(--s-2xl);
}

// Inverted
.ecl-spinner--inverted {
  .ecl-spinner__loader {
    stroke: map.get($theme, 'color', 'white');
  }

  .ecl-spinner__text {
    color: map.get($theme, 'color', 'white');
  }
}

// Sizes
.ecl-spinner--l .ecl-spinner__loader {
  height: map.get($_spinner-sizes, 'large');
  width: map.get($_spinner-sizes, 'large');
}

.ecl-spinner--s {
  flex-direction: row;
  justify-content: center;

  .ecl-spinner__loader {
    height: map.get($_spinner-sizes, 'small');
    width: map.get($_spinner-sizes, 'small');
  }

  .ecl-spinner__text {
    margin-inline-start: var(--s-xs);
    margin-top: 0;
  }

  .ecl-spinner__circle {
    stroke-width: 2px;
  }
}

// Overlay
.ecl-spinner__overlay {
  background-color: rgb(255 255 255 / 0.9);
  display: none;
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: map.get($theme, 'z-index', 'modal');
}

.ecl-spinner__overlay--visible {
  display: block;

  & ~ .ecl-spinner--visible {
    position: fixed;
  }

  & ~ .ecl-spinner--inverted {
    .ecl-spinner__loader {
      stroke: map.get($spinner, 'stroke-color');
    }

    .ecl-spinner__text {
      color: map.get($spinner, 'text-color');
    }
  }
}
