/* stylelint-disable scss/operator-no-unspaced */
/* stylelint-enable scss/operator-no-unspaced */
/**
 * Spinner component
 * @define spinner
 */
.ecl-spinner {
  align-items: center;
  display: none;
  flex-direction: column;
  margin: 0 0.5rem;
  position: relative;
  z-index: 51;
}

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

.ecl-spinner--centered {
  left: 0;
  margin-left: auto;
  margin-right: auto;
  position: absolute;
  right: 0;
  top: 2.5rem;
}

.ecl-spinner__loader {
  animation: rotate 2s linear infinite;
  height: 2rem;
  stroke: #3e6cd5;
  stroke-linecap: round;
  transform-origin: center center;
  width: 2rem;
}

.ecl-spinner__text {
  font: normal normal 400 1rem/1.25rem arial, sans-serif;
  margin-top: 0.5rem;
}

.ecl-spinner--negative .ecl-spinner__loader {
  stroke: #fff;
}
.ecl-spinner--negative .ecl-spinner__text {
  color: #fff;
}

.ecl-spinner--large .ecl-spinner__loader {
  height: 3rem;
  width: 3rem;
}

.ecl-spinner--small {
  flex-direction: row;
  justify-content: center;
}
.ecl-spinner--small .ecl-spinner__loader {
  height: 1.5rem;
  width: 1.5rem;
}
.ecl-spinner--small .ecl-spinner__text {
  -webkit-margin-start: 0.5rem;
          margin-inline-start: 0.5rem;
  margin-top: 0;
}

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

.ecl-spinner__overlay {
  background-color: rgba(255, 255, 255, 0.9);
  display: none;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 50;
}

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

@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;
  }
}