/* SettingsItems.css */
:root {
  --SettingsInputMaxWidth: 420px;
  --SettingsSelectMaxWidth: 320px;
  --ModifiedBackground: dodgerblue;
}

.Select {
  background: var(--EditorBackground);
  color: currentColor;
  padding: 3px;
  contain: content;
}

.SettingsItemWrapper {
  display: flex;
  contain: strict;
  flex: 1;
}

.SettingsItems {
  display: flex;
  flex-direction: column;
  contain: content;
  flex: 1;
}

.SettingsItem {
  display: flex;
  flex-direction: column;
  contain: content;
  padding-left: 14px;
}

.SettingsItemCheckBox {
  display: flex;
  gap: 5px;
  contain: content;
}

/* TODO avoid nesting */
.SettingsItem .InputBox {
  max-width: var(--SettingsInputMaxWidth);
}

/* TODO avoid nesting */
.SettingsItem .Select {
  max-width: var(--SettingsSelectMaxWidth);
}

.SettingsItem h3 {
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 20px;
  padding-bottom: 5px;
  contain: content;
}

/* TODO avoid nesting */
/* TODO only use padding top */
.SettingsItem p {
  margin: 0;
  padding-bottom: 10px;
  contain: content;
}

.ModifiedIndicator {
  background: var(--ModifiedBackground);
  contain: strict;
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 2px;
}

.SettingsItemHeading {
  user-select: text;
}

.Settings .Label {
  user-select: text;
}
