@st-namespace 'ThreeDotsLoader-deprecated-st-css';
:import {
    -st-from: "../../common/formatters.st";
    -st-named: color, fallback;
}

/*Defaults*/
:vars {
    DefaultColor: color(color-5);
}

/*Overrides*/
:vars {
    /*
      @default color-5
    */
    Color: --overridable;
}

/*
 * @default color-5
 * @type color
 */
@property st-global(--wix-ui-tpa-three-dots-loader-color);

:vars {
    UsedColor: color(fallback(value(Color), value(DefaultColor)));
    DotSize: 6px;
    SpaceSize: 4px;
}

.root {
  -st-states: static;
  position:relative;
  height: calc(2px + value(DotSize));
  width: calc(value(DotSize) * 3 + value(SpaceSize) * 2 + 2px);
}

.dots,
.dots::before,
.dots::after {
  border-radius: 50%;
  width: value(DotSize);
  height: value(DotSize);
  background-color: transparent;
  animation-fill-mode: both;
  /* 1px margin for aliasing */
  top: calc(0px - 1px - value(DotSize));
  animation: pulse 2s infinite ease-in-out;

}

.root:static::dots,
.root:static::dots::after,
.root:static::dots::before {
  animation: none;
  box-shadow: 0 calc(2px + value(DotSize)) 0 0;
}

.dots {
  color: value(UsedColor);
  position: relative;
  animation-delay: -0.16s;
  margin: 0 auto;
}

.dots::before,
.dots::after {
  content: '';
  position: absolute;
  top: 0;
}

.dots::before {
  left: calc(0px - value(DotSize) - value(SpaceSize));
  animation-delay: -0.32s;
}

.dots::after {
  left: calc(value(DotSize) + value(SpaceSize));
}

@keyframes pulse {
  0%,
  80%,
  100% {
    box-shadow: 0 calc(2px + value(DotSize)) 0 -15px;
  }
  40% {
    box-shadow: 0 calc(2px + value(DotSize)) 0 0;
  }
}

/* st-namespace-reference="../../../../src/components/ThreeDotsLoader/ThreeDotsLoader.deprecated.st.css" */