.flex {
  all: unset;
  display: flex;
}

.row {
  composes: flex;
  flex-direction: row;
}

.root {
  composes: flex;
  border-color: var(--grey6);
  flex-direction: column;
  overflow-x: hidden;
}

.root-border {
  border-radius: 6px;
  border-style: solid;
  border-width: 1px;
}

.child {
  composes: row;
  align-items: center;
  border-bottom-color: var(--grey6);
  border-bottom-width: 1px;
  box-sizing: border-box;
  height: 48px;
  padding-right: 8px;

  &:last-child {
    border-bottom-color: transparent;
  }
}

.header {
  composes: child;
  background-color: var(--grey2);
  border-bottom-style: solid;
  gap: 8px;
  padding-left: 16px;
}

.headerActions {
  composes: row;
  align-items: center;
  flex-grow: 1;
  gap: 8px;
  justify-content: end;
  min-width: 0;
}

.item {
  composes: child;
  background-color: var(--grey1);
  border-bottom-style: dashed;
  padding-left: 12px;
}