@use "../../core/settings" as *;
@use "../../core/tools" as *;
@use "../../core/helpers" as *;

////
/// Table component
///
/// @group components/table
////

@include nhsuk-exports("nhsuk/components/table") {
  // Table container is used to ensure the table does not break the container.
  //
  // 1. Margin is removed so there isn't double spacing.
  // 2. XS size not added because it matches the table header, so it'd be bad for hierarchy

  .nhsuk-table-container {
    box-sizing: border-box;
    display: block;

    width: 100%;

    overflow-x: auto;

    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;

    @include nhsuk-responsive-margin(7, "bottom");

    .nhsuk-table,
    .nhsuk-table-responsive {
      margin: 0; // [1]
    }
  }

  .nhsuk-table,
  .nhsuk-table-responsive {
    box-sizing: border-box;
    width: 100%;
    border-spacing: 0;
    border-collapse: collapse;

    @include nhsuk-font($size: 19);
    @include nhsuk-responsive-margin(7, "bottom");
  }

  .nhsuk-table--reverse,
  .nhsuk-table-responsive--reverse {
    color: $nhsuk-reverse-text-colour;

    th,
    td {
      border-color: $nhsuk-reverse-border-colour;
    }
  }

  .nhsuk-table__caption {
    display: table-caption;
    margin-bottom: nhsuk-spacing(3) - nhsuk-spacing(2);
    @include nhsuk-font($size: 22, $weight: bold);

    @include nhsuk-media-query($from: tablet) {
      margin-bottom: nhsuk-spacing(4) - nhsuk-spacing(3);
    }
  }

  .nhsuk-table__caption--xl {
    margin-bottom: nhsuk-spacing(6) - nhsuk-spacing(2);
    @include nhsuk-font-size(48);

    @include nhsuk-media-query($from: tablet) {
      margin-bottom: nhsuk-spacing(7) - nhsuk-spacing(3);
    }
  }

  .nhsuk-table__caption--l {
    @include nhsuk-font-size(36);
  }

  .nhsuk-table__caption--m {
    @include nhsuk-font-size(26);
  }

  .nhsuk-table__caption--s {
    @include nhsuk-font-size(22);
  }

  // Table panel with tab heading
  //
  // 1. Margin is removed so there isn't double spacing.

  // Deprecated, to be removed in v11.0
  .nhsuk-table__panel-with-heading-tab {
    @include nhsuk-panel-with-label($nhsuk-card-background-colour, $nhsuk-text-colour, $nhsuk-border-colour);

    .nhsuk-table,
    .nhsuk-table-container,
    .nhsuk-table-responsive {
      margin: 0; // [1]
    }
  }

  // Deprecated, to be removed in v11.0
  .nhsuk-table__heading-tab {
    @include nhsuk-heading-label($nhsuk-brand-colour, $nhsuk-reverse-text-colour);
  }

  // Responsive table
  //
  // 1. Hide the thead until desktop
  // 2. Removing default screen reader behaviour
  // 3. Assigning role of table-row on desktop to give default screen reader behaviour
  // 4. Using justify content to space out elements in the row on mobile
  // 5. Assigning a minimum width in case of black cell
  // 6. Aligning content to the right on mobile
  // 7. Aligning mobile header to left to split it from the data
  // 8. Hiding mobile specific header from desktop view
  // 9. Adding a display block value due to IE 11 not having full flex support

  .nhsuk-table-responsive {
    thead {
      @include nhsuk-media-query($until: desktop) {
        @include nhsuk-visually-hidden; // [1]
      }
    }

    .nhsuk-table__body {
      .nhsuk-table-responsive__heading {
        @include nhsuk-font-weight-bold;
        padding-right: nhsuk-spacing(3);
        text-align: left; // [7]
      }

      .nhsuk-table__row {
        display: block; // [2]
        margin-bottom: nhsuk-spacing(4);

        &:last-child {
          margin-bottom: 0;
        }
      }

      .nhsuk-table__row th,
      .nhsuk-table__row td {
        display: block; // For browsers that don't support flexbox
        display: flex;
        justify-content: space-between; // [4]
        min-width: 1px; // [5]
      }

      @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
        .nhsuk-table__row th,
        .nhsuk-table__row td {
          display: block; // [9]
        }
      }

      @include nhsuk-media-query($until: desktop) {
        .nhsuk-table__row th {
          @include nhsuk-font-weight-normal;
        }

        .nhsuk-table__row th,
        .nhsuk-table__row td {
          padding-right: 0;
          text-align: right; // [6]

          &:last-child {
            border-bottom-width: 3px;
          }
        }
      }

      @include nhsuk-media-query($from: desktop) {
        .nhsuk-table-responsive__heading {
          display: none; // [8]
        }

        .nhsuk-table__row {
          display: table-row; // [3]
        }

        .nhsuk-table__row th {
          text-align: left;
        }

        .nhsuk-table__row th,
        .nhsuk-table__row td {
          display: table-cell;
        }
      }
    }
  }

  // Numeric tables
  //
  // Right aligns table cells for numeric tables.

  .nhsuk-table__header--numeric,
  .nhsuk-table__cell--numeric {
    text-align: right;
  }
}