iterative/vscode-dvc

@import '../../variables';

$gap: 20px;

.sectionContainerWrapper {
  position: relative;
}

.sectionContainer {
  width: 100%;

  summary {
    list-style-type: none;
    font-family: $font;
    padding: 14px 10px;
    font-weight: bold;
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    width: 100%;
    cursor: pointer;
    position: sticky;
    background-color: $bg-color;
    z-index: 3;
    gap: $gap;
  }
}

.insideSection {
  width: 100%;
  overflow-x: scroll;
  padding-bottom: 10px;
}

.summaryTitle {
  display: flex;
  align-items: center;
  flex-grow: 1;
}

.detailsIcon {
  fill: $fg-color;
  margin-bottom: -4px;
}

.infoTooltipToggle {
  display: flex;
  align-items: center;
  cursor: initial;
  margin-left: 6px;
}

.indicatorIcon {
  fill: $accent-color;
}

.completedIcon {
  fill: $passed-color;
}

.errorIcon {
  fill: $error-color;
}

.warningIcon {
  fill: $warn-color;
}

.infoTooltip {
  max-width: 340px;
  margin-left: 5px;
  white-space: normal;
  display: flex;
  gap: 4px;
  line-height: 16px;
  font-size: 13px;
  font-weight: 400;
  cursor: auto;

  a {
    text-decoration: none;
  }
}

.infoTooltipeEphasizedText {
  font-style: italic;
}