@use "../colors" as c;
@use "detail-container";
@use "font-size";
@use "ilios-heading";
@use "ilios-table";
@use "media";

@mixin collapsed-container($border-color) {
  @include detail-container.detail-container($border-color);
  display: grid;

  @include media.for-tablet-and-up {
    grid-row-gap: 0.5rem;
    grid-template-columns: 1fr 3fr;
  }
}

@mixin collapsed-container-title() {
  @include ilios-heading.ilios-heading-h5;
}

@mixin collapsed-container-content() {
  @include media.for-laptop-and-up {
    margin: 0;
    padding-top: 0;
  }
}

@mixin collapsed-container-table() {
  @include ilios-table.ilios-table-structure;
  @include ilios-table.ilios-table-colors;
  @include font-size.font-size("small");

  table,
  tr {
    margin: 0;
    padding: 0;
  }

  td,
  th {
    margin: 0;
    vertical-align: top;
  }

  thead,
  th {
    background-color: c.$blueMunsell;
    color: c.$white;
  }

  td:first-of-type {
    color: c.$orange;
    font-weight: bold;
  }

  .maybe {
    color: c.$gold;
  }
}
