@layer components {
  .operation-list {
    border-top: var(--border-subtle);
    list-style: none;
  }

  .operation-item {
    align-items: center;
    background: var(--color-panel);
    border-bottom: var(--border-subtle);
    display: grid;
    gap: var(--space-4);
    grid-template-columns: 4rem minmax(0, 1fr) auto auto;
    min-height: 4.5rem;
    padding: var(--space-2) var(--space-3);
    position: relative;
  }

  .operation-item::before {
    background: var(--color-status-pending);
    content: "";
    inset: 0 auto 0 0;
    position: absolute;
    width: 0.35rem;
  }

  .operation-item--completed::before {
    background: var(--color-status-completed);
  }

  .operation-item--in-progress::before {
    background: var(--color-status-in-progress);
  }

  .operation-item__position {
    color: var(--color-muted);
    font-family: var(--font-mono);
    font-size: var(--font-size-lg);
  }

  .operation-item__body {
    display: grid;
    gap: 0.25rem;
  }

  .operation-item__body strong {
    font-size: var(--font-size-base);
  }

  .operation-item__body span {
    color: var(--color-muted);
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    text-transform: uppercase;
  }

  .operation-item__actions {
    align-items: center;
    border-left: var(--border-subtle);
    display: flex;
    gap: var(--space-3);
    padding-left: var(--space-4);
  }

  @media (max-width: 44rem) {
    .operation-item {
      align-items: start;
      gap: var(--space-3);
      grid-template-columns: 2.5rem 1fr;
      padding: var(--space-4);
    }

    .operation-item > .status-badge,
    .operation-item__actions {
      grid-column: 2;
      justify-self: start;
    }

    .operation-item__actions {
      border-left: 0;
      padding-left: 0;
    }
  }
}