@import "@xyflow/react/dist/style.css";

.factory-recording-topology-replay,
.factory-emulator-controls,
.factory-emulator-view {
  display: grid;
  box-sizing: border-box;
  inline-size: 100%;
  min-inline-size: 0;
  gap: 1rem;
}

.factory-emulator-view__submission {
  min-inline-size: 0;
}

.factory-emulator-failure,
.factory-timeline-scrubber,
.factory-work-progress {
  box-sizing: border-box;
  inline-size: 100%;
  min-inline-size: 0;
  padding: 1rem;
  color: var(--color-on-surface);
  background: var(--color-surface-container-low);
  border: 1px solid var(--color-outline-variant);
  border-radius: 1rem;
}

.factory-emulator-failure {
  border-color: var(--color-error);
}

.factory-emulator-failure__content,
.factory-topology-replay__state,
.factory-work-progress__empty {
  display: grid;
  justify-items: center;
  gap: 1rem;
  padding: 1.5rem;
  color: var(--color-on-surface-variant);
  text-align: center;
  background: var(--color-surface-container);
  border: 1px dashed var(--color-outline-variant);
  border-radius: 0.75rem;
}

.factory-emulator-failure__content > *,
.factory-topology-replay__state > * {
  margin: 0;
}

.factory-recording-topology-replay__tick,
.factory-timeline-scrubber__position,
.factory-timeline-scrubber__status,
.factory-timeline-scrubber__action-status,
.factory-work-progress__total {
  margin: 0;
  color: var(--color-on-surface-variant);
}

.factory-topology-replay {
  position: relative;
  box-sizing: border-box;
  inline-size: 100%;
  block-size: clamp(28rem, 68vh, 48rem);
  min-inline-size: 0;
  overflow: hidden;
  color: var(--color-on-surface);
  background: var(--color-surface-container-low);
  border: 1px solid var(--color-outline-variant);
  border-radius: 1rem;
}

.factory-topology-replay--state {
  display: grid;
  place-items: center;
  padding: 1rem;
}

.factory-topology-replay__state {
  max-inline-size: 32rem;
}

.factory-topology-replay__state[role="alert"] {
  border-color: var(--color-error);
}

.factory-timeline-scrubber__header,
.factory-timeline-scrubber__controls,
.factory-work-progress__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
}

.factory-timeline-scrubber__header > *,
.factory-timeline-scrubber__status,
.factory-timeline-scrubber__action-status,
.factory-work-progress__header > * {
  margin: 0;
}

.factory-timeline-scrubber__controls {
  margin-block-start: 1rem;
}

.factory-timeline-scrubber__range {
  flex: 1 1 18rem;
  min-inline-size: min(100%, 12rem);
  accent-color: var(--color-primary, var(--color-af-foundation-accent));
  cursor: pointer;
}

.factory-timeline-scrubber__range:focus {
  outline: 0.1875rem solid
    var(--color-primary, var(--color-af-foundation-accent));
  outline-offset: 0.25rem;
}

.factory-timeline-scrubber__range:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.factory-timeline-scrubber__status {
  margin-block-start: 0.75rem;
}

.factory-timeline-scrubber__action-status {
  margin-block-start: 0.25rem;
}

.factory-work-progress__categories {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.75rem;
  padding: 0;
  margin: 1rem 0 0;
  list-style: none;
}

.factory-work-progress__category {
  display: flex;
  min-inline-size: 0;
  align-items: center;
  gap: 0.625rem;
  padding: 0.75rem;
  background: var(--color-surface-container);
  border: 1px solid var(--color-outline);
  border-inline-start: 0.25rem solid var(--color-info);
  border-radius: 0.75rem;
}

.factory-work-progress__category[data-work-progress-category="active"] {
  border-inline-start-color: var(--color-warning);
}

.factory-work-progress__category[data-work-progress-category="completed"] {
  border-inline-start-color: var(--color-success);
}

.factory-work-progress__category[data-work-progress-category="failed"] {
  border-inline-start-color: var(--color-error);
}

.factory-work-progress__category[data-work-progress-category="unclassified"] {
  border-inline-start-color: var(--color-outline-variant);
}

.factory-work-progress__cue {
  display: inline-grid;
  flex: 0 0 1.75rem;
  block-size: 1.75rem;
  place-items: center;
  font-weight: 700;
  border: 1px solid currentColor;
  border-radius: 999px;
}

.factory-work-progress__message {
  min-inline-size: 0;
  overflow-wrap: anywhere;
}

.factory-work-progress__empty {
  padding: 1rem;
  margin: 1rem 0 0;
}

@media (min-width: 34rem) {
  .factory-work-progress__categories {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 60rem) {
  .factory-work-progress__categories {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .factory-topology-replay *,
  .factory-timeline-scrubber *,
  .factory-emulator-controls *,
  .factory-emulator-view *,
  .factory-work-progress * {
    scroll-behavior: auto;
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
    transition-duration: 0.01ms;
  }
}