.income-guidance-heading {
  @include text-body-bold;
}

.income-guidance-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 $space-2;

  th {
    font-weight: normal;
    font-size: 17px;
    padding: 0 $btn-padding-x;
    text-align: left;
  }

  td {
    background-color: $white;
    padding: $btn-padding-x;
    border: $input-border-width solid transparent;
    border-width: $input-border-width 0;
  }

  td:first-child {
    border-left-width: $input-border-width;
    border-radius: 0.5rem 0 0 0.5rem;
  }

  td:last-child {
    border-right-width: $input-border-width;
    border-radius: 0 0.5rem 0.5rem 0;
    text-align: right;
  }

  tbody tr {
    cursor: pointer;

    &:hover td {
      box-shadow: 0px 0px 8px $primary;
    }

    &.selected td {
      border-color: $primary;
    }
  }

  // One card per band on narrow screens, each value labelled.
  @include media-breakpoint-down(xs) {
    thead {
      display: none;
    }

    tr,
    td {
      display: block;
    }

    tbody tr {
      background-color: $white;
      border-radius: 0.5rem;
      border: $input-border-width solid transparent;
      margin-bottom: $space-2;
      padding: $btn-padding-x;

      &.selected {
        border-color: $primary;
      }
    }

    td,
    td:first-child,
    td:last-child {
      border: 0;
      border-radius: 0;
      padding: 0;
      text-align: left;
      background-color: transparent;
    }

    td::before {
      content: attr(data-label) ": ";
    }
  }
}

.income-guidance-choose {
  @include text-body-bold;
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  text-decoration: underline;
}

.income-guidance-note {
  font-size: 17px;
}