.pick-row {
  display: flex;
  flex-direction: column;
  animation: pick-row-enter var(--duration-enter) var(--easing-enter) both;
  animation-delay: calc(var(--stack-index, 0) * var(--duration-stagger));
}

.pick-row__content {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  inline-size: 100%;
  min-block-size: var(--control-block-size);
  padding: var(--space-xs);
  border: 0;
  border-radius: var(--radius-lg);
  background-color: transparent;
  color: var(--color-text);
  font-size: var(--font-size-ui);
  line-height: var(--line-height-ui);
  text-align: start;
  transition: translate var(--duration-state) var(--easing-state);
}

@media (hover: hover) {
  .pick-row__content:hover {
    outline: var(--focus-ring-width) solid var(--color-surface-hover);
  }
}

.pick-row__badge {
  --icon-size: var(--icon-size-md);

  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  padding: var(--space-xs);
  border-radius: var(--radius-md);
  background-color: var(--color-accent-soft);
  color: var(--color-accent);
}

.pick-row--warning .pick-row__badge {
  background-color: var(--color-warning-soft);
  color: var(--color-warning);
}

.pick-row__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-inline-size: 0;
}

.pick-row__label {
  font-weight: var(--font-weight-bold);
}

.pick-row__meta {
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
}

.pick-row--warning .pick-row__meta {
  color: var(--color-warning);
}

.pick-row__amount {
  --pick-row-amount-size: 10rem;

  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex: none;
  max-inline-size: var(--pick-row-amount-size);
  margin-inline-start: auto;
}

.pick-row__amount-meta {
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
}

.pick-row__chevron {
  --icon-size: var(--icon-size-md);

  display: flex;
  flex: none;
  color: var(--color-text-muted);
  transition: color var(--duration-state) var(--easing-state);
}

@media (hover: hover) {
  .pick-row__content:hover .pick-row__chevron {
    color: var(--color-text);
  }
}

@keyframes pick-row-enter {
  from {
    opacity: 0;
    translate: 0 calc(-1 * var(--space-2xs));
  }
}

@media (forced-colors: active) {
  .pick-row__badge {
    border: var(--border-width) solid currentcolor;
  }
}