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

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

// Cohort
// ==================================================
.cohort-container {
  border: 1px solid color(dark-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-extra-low,
.cohort-low,
.cohort-medium-low,
.cohort-medium,
.cohort-medium-high,
.cohort-high,
.cohort-hot,
.cohort-extra-hot { color: color(white); }
@each $name, $multiplier in (extra-low: 2.5, low: 2.25, medium-low: 1.75, medium: 1) {
  .cohort-#{$name} { background: lighten(color(primary), percentage((12.5 * $multiplier) / 100)); }
}
.cohort-medium-high { background: color(primary); }
@each $name, $multiplier in (high: 1, hot: 1.75, extra-hot: 2.25) {
  .cohort-#{$name} { background: darken(color(primary), percentage((12.5 * $multiplier) / 100)); }
}

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