/* AdditionalDetails.css */
.AdditionalDetails {
  --AdditionalDetailsBorder: var(--PanelBorderTopColor, color-mix(in srgb, var(--WorkbenchForeground) 22%, transparent));
  --MoreInfoOddBackground: var(--ListHoverBackground, color-mix(in srgb, var(--WorkbenchForeground) 7%, transparent));
  --MoreInfoKeyForeground: var(--DescriptionForeground, color-mix(in srgb, var(--WorkbenchForeground) 72%, transparent));
  contain: strict;
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 20px;
  overflow-y: auto;
  gap: 15px;
}

.Aside {
  flex: 0 0 var(--ExtensionDetailSideBarWidth);
  min-width: 175px;
  contain: strict;
  scrollbar-color: var(--EditorScrollBarBackground, rgba(57, 71, 71, 0.6)) transparent;
  scrollbar-width: thin;
  display: flex;
  flex-direction: column;
  width: var(--ExtensionDetailSideBarWidth);
}

.AdditionalDetails:focus {
  outline-color: var(--FocusBorder);
  outline-offset: -1px;
  outline-style: solid;
  outline-width: 1px;
}

.AdditionalDetailsTitle {
  font-size: 120%;
  padding-bottom: 15px;
  contain: content;
}

.AdditionalDetailsEntry {
  /* padding-top: 15px; */
  padding-bottom: 15px;
  contain: content;
  border-bottom: 1px solid var(--AdditionalDetailsBorder);
}

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

.MoreInfoEntry {
  padding: 2px 4px;
  display: flex;
  contain: content;
  gap: 10px;
  /* TODO avoid grid display */
  display: grid;
  grid-template-columns: 40% 60%;
}

.MoreInfoEntryOdd {
  background: var(--MoreInfoOddBackground);
}

/* .Link {
  color: dodgerblue;
  cursor: pointer;
}

.Link:hover {
  text-decoration: underline;
} */

.MoreInfoEntryKey {
  color: var(--MoreInfoKeyForeground);
  contain: content;
}

.MoreInfoEntryValue {
  contain: content;
  margin: 0;
}
