// Table of Contents
// ==================================================
// Cohort
// Media Queries

// scss-lint:disable ImportantRule
// scss-lint:disable NestingDepth

// Cohort
// ==================================================
.cohort-container {
  border: 1px solid color(haze);
  border-radius: border-radius(b);
}
.cohort-title {
  background: color(white);
  border-bottom-style: solid;
  border-bottom-width: 1px;
  font-size: text-size(b);
  font-weight: text-weight(semibold);
  padding: 10px;
  text-align: center;
}
.cohort-table {
  background: light-color(light-haze);
  border-spacing: 0;
  border-collapse: collapse;
  font-size: text-size(b);
  margin: auto;
  max-width: 100%;
  width: 100%;

  tr {
    td:last-child,
    th:last-child { border-right-width: 0; }
    &:first-child {
      th {
        border-bottom-width: 3px;

        &:last-child { border-right: 0; }
      }
    }
    &:last-child {
      td,
      th { border-bottom-width: 0; }
    }
  }
  td,
  th {
    text-align: center;
    padding: 8px;
  }
  th {
    border-style: solid;
    border-width: 0;
    border-bottom-width: 1px;
    border-right-width: 1px;
    font-weight: text-weight(semibold);
  }
}
.cohort-percentage {
  &::after {
    content: '%';
    margin-left: 1px;
  }
}
.cohort-label,
.cohort-total {
  border-style: solid;
  border-width: 0;
  border-bottom-width: 1px;
  border-right-width: 1px;
  font-weight: text-weight(semibold);
  width: 80px;
}
.cohort-label { text-align: left !important; }
.cohort-total {
  border-right-width: 3px;
  font-weight: text-weight(normal);
}
.cohort-empty {
  background: color(white);
  border-style: solid;
  border-width: 0;
  border-bottom-width: 1px;
  border-right-width: 1px;
}
.cohort-lowest,
.cohort-low,
.cohort-lowish,
.cohort-medium,
.cohort-highish,
.cohort-high,
.cohort-highest { color: color(white); }
.cohort-lowest { background: tintiest-color(primary); }
.cohort-low { background: tint-color(primary); }
.cohort-lowish { background: tintish-color(primary); }
.cohort-medium { background: color(primary); }
.cohort-highish { background: shadeish-color(primary); }
.cohort-high { background: shade-color(primary); }
.cohort-highest { background: shadiest-color(primary); }

// Media Queries
// ==================================================
@media only screen and (max-width: 960px) {
  .cohort-container {
    .table-responsive {
      border-radius: 0;
      border-width: 0;
    }
  }
}