/* The screen "Database imports" and the database lines of a package: layout only, in the tokens of the design system. */

.dbi-toolbar {
  padding: var(--ui-space-4) var(--ui-space-5) 0;
}

.dbi-upload__head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--ui-space-1) var(--ui-space-3);
}

.dbi-upload__name {
  color: var(--ui-text);
  font-weight: var(--ui-weight-medium);
  overflow-wrap: anywhere;
}

.dbi-stopped {
  display: flex;
  flex-direction: column;
  gap: var(--ui-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.dbi-stopped__item {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: var(--ui-space-3) var(--ui-space-5);
}

.dbi-stopped__item + .dbi-stopped__item {
  border-top: 1px solid var(--ui-border);
  padding-top: var(--ui-space-4);
}

.dbi-stopped__text {
  display: flex;
  flex: 1 1 16rem;
  flex-direction: column;
  gap: var(--ui-space-1);
  min-width: 0;
}

.dbi-stopped__actions {
  display: flex;
  align-items: center;
  flex: 0 1 auto;
  flex-wrap: wrap;
  gap: var(--ui-space-2);
}

.dbi-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--ui-space-1);
  min-width: 0;
}

.dbi-cell__top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--ui-space-2);
}

.dbi-use {
  display: flex;
  flex-direction: column;
}

/* A package: where the database of a component comes from. */

.dbi-component {
  display: flex;
  flex-direction: column;
  gap: var(--ui-space-2);
  border-top: 1px solid var(--ui-border);
  padding-top: var(--ui-space-3);
}

.dbi-component__line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--ui-space-2) var(--ui-space-3);
}

.dbi-component__label {
  color: var(--ui-text);
  font-weight: var(--ui-weight-medium);
}

.dbi-choice {
  display: flex;
  flex-direction: column;
  gap: var(--ui-space-2);
  margin: 0;
  border: 0;
  padding: 0;
}

.dbi-choice__option {
  display: flex;
  align-items: flex-start;
  gap: var(--ui-space-3);
  border: 1px solid var(--ui-border-strong);
  border-radius: var(--ui-radius-md);
  padding: var(--ui-space-3);
  background: var(--ui-surface);
  cursor: pointer;
}

.dbi-choice__option:hover {
  background: var(--ui-surface-hover);
}

.dbi-choice__option.is-chosen {
  border-color: var(--ui-focus);
  background: var(--ui-info-bg);
}

.dbi-choice__option input {
  flex: none;
  width: 1rem;
  height: 1rem;
  margin: 0.15rem 0 0;
  padding: 0;
  accent-color: var(--ui-primary);
}

.dbi-choice__text {
  display: flex;
  flex-direction: column;
  gap: var(--ui-space-1);
  min-width: 0;
}