@import '../../shared/styles/variables';

:host {
  display: block;
}

.responses-list-header {
  font-size: 18px;
  padding: 0.2em 0;
  margin: 3em 0 1.1em;
  color: #253137;
  font-weight: normal;
}

:host .zippy-title {
  font-family: $headers-font, $headers-font-family;
}

.header-name {
  font-weight: bold;
  display: inline-block;
}

.header-type {
  display: inline-block;
  font-weight: bold;
  color: #999;
}

header {
  font-size: 14px;
  font-weight: bold;
  text-transform: uppercase;
  margin-bottom: 15px;

  &:not(:first-child) {
    margin-top: 15px;
    margin-bottom: 0;
  }
}

.header {
  margin-bottom: 10px;
}

.header-range {
  position: relative;
  top: 1px;
  margin-right: 6px;
  margin-left: 6px;
  border-radius: $border-radius;
  background-color: rgba($primary-color, 0.1);
  padding: 0 4px;
  color: rgba($primary-color, 0.7);
}

.header-type.array::before {
  content: $array-text;
  color: $black;
  font-weight: $base-font-weight;
}