$skeleton-loader-mask-color: $white !default;
$skeleton-loader-mask-color-dark: $dark !default;
$skeleton-loader-mask-color-light: $light !default;
$skeleton-loader-mask: escape-svg(str-replace(url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='768' height='332'%3E%3Cpath d='M0 0h768v332H0V0zm0 0h220v48H0V0zm0 64h308v96H0V64zm0 112h418v96H0v-96zM324 64h444v96H324V64zm110 112h304v96H434v-96zM0 288h188v44H0v-44zm204 0h154v44H204v-44z' fill='#{$skeleton-loader-mask-color}' fill-rule='evenodd' /%3E%3C/svg%3E"), "#", "%23")) !default;
$skeleton-loader-mask-dark: str-replace($skeleton-loader-mask, str-replace(#{'fill=\'' + $skeleton-loader-mask-color + '\''}, "#", "%23"), str-replace(#{'fill=\'' + $skeleton-loader-mask-color-dark + '\''}, "#", "%23")) !default;
$skeleton-loader-mask-light: str-replace($skeleton-loader-mask, str-replace(#{'fill=\'' + $skeleton-loader-mask-color + '\''}, "#", "%23"), str-replace(#{'fill=\'' + $skeleton-loader-mask-color-light + '\''}, "#", "%23")) !default;
$skeleton-loader-mask-fill-pixel: escape-svg(str-replace(url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1' height='1'%3E%3Cpath fill='#{$skeleton-loader-mask-color}' d='M0 0h1v1H0z'/%3E%3C/svg%3E"), "#", "%23")) !default;
$skeleton-loader-mask-fill-pixel-dark: str-replace($skeleton-loader-mask-fill-pixel, str-replace(#{'fill=\'' + $skeleton-loader-mask-color + '\''}, "#", "%23"), str-replace(#{'fill=\'' + $skeleton-loader-mask-color-dark + '\''}, "#", "%23")) !default;
$skeleton-loader-mask-fill-pixel-light: str-replace($skeleton-loader-mask-fill-pixel, str-replace(#{'fill=\'' + $skeleton-loader-mask-color + '\''}, "#", "%23"), str-replace(#{'fill=\'' + $skeleton-loader-mask-color-light + '\''}, "#", "%23")) !default;
$skeleton-loader-mask-table: escape-svg(str-replace(url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='768' height='180'%3E%3Cpath d='M0 0h768v180H0V0zm0 10h90v24H0V10zm0 45h70v24H0V55zm0 45h80v24H0v-24zm0 45h90v24H0v-24zM114 10h100v24H114V10zm0 45h120v24H114V55zm0 45h130v24H114v-24zm0 45h110v24H114v-24zM268 10h100v24H268V10zm0 45h80v24h-80V55zm0 45h100v24H268v-24zm0 45h110v24H268v-24zM402 10h90v24h-90V10zm0 45h70v24h-70V55zm0 45h80v24h-80v-24zm0 45h90v24h-90v-24zM516 10h90v24h-90V10zm0 45h110v24H516V55zm0 45h120v24H516v-24zm0 45h100v24H516v-24zm144 0h84v24h-84v-24zm0-45h74v24h-74v-24zm0-45h64v24h-64V55zm0-45h84v24h-84V10zM0 44h768v1H0v-1zm0 45h768v1H0v-1zm0 45h768v1H0v-1zm0 45h768v1H0v-1z' fill='#{$skeleton-loader-mask-color}' fill-rule='evenodd' /%3E%3C/svg%3E"), "#", "%23")) !default;
$skeleton-loader-mask-table-dark: str-replace($skeleton-loader-mask-table, str-replace(#{'fill=\'' + $skeleton-loader-mask-color + '\''}, "#", "%23"), str-replace(#{'fill=\'' + $skeleton-loader-mask-color-dark + '\''}, "#", "%23")) !default;
$skeleton-loader-mask-table-light: str-replace($skeleton-loader-mask-table, str-replace(#{'fill=\'' + $skeleton-loader-mask-color + '\''}, "#", "%23"), str-replace(#{'fill=\'' + $skeleton-loader-mask-color-light + '\''}, "#", "%23")) !default;
$skeleton-loader-mask-list: escape-svg(str-replace(url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1' height='40'%3E%3Cpath fill='#{$skeleton-loader-mask-color}' d='M0 24h1v16H0z'/%3E%3C/svg%3E"), "#", "%23")) !default;
$skeleton-loader-mask-list-dark: str-replace($skeleton-loader-mask-list, str-replace(#{'fill=\'' + $skeleton-loader-mask-color + '\''}, "#", "%23"), str-replace(#{'fill=\'' + $skeleton-loader-mask-color-dark + '\''}, "#", "%23")) !default;
$skeleton-loader-mask-list-light: str-replace($skeleton-loader-mask-list, str-replace(#{'fill=\'' + $skeleton-loader-mask-color + '\''}, "#", "%23"), str-replace(#{'fill=\'' + $skeleton-loader-mask-color-light + '\''}, "#", "%23")) !default;

.skeleton-loader {
  position: relative;
  overflow: hidden;
  height: 332px;
  &::before {
    background-size: 768px 332px, 100% 100%;
    background-repeat:no-repeat;
    background-image: $skeleton-loader-mask, $skeleton-loader-mask-fill-pixel;
    display: block;
    position: absolute;
    content: '';
    z-index: 1;
    height: 100%;
    width: 100vw;
    top: 0;
    background-position-x: 0, 768px;

  }
  &::after {
    background: linear-gradient(80deg, $gray-100 10%, $gray-200 80%, transparent 90%), $gray-100;
    animation-duration: 2800ms;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-name: skeletonLoader;
    animation-timing-function: ease-out;
    background-size: 50% 100%;
    background-repeat: no-repeat;
    position: absolute;
    content: '';
    z-index: 0;
    height: 100%;
    width: 100vw;
    top: 0;
  }
  &.skeleton-loader-list {
    max-width: 320px;
    height: 224px;
    &::before {
      background-size: 1px 40px;
      background-repeat: repeat;
      background-image: $skeleton-loader-mask-list;
    }
  }
  &.skeleton-loader-table {
    max-height: 100%;
    height: 181px;
    &::before {
      background-size: 768px 180px;
      background-position-y: 1px;
      background-repeat: repeat;
      background-image: $skeleton-loader-mask-table;
      }
  }
  &.skeleton-loader-fill-sm {
    height: 24px;
    &::before {
      background: none;
    }
  }
  &.skeleton-loader-fill {
    height: 44px;
    &::before {
      background: none;
    }
  }
  &.skeleton-loader-fill-full {
    height: 100%;
    &::before {
      background: none;
    }
  }
  &.bg-dark {
    &::before {
      background-size: 768px 332px, 100% 100%;
      background-repeat:no-repeat;
      background-image: $skeleton-loader-mask-dark, $skeleton-loader-mask-fill-pixel-dark;
      background-position-x: 0, 768px;
    }
    &::after {
      background: linear-gradient(80deg, lighten($dark, 5%) 10%, lighten($dark, 10%) 80%, transparent 90%), lighten($dark, 5%);
      background-size: 50% 100%;
      background-repeat: no-repeat;
    }
    &.skeleton-loader-list {
      &::before {
        background-size: 1px 40px;
        background-repeat: repeat;
        background-image: $skeleton-loader-mask-list-dark;
      }
    }
    &.skeleton-loader-table {
      &::before {
        background-size: 768px 180px;
        background-position-y: 1px;
        background-repeat: repeat;
        background-image: $skeleton-loader-mask-table-dark;
      }
    }
  }
  &.bg-light {
    &::before {
      background-size: 768px 332px, 100% 100%;
      background-repeat:no-repeat;
      background-image: $skeleton-loader-mask-light, $skeleton-loader-mask-fill-pixel-light;
      background-position-x: 0, 768px;
    }
    &::after {
      background: linear-gradient(80deg, darken($light, 5%) 10%, darken($light, 10%) 80%, transparent 90%), darken($light, 5%);
      background-size: 50% 100%;
      background-repeat: no-repeat;
    }
    &.skeleton-loader-list {
      &::before {
        background-size: 1px 40px;
        background-repeat: repeat;
        background-image: $skeleton-loader-mask-list-light;
      }
    }
    &.skeleton-loader-table {
      &::before {
        background-size: 768px 180px;
        background-position-y: 1px;
        background-repeat: repeat;
        background-image: $skeleton-loader-mask-table-light;
      }
    }
  }
}
@include media-breakpoint-up(sm) {
  .skeleton-loader {
    &::after {
      animation-duration: 2400ms;
    }
    &.delay-3::after {
      animation-delay: 200ms;
    }
  }
}
@include media-breakpoint-up(md) {
  .skeleton-loader {
    &::after {
      animation-duration: 2200ms;
    }
    &.delay-3::after {
      animation-delay: 400ms;
    }
    &.delay-2::after {
      animation-delay: 300ms;
    }
    &.delay-1::after {
      animation-delay: 200ms;
    }
  }
}
@include media-breakpoint-up(lg) {
  .skeleton-loader {
    &::after {
      animation-duration: 2000ms;
    }
    &.skeleton-loader-table {
      height: 316px;
    }
  }
}

@include media-breakpoint-up(xl) {
  .skeleton-loader {
    &::after {
      animation-duration: 2000ms;
    }
    &.skeleton-loader-table {
      height: 451px;
    }
  }
}

@keyframes skeletonLoader {
  0% {
    background-position-x: -100%;
  }
  70%, 100% {
    background-position-x: calc(-100% + 1536px);
  }
}