/*
 * Framework-independent styles for lightweight UI primitives.
 * Page-specific styles build on these defaults with ordinary CSS.
 */

.ui-avatar {
  position: relative;
  display: flex;
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 9999px;
}

.ui-avatar__image {
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
}

.ui-avatar__fallback {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background-color: hsl(var(--muted));
}

.ui-separator {
  flex-shrink: 0;
  background-color: hsl(var(--border));
}

.ui-separator--horizontal {
  width: 100%;
  height: 1px;
}

.ui-separator--vertical {
  width: 1px;
  height: 100%;
}

.ui-skeleton {
  border-radius: calc(var(--radius) - 2px);
  background-color: hsl(var(--primary) / 0.1);
  animation: ui-support-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.ui-progress {
  position: relative;
  width: 100%;
  height: 0.5rem;
  overflow: hidden;
  border-radius: 9999px;
  background-color: hsl(var(--primary) / 0.2);
}

.ui-progress__indicator {
  width: 100%;
  height: 100%;
  flex: 1 1 0%;
  background-color: hsl(var(--primary));
  transition-property: all;
  transition-duration: 150ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes ui-support-pulse {
  50% {
    opacity: 0.5;
  }
}