@import 'variables/gutters';
@import 'variables/breakpoints';

$typography__margin--text: u(6);
$animation__duration--sweep: 4s;
$ui__color--gray-10: #f5f5f5;
$ui__color--gray-20: #efefef;
$ui__color--gray-30: #d1d1d1;
$ui__color--skeleton-text: linear-gradient(
    to left,
    $ui__color--gray-20,
    $ui__color--gray-20 40%,
    $ui__color--gray-10 50%,
    $ui__color--gray-20 60%,
    $ui__color--gray-20
);
$ui__color--skeleton-head: linear-gradient(
    to left,
    $ui__color--gray-30,
    $ui__color--gray-30 40%,
    $ui__color--gray-20 50%,
    $ui__color--gray-30 60%,
    $ui__color--gray-30
);
$skeleton__top--height: 2.5rem;
$skeleton__top--height-desktop: 4.5rem;
$skeleton__header--height: 1rem + 0.46875rem;
$skeleton__header--height-desktop: 2rem + 0.3125rem;

:host {

  .ui-skeleton__top {
    animation: ui-skeleton__animation $animation__duration--sweep infinite;
    height: $skeleton__top--height;
    background: $ui__color--skeleton-text;
    background-size: 400%;
    width: 25%;
    margin-bottom: var(--digi--layout--gutter--m);

    @media (min-width: $digi--layout--breakpoint--l) {
      height: $skeleton__top--height-desktop;
      width: 20%;
      margin-bottom: $digi--layout--gutter--l;
    }
  }

  .ui-skeleton__header {
    animation: ui-skeleton__animation $animation__duration--sweep infinite;
    background: $ui__color--skeleton-head;
    background-size: 400%;
    width: 33%;
    height: $skeleton__header--height;
    margin-bottom: var(----digi--layout--gutter--s);

    @media (min-width: $digi--layout--breakpoint--l) {
      height: $skeleton__header--height-desktop;
      margin-bottom: $digi--layout--gutter--l;
      width: 90%;
    }
  }

  .ui-skeleton__line {
    animation: ui-skeleton__animation $animation__duration--sweep 0.5s infinite;
    background: $ui__color--skeleton-text;
    background-size: 400%;
    margin-bottom: var(--digi--layout--gutter--xs);
    height: var(--digi--typography--font-size);
  }


  .ui-skeleton__line--last {
    width: 75%;
    margin-bottom: var(--digi--layout--gutter);
  }

  .ui-skeleton__text {

    font-weight: var(--digi--typography--font-weight--semibold);
    margin-bottom: $typography__margin--text / 2;
  }
}

@keyframes ui-skeleton__animation {
  0% {
    background-position-x: 100%;
  }

  100% {
    background-position-x: 0%;
  }
}