@use "config" as *;
@use "functions" as *;
@use "mixins/border-radius" as *;
@use "mixins/tokens" as *;

$placeholder-tokens: () !default;
$placeholder-wave-tokens: () !default;

// scss-docs-start placeholder-tokens
// stylelint-disable-next-line scss/dollar-variable-default
$placeholder-tokens: defaults(
  (
    --placeholder-opacity-max: .18,
    --placeholder-opacity-min: .1,
  ),
  $placeholder-tokens
);

// stylelint-disable-next-line scss/dollar-variable-default
$placeholder-wave-tokens: defaults(
  (
    --placeholder-wave-opacity-max: 1,
    --placeholder-wave-opacity-min: .4,
  ),
  $placeholder-wave-tokens
);
// scss-docs-end placeholder-tokens

@layer components {
  .placeholder {
    @include tokens($placeholder-tokens);

    display: inline-block;
    min-height: 1.25em;
    vertical-align: middle;
    cursor: wait;
    background-color: currentcolor;
    @include border-radius(var(--radius-3));
    opacity: var(--placeholder-opacity-max);

    &.btn::before {
      display: inline-block;
      content: "";
    }
  }

  // Sizing
  .placeholder-xs {
    min-height: .75em;
  }

  .placeholder-sm {
    min-height: 1em;
  }

  .placeholder-lg {
    min-height: 1.75em;
  }

  // Animation
  .placeholder-pulse,
  .placeholder-glow {
    .placeholder {
      animation: placeholder-pulse 2s ease-in-out infinite;

      @if $enable-reduced-motion {
        @media (prefers-reduced-motion: reduce) {
          animation: none;
        }
      }
    }
  }

  @keyframes placeholder-pulse {
    50% {
      opacity: var(--placeholder-opacity-min);
    }
  }

  .placeholder-wave {
    @include tokens($placeholder-wave-tokens);

    mask-image: linear-gradient(110deg, rgb(0 0 0 / var(--placeholder-wave-opacity-min)) 35%, rgb(0 0 0 / var(--placeholder-wave-opacity-max)) 50%, rgb(0 0 0 / var(--placeholder-wave-opacity-min)) 65%);
    mask-repeat: no-repeat;
    mask-position: 100% 0%;
    mask-size: 250% 100%;
    animation: placeholder-wave 1.6s linear infinite;

    @if $enable-reduced-motion {
      @media (prefers-reduced-motion: reduce) {
        mask-image: none;
        animation: none;
      }
    }
  }

  @keyframes placeholder-wave {
    100% {
      mask-position: 0% 0%;
    }
  }
}