@import 'part:@lyra/base/theme/variables-style';

.root {
  display: block;
  height: 100vh;
  width: 100vw;
  overflow-y: auto;
  color: var(--body-text);
}

.title {
  margin: 0;
  background-color: var(--state-danger-color);
  font-size: var(--font-size-large);
  padding: var(--large-padding);
  color: var(--state-danger-color--text);
}

.list {
  display: block;
  margin: 0;
  padding: 0;
  padding: var(--large-padding);
}

.path {
  font-size: var(--font-size-large);
  word-spacing: -0.25em;
}

.segment {
  @nest &:not(:last-child)::after {
    padding: 0 0.5em;
    content: '➝';
  }
}

.problems {
  display: block;
  margin: 0;
  padding: 0;
}

.problem {
  display: flex;
  margin: 0;
  padding: 0;
  color: var(--body-text);
  font-size: var(--font-size-xsmall);
  margin-bottom: var(--medium-padding);
}

.problemSeverity {
  padding: 1em;
  margin-right: 1em;
  min-width: 4em;
  text-align: center;
}

.problemSeverityIcon {
  display: block;
  font-size: 2em;
}

.problemSeverityText {
  display: block;
  font-size: var(--font-size-tiny);
  margin: 1em 0;
  font-weight: 700;
  text-transform: uppercase;
}

.problemLink {
  clear: both;
  margin: 1em 0;
  display: inline-block;
  color: var(--body-text);

  @nest &:hover {
    color: var(--brand-primary);
  }
}

.problemMessage {
  padding-top: 0.5em;
  font-family: var(--font-family-monospace);
}

.problem_error {
  composes: problem;
  color: var(--state-danger-color);

  @nest & .problemSeverity {
    color: var(--state-danger-color);
    border-right: 2px solid var(--state-danger-color);
  }
}

.problem_warning {
  composes: problem;

  @nest & .problemSeverity {
    color: var(--state-warning-color);
    border-right: 2px solid var(--state-warning-color);
  }
}

.listItem {
  display: block;
  padding: 0.5em 0;
}

.arrow {
  padding: 0 0.5em;
}

.pathSegmentTypeName {
  font-weight: 700;
}

.pathSegmentTypeType {
  font-weight: 300;
  font-size: var(--font-size-small);
}

.pathSegmentProperty {
  font-weight: 300;
}