@use "nhsuk-frontend/dist/nhsuk/core/tools/sass-mq" as *;
@use "nhsuk-frontend/dist/nhsuk/core/tools/spacing" as *;
@use "nhsuk-frontend/dist/nhsuk/core/settings/colours-applied" as *;

.nhsapp-summary-list {
  // Override the NHS UK Frontend summary list component to display two columns on mobile
  &--two-columns-mobile {
    @include nhsuk-media-query($until: tablet) {
      display: table;
      table-layout: fixed;
      width: 100%;
    }

    .nhsuk-summary-list__key,
    .nhsuk-summary-list__value,
    .nhsuk-summary-list__actions {
      border-bottom: 1px solid $nhsuk-border-colour;
      display: table-cell;
      padding-bottom: nhsuk-spacing(2);
      padding-right: nhsuk-spacing(4);
      padding-top: nhsuk-spacing(2);
    }

    .nhsuk-summary-list__row {
      display: table-row;
    }

    .nhsuk-summary-list__key {
      @include nhsuk-media-query($until: tablet) {
        width: 50%;
      }
    }

    .nhsuk-summary-list__value {
      width: 50%;
    }
  }
}