$table-breakpoint: $viewport-lg;

.table {
  box-shadow: none;
  @media (max-width: $table-breakpoint) {
    border-top: 1px solid $color-slate-300;
    @include margin(32, top);
    thead {
      @include a11y-only();
    }
    tbody,
    tr {
      display: block;
    }
    td {
      display: flex;
      justify-content: space-between;
      flex-wrap: nowrap;
      flex-shrink: 1;
    }
  }
}

.no-wrap {
  white-space: nowrap;
}

.cell-label {
  white-space: pre-line;
  font-weight: bold;
  display: inline-block;
  text-align: left;
  @media (min-width: $table-breakpoint) {
    display: none;
  }
}

.annotation {
  position: relative;
  margin-right: spacer(16);
  margin-top: -2px; // ignore-style-rule
  height: 18px; // ignore-style-rule
}

.date-cell span.value {
  display: flex;
  float: right;
}

thead.custom-header {
  border: none;
  clip: inherit;
  overflow: initial;
  position: inherit;

  @media (max-width: $table-breakpoint) {
    display: block;
    width: 100%;
    height: auto;

    th {
      display: block;
      width: 100%;
    }
  }
}

.disclosure-button {
  td {
    justify-content: center;

    button {
      border: 1px solid $color-slate-400;
      background-color: $color-slate-200;
      border-radius: 4px;

      @include padding(16, (left, right));
      @include padding(8, (top, bottom));
    }
  }

  .closed {
    display: inline-block;
  }

  .expanded {
    display: none;
  }

  button[aria-expanded='true'] {
    .closed {
      display: none;
    }
    .expanded {
      display: inline-block;
    }
  }

  @media (min-width: $table-breakpoint) {
    display: none;
  }
}

.disclosure-panel {
  @media (min-width: $table-breakpoint) {
    display: contents !important;
  }
}
