@st-namespace 'ThreeDotsLoader-st-css';
@st-import [ --wix-color-5 ] from '@wix/tpa-style-webpack-plugin/stylable-variables.st.css';
@st-import [ createColor ] from '../../common/formatters.st';
@st-import [ --wst-system-line-1-color-rgb ] from '@wix/wix-site-theme-variables/stylable-variables.st.css';

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

/*
 * Three Dots Loader size
 * @default 8px
 * @type size
 */
@property st-global(--wix-ui-tpa-three-dots-loader-size);

:vars {
  size: var(--wix-ui-tpa-three-dots-loader-size, 6px);
  spacing: calc(value(size) * 0.67);
  margin: calc(value(size) * 0.33);
  aliasing: 1px;
}

.root {
  -st-states: static;
  position: relative;
  height: calc(value(margin) + value(size));
  width: calc(value(size) * 3 + value(spacing) * 2 + value(margin));
}

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

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

.dots {
  color: createColor(--wix-ui-tpa-three-dots-loader-color, var(--wst-system-line-1-color-rgb, var(--wix-color-5)));
  position: relative;
  animation-delay: -0.16s;
  margin: 0 auto;
}

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

.dots::before {
  transform: translateX(calc(-100% - value(spacing)));
  animation-delay: -0.32s;
}

.dots::after {
  transform: translateX(calc(100% + value(spacing)));
}

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

@keyframes pulse {

  0%,
  80%,
  100% {
    box-shadow: 0 calc(value(margin) + value(size)) 0 calc(0px - value(size) * 2.5);
  }

  40% {
    box-shadow: 0 calc(value(margin) + value(size)) 0 0;
  }
}

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