@import "skeleton-text.vars";

// Skeleton Text
// --------------------------------------------------

:host {
    /**
     * --background: Background of the skeleton text
     */
    --background: #{$skeleton-text-bar-background-color};

    display: inline-block;

    width: 100%;
    pointer-events: none;

    user-select: none;
}



span {
    display: inline-block;

    background: var(--background);

    font-size: 8px;
}
:host(.should-animate) {
  span {
    @-webkit-keyframes AnimationName {
      0%{
background-position:0% 50%;
}
      50%{
background-position:100% 50%;
}
      100%{
background-position:0% 50%;
}
    }

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

    @keyframes AnimationName {
      0%{
background-position:0% 50%;
}
      50%{
background-position:100% 50%;
}
      100%{
background-position:0% 50%;
}
    }
    background: linear-gradient(-45deg, $neutral_lightest, $neutral_darker);
    background-size: 200% 100%;
    -webkit-animation: AnimationName 2s ease infinite;
    -moz-animation: AnimationName 2s ease infinite;
    animation: AnimationName 2s ease infinite;
  }
}