@import '~scss/breakpoints.module.scss';
@import '~scss/colors.module.scss';

.info-line {
  h2 {
    margin: 0;
    @include type-size(400);
    @include margin(16, bottom);
  }
  .toggle-container {
    flex-grow: 1;
    display: flex;
    > * {
      margin-right: spacer(8);
    }
    @media screen and (max-width: $viewport-lg) {
      flex-direction: column;
      > * {
        margin-right: 0;
        margin-bottom: spacer(8);
      }
    }
    @media screen and (max-width: $viewport-md) {
      flex-grow: initial;
    }
  }
  .legend-component {
    @include margin(16, top);
    display: flex;
    align-items: center;
  }
}

.all-data-link {
  color: $color-slate-600;
  display: block;
  @include margin(16, top bottom);
}

.summary-charts {
  h3 {
    @include type-size(300);
    @include margin(8, top bottom);
    @media (min-width: $viewport-md) {
      @include margin(32, top bottom);
    }
    &.test-heading {
      @include margin(16, bottom);
    }
  }
}

.alert-infobox-container {
  height: 286px;
  width: 272px;
}

.disclosure {
  background: none;
  text-decoration: underline;
  color: $color-slate-600;
  border: 0;
  @include type-size(200);
  padding: 0;
  cursor: pointer;
  span {
    @include margin(8, left);
  }
  .arrow-down {
    display: inline-block;
  }
  .arrow-up {
    display: none;
  }
  &[aria-expanded='true'] {
    .arrow-down {
      display: none;
    }
    .arrow-up {
      display: inline-block;
    }
  }
}

.annotation-list {
  padding-inline-start: 20px; // ignore-style-rule
  list-style-type: upper-alpha;

  .annotation-item {
    font-weight: 700;
    padding-inline-start: spacer(4);
    span {
      font-weight: initial;
    }
  }
}

.annotation-title {
  @include type-size(300);
}

.annotation-indicator {
  @include type-size(200);
  font-weight: normal;
  display: block;
  font-size: 0.8rem;
  display: inline;
  @include margin(4, left);
}

.charts {
  @include margin(64, bottom);
}

.chart-logo {
  margin: 0 spacer(16);
  @media screen and (max-width: $viewport-lg) {
    display: none;
  }
  * {
    fill: $color-slate-300;
  }
}

.annotation-date {
  font-weight: 700;
  color: $color-slate-600;
}

.calculated {
  display: inline-block;
  @include type-size(100);
  font-weight: normal;
}

.test-field-indicator {
  @include type-size(100);
  margin: 0;
  display: block;
}
