@mixin k-skeleton-container($width: 100%, $height: 100%, $direction: top) {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  max-width: $width;
  max-height: $height;
  background-color: var(--color-bg-neutral-tertiary-default);
  border-radius: var(--border-radius-1);
  animation: kuiPulse ease-in-out 1s infinite alternate;

  @if $direction == top {
    top: 0;
  } @else if $direction == bottom {
    bottom: 0;
  } @else {
    @error 'Unknown direction #{$direction}.';
  }
}

@mixin special-input-skeleton($width: 100%, $height: 100%, $direction: top) {
  &:has(> k-input-container):after {
    content: none;
  }

  > k-input-container {
    opacity: 1;
    visibility: visible;

    .k-input_container {
      position: relative;

      &:before {
        @include k-skeleton-container(120px, var(--size-4));
      }

      &:after {
        @include k-skeleton-container(100%, calc(100% - var(--size-5)), bottom);
      }

      & > * {
        opacity: 0;
        visibility: hidden;
      }
    }
  }
}

.kui-skeleton {
  position: relative;
  color: transparent !important;
  background: transparent !important;
  pointer-events: none;
  user-select: none;

  @include special-input-skeleton;

  &:after {
    @include k-skeleton-container;
  }

  &_circle:after {
    border-radius: var(--border-radius-circle);
  }

  & > * {
    opacity: 0;
    visibility: hidden;
  }
}

.k-row,
.k-row-container {
  &.kui-skeleton,
  .kui-skeleton.k-col,
  .kui-skeleton[class*='k-col_'],
  .kui-skeleton[class*='k-col-'] {
    &:after {
      max-width: calc(100% - var(--k-row-gap-x) * 2);
      margin-left: var(--k-row-gap-x);
      margin-right: var(--k-row-gap-x);
    }
  }
}

@keyframes kuiPulse {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0.4;
  }

  100% {
    opacity: 1;
  }
}