/* ==========================================
   Loading States / Skeleton Styles
   ========================================== */

.skeleton-item,
.skeleton-card {
  background-color: var(--thicket-bauhaus-color-zinc-100, #f4f4f5);
  overflow: hidden;
  position: relative;
}

.skeleton-item::before,
.skeleton-card::before,
.skeleton-image::before,
.skeleton-text-xlarge::before,
.skeleton-text-large::before,
.skeleton-text-medium::before,
.skeleton-text-small::before,
.skeleton-input::before,
.skeleton-textarea::before,
.skeleton-button::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--thicket-bauhaus-color-zinc-200, #e4e4e7) 50%,
    transparent 100%
  );
  animation: skeleton-loading 1.5s infinite;
  z-index: 1;
}

@keyframes skeleton-loading {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

.skeleton-image,
.skeleton-image-section {
  width: 100%;
  aspect-ratio: 1;
  background-color: var(--thicket-bauhaus-color-zinc-200, #e4e4e7);
  position: relative;
  overflow: hidden;
}

.skeleton-content-section {
  padding: var(--thicket-bauhaus-spacing-xl, 2rem)
    var(--thicket-bauhaus-spacing-2xl, 2.5rem);
  display: flex;
  flex-direction: column;
  gap: var(--thicket-bauhaus-spacing-md, 1rem);
}

.skeleton-text-xlarge {
  height: 48px;
  background-color: var(--thicket-bauhaus-color-zinc-200, #e4e4e7);
  border-radius: var(--radius);
  position: relative;
  overflow: hidden;
  margin-bottom: var(--thicket-bauhaus-spacing-lg, 1.5rem);
}

.skeleton-text-large {
  height: 32px;
  background-color: var(--thicket-bauhaus-color-zinc-200, #e4e4e7);
  border-radius: var(--radius);
  position: relative;
  overflow: hidden;
  margin-bottom: var(--thicket-bauhaus-spacing-sm, 0.75rem);
}

.skeleton-text-medium {
  height: 24px;
  background-color: var(--thicket-bauhaus-color-zinc-200, #e4e4e7);
  border-radius: var(--radius);
  width: 60%;
  position: relative;
  overflow: hidden;
  margin-bottom: var(--thicket-bauhaus-spacing-md, 1rem);
}

.skeleton-text-small {
  height: 16px;
  background-color: var(--thicket-bauhaus-color-zinc-200, #e4e4e7);
  border-radius: var(--radius);
  width: 80%;
  position: relative;
  overflow: hidden;
  margin-bottom: var(--thicket-bauhaus-spacing-xs, 0.5rem);
}

.skeleton-form {
  display: flex;
  flex-direction: column;
  gap: var(--thicket-bauhaus-spacing-lg, 1.5rem);
}

.skeleton-input {
  height: 48px;
  background-color: var(--thicket-bauhaus-color-zinc-200, #e4e4e7);
  border-radius: var(--radius);
  position: relative;
  overflow: hidden;
}

.skeleton-textarea {
  height: 120px;
  background-color: var(--thicket-bauhaus-color-zinc-200, #e4e4e7);
  border-radius: var(--radius);
  position: relative;
  overflow: hidden;
}

.skeleton-button {
  height: 48px;
  width: 150px;
  background-color: var(--thicket-bauhaus-color-zinc-200, #e4e4e7);
  border-radius: var(--radius);
  position: relative;
  overflow: hidden;
}