@st-namespace 'SkeletonLine-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-paragraph-2-color-rgb ] from '@wix/wix-site-theme-variables/stylable-variables.st.css';

/*
 * The start color
 * @type color
 * @default --wix-color-5 with 0.1 opacity
 */
@property st-global(--wix-ui-tpa-skeleton-line-color-start);

/*
 * The middle color
 * @type color
 * @default --wix-color-5 with 0.2 opacity
 */
@property st-global(--wix-ui-tpa-skeleton-line-color-middle);

/*
 * The end color
 * @type color
 * @default --wix-color-5 with 0.1 opacity
 */
@property st-global(--wix-ui-tpa-skeleton-line-color-end);

/*
 * Border radius
 * @type size
 * @default 8px
 */
@property st-global(--wix-ui-tpa-skeleton-line-border-radius);

/*
 * height
 * @type size
 * @default 12px
 */
@property st-global(--wix-ui-tpa-skeleton-line-height);

/*
 * width
 * @type size
 * @default 280px
 * @playground { "max": 500 }
 */

@property st-global(--wix-ui-tpa-skeleton-line-width);


.skeletonLine {
  height: var(--wix-ui-tpa-skeleton-line-height, 12px);
  width: var(--wix-ui-tpa-skeleton-line-width, 280px);
  border-radius: var(--wix-ui-tpa-skeleton-line-border-radius, 8px);
  background: linear-gradient(
          90deg,
          createColor(--wix-ui-tpa-skeleton-line-color-start, var(--wst-paragraph-2-color-rgb, var(--wix-color-5)), 0.1) 25%,
          createColor(--wix-ui-tpa-skeleton-line-color-middle, var(--wst-paragraph-2-color-rgb, var(--wix-color-5)), 0.2) 37%,
          createColor(--wix-ui-tpa-skeleton-line-color-end, var(--wst-paragraph-2-color-rgb, var(--wix-color-5)), 0.1) 63%,
  );
  background-size: 400% 100%;
  animation-name: slide;
  animation-duration: 1.4s;
  animation-timing-function: ease;
  animation-iteration-count: infinite;
}


@keyframes slide {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}


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