/*
 * Skeleton component
 *
 * Skeleton
 *
 */

.dnb-skeleton {
  --skeleton-color: var(--token-color-background-neutral-base);
  --skeleton-color--contrast: var(--token-color-background-neutral);
  --skeleton-delay: 5s;
  --skeleton-duration: 1.5s;
  --skeleton-iteration-count: 20;

  img,
  video {
    filter: brightness(0%) contrast(0%) opacity(0.5);
  }

  &--block {
    display: block;
  }

  // Nicer animation, but requires a hidden overflow
  &--overflow {
    overflow: hidden;
  }

  &--grey {
    filter: grayscale(100%);
  }

  &--shape {
    pointer-events: none;
    position: relative;
    overflow-x: hidden;
    color: transparent; // make text invisible
    background: transparent; // make backgrounds invisible
    box-shadow: none !important; // accordion border needed that
  }

  &--shape#{&}::before,
  &--shape#{&}::after {
    content: '' !important; // because of list markers, we use important here as well

    position: absolute !important;
    z-index: 100 !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    right: 0 !important;

    width: 100% !important; // lists needs that overwrite
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    border-radius: inherit;
    background: none !important;
    box-shadow: none !important;
  }

  &--shape#{&}::before {
    background-color: var(--skeleton-color) !important; // to take presence
  }

  &--shape#{&}::after {
    background-image: repeating-linear-gradient(
      -45deg,
      var(--skeleton-color--contrast) 1px 2px,
      transparent 0 6px
    ) !important;
    background-repeat: repeat !important;
    background-size: 100% !important; // to take presence

    clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
    animation: skeletonLinearAnimation var(--skeleton-duration) linear
      var(--skeleton-iteration-count) var(--skeleton-delay);
  }

  &--code,
  &--font {
    pre,
    pre *,
    code,
    code * {
      --font-family-monospace: 'DNBMonoSkeleton' !important;
      font-family: var(--font-family-monospace) !important;
      font-style: unset !important;
      box-shadow: none !important;
    }
  }

  &--font-only,
  &--font,
  &--font &--show-font,
  &--font .dnb-p {
    pointer-events: none;

    --font-family-default: 'DNBSkeleton' !important;

    font-family: var(--font-family-default) !important;
    font-style: unset !important;

    &::marker {
      color: var(--skeleton-color);
    }
  }

  &--font,
  &--font &--show-font,
  &--font .dnb-p {
    background-position-y: 50% !important;
    background-repeat: no-repeat !important;
    background-size: 30rem 100% !important;

    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;

    background-image: repeating-linear-gradient(
      -45deg,
      var(--skeleton-color--contrast) 1px 2px,
      transparent 0 6px
    ) !important;

    --border-color: var(--skeleton-color);
    background-color: var(--skeleton-color) !important;

    background-position-x: 30rem;
    animation: skeletonFontAnimation 5s linear infinite
      var(--skeleton-delay);

    html[data-visual-test] & {
      animation: none !important;
    }
  }

  &__figure {
    position: relative;
    border-radius: var(--token-radius-sm);

    &--circle {
      width: 4rem;
      height: 4rem;
      border-radius: 50%;
    }

    &--product {
      display: flex;
      align-items: center;
    }

    &--product &--circle + div {
      width: 50%;
      margin-left: 1rem;
    }
  }

  &--no-animation &,
  &--no-animation &::after,
  &--no-animation * &::after {
    animation: none !important;
  }
}

@keyframes skeletonLinearAnimation {
  0% {
    clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
  }

  50% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }

  100% {
    clip-path: polygon(0 0, 0% 0, 0% 100%, 0 100%);
  }
}

@keyframes skeletonFontAnimation {
  0% {
    background-position-x: 30rem;
  }

  100% {
    background-position-x: -30rem;
  }
}

$fonts-path: '../../../../assets/fonts/dnb' !default;

// Skeleton-Regular
@font-face {
  font-family: DNBSkeleton;
  src:
    url('#{$fonts-path}/skeleton/DNB-Skeleton-Regular.woff2')
      format('woff2'),
    url('#{$fonts-path}/skeleton/DNB-Skeleton-Regular.woff') format('woff'),
    url('#{$fonts-path}/skeleton/DNB-Skeleton-Regular.ttf')
      format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: fallback;
}

// Skeleton-Medium
@font-face {
  font-family: DNBSkeleton;
  src:
    url('#{$fonts-path}/skeleton/DNB-Skeleton-Medium.woff2')
      format('woff2'),
    url('#{$fonts-path}/skeleton/DNB-Skeleton-Medium.woff') format('woff'),
    url('#{$fonts-path}/skeleton/DNB-Skeleton-Medium.ttf')
      format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: fallback;
}

// Skeleton-Bold
@font-face {
  font-family: DNBSkeleton;
  src:
    url('#{$fonts-path}/skeleton/DNB-Skeleton-Bold.woff2') format('woff2'),
    url('#{$fonts-path}/skeleton/DNB-Skeleton-Bold.woff') format('woff'),
    url('#{$fonts-path}/skeleton/DNB-Skeleton-Bold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: fallback;
}

// Mono-Skeleton
@font-face {
  font-family: DNBMonoSkeleton;
  src:
    url('#{$fonts-path}/skeleton/DNBMono-Skeleton-Regular.woff2')
      format('woff2'),
    url('#{$fonts-path}/skeleton/DNBMono-Skeleton-Regular.woff')
      format('woff'),
    url('#{$fonts-path}/skeleton/DNBMono-Skeleton-Regular.ttf')
      format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: fallback;
}