@use "../mixin";

table {
  display: inline-block;

  max-width: max-content;
  width: 100%;

  border-collapse: collapse;
  border-radius: var(--md-sys-shape-corner-extra-large);
  outline-offset: -1px;
  outline: 1px solid var(--md-sys-color-outline);

  overflow: auto;

  a {
    text-decoration: none;
  }

  caption {
    @include mixin.typescale-style("title-medium", $font-variation-settings: "wght" 700);

    padding: 16px 0px;
  }

  thead {
    @include mixin.typescale-style("body-large", $font-variation-settings: "wght" 700);

    white-space: nowrap;

    tr {
      th {
        min-width: 10ch;

        padding: 16px 24px;

        text-transform: capitalize;

        background-color: var(--md-sys-color-surface-variant);

        transition: background-color var(--md-sys-motion-duration-extra-long1) var(--md-sys-motion-easing-standard);
      }
    }
  }

  tbody {
    @include mixin.typescale-style("body-large");

    img {
      max-width: 375px;
    }

    tr {
      vertical-align: top;

      td {
        padding: 16px 24px;

        vertical-align: inherit;

        code {
          white-space: nowrap;
        }
      }
    }
  }

  :is(td, th) {
    border: 1px solid var(--md-sys-color-outline);

    code {
      padding-block: 0px !important;
    }
  }
}
