@use 'sass:map';

@use './shared' as *;
@use './design' as *;

$skeleton: () !default;
$skeleton: map.merge(
  (
    width: 100%,
    height: 1em,
    spread: 0,
    color: value('content-color-placeholder'),
    bg-color: value('fill-color-hover'),
    shine-color: rgba(125, 125, 125, 20%),
    radius: value('radius-base'),
    activated-dir: 1
  ),
  $skeleton
);

.#{$namespace}-skeleton {
  &-vars {
    @include define-preset-values('skeleton', $skeleton);
  }

  @include basis {
    position: relative;
    display: inline-block;
    width: value('skeleton-width');
    height: value('skeleton-height');
    margin-bottom: value('skeleton-spread');
    overflow: hidden;
    color: value('skeleton-color');
    background-color: value('skeleton-bg-color');
    border-radius: value('skeleton-radius');
  }

  @include rtl {
    @include define-css-var('skeleton-activated-dir', -1);
  }

  &--default {
    @include define-preset-values(
      'skeleton',
      (
        height: 32px
      )
    );
  }

  &--small {
    @include define-preset-values(
      'skeleton',
      (
        height: 24px
      )
    );
  }

  &--large {
    @include define-preset-values(
      'skeleton',
      (
        height: 40px
      )
    );
  }

  &--block {
    display: block;
  }

  &--round {
    border-radius: 2000px;
  }

  &--circle {
    width: value('skeleton-height');
    border-radius: 50%;
  }

  &--image {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  &--image#{&}--block {
    display: flex;
  }

  @keyframes #{$namespace}-skeleton-loading {
    0% {
      transform: translate(calc(#{value('skeleton-activated-dir')} * -37.5%));
    }

    100% {
      transform: translate(calc(#{value('skeleton-activated-dir')} * 37.5%));
    }
  }

  &--activated::after {
    position: absolute;
    inset: 0 -150%;
    pointer-events: none;
    content: '';
    background-image: linear-gradient(
      to right,
      transparent 25%,
      value('skeleton-shine-color') 37%,
      transparent 63%
    );
    animation: #{$namespace}-skeleton-loading 2000ms ease infinite;
  }

  @at-root {
    &-group {
      @include basis;
    }
  }
}