@use '../../global/scss/tools' as nsw;

body {
  color: var(--nsw-text-dark);
  -moz-osx-font-smoothing: grayscale;

  font-family: var(--nsw-font-family);
  font-weight: var(--nsw-font-normal);
  -webkit-font-smoothing: antialiased;
  
  @include nsw.font-size('sm');
}

button,
input,
textarea,
textfield,
select {
  font-family: var(--nsw-font-family);
}

p,
ul,
ol,
dl {
  margin: 0;
}

* + p,
* + ul,
* + ol,
* + dl {
  margin-top: nsw.rem(16px);
}

ul,
ol {
  li {
    margin-top: nsw.rem(8px);
  }
}

dt {
  margin-top: nsw.rem(8px);
}

small,
.nsw-small {
  @include nsw.font-size('xs');
}

/* stylelint-disable selector-no-qualifying-type */

abbr,
abbr[title], /* stylelint-disable-line selector-no-qualifying-type */
acronym {
  text-decoration: none;
  border-bottom: 1px var(--nsw-brand-dark) dashed;
}

/* stylelint-enable selector-no-qualifying-type */

blockquote {
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 0;
  border-left: solid 2px var(--nsw-brand-accent);
  padding: nsw.rem(20px) nsw.rem(24px);
  text-wrap: pretty;

  @include nsw.component-spacing;
  @include nsw.font-size('lg');

  @include nsw.breakpoint('md') {
    margin-left: auto;
    margin-right: auto;
    max-width: 75%;
  }
}

table {
  border: 0;
  border-collapse: collapse;
  width: 100%;
  caption-side: bottom;

  @include nsw.component-spacing;

  caption {
    padding: nsw.rem(12px) nsw.rem(8px);
    text-align: left;
    text-wrap: pretty;
  }

  th,
  td {
    padding: nsw.rem(12px) nsw.rem(8px);
    text-align: left;
    vertical-align: baseline;
    border-bottom: solid 1px var(--nsw-grey-01);
    text-wrap: pretty;

    .nsw-section--invert & {    
      border-color: var(--nsw-white);
    }
  }

  th,
  thead td,
  tfoot td {
    font-weight: var(--nsw-font-bold);
  }

  thead {
    border-bottom: solid 2px var(--nsw-grey-01);
    
    .nsw-section--invert & {    
      border-color: var(--nsw-white);
    }
  }
}

cite {
  margin-top: nsw.rem(16px);
  display: block;
  font-style: normal;

  @include nsw.font-size('sm');
}

cite::before {
  content: '— ';
}

hr {
  border: 0;
  height: 1px;
  background-color: var(--nsw-grey-04);
  margin: nsw.rem(16) 0;
}

kbd {
  background-color: var(--nsw-white);
  color: var(--nsw-text-dark);
  border: 1px solid var(--nsw-grey-02);
  font-family: var(--nsw-font-family);
  font-weight: 700;
  border-radius: 4px;
  padding: nsw.rem(4px);
  margin: 0 nsw.rem(4px);
  min-width: nsw.rem(20px);
  line-height: 1;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;

  .nsw-section--invert & {
    background-color: transparent;
    border: 1px solid var(--nsw-white);
    color: var(--nsw-text-light);
  }
}

h1,
h2,
h3,
h4,
h5,
h6,
.nsw-h1,
.nsw-h2,
.nsw-h3,
.nsw-h4,
.nsw-h5,
.nsw-h6 {
  font-weight: var(--nsw-font-bold);
  margin: 0;
}

h1,
.nsw-h1 {
  @include nsw.font-size('xxl');
}

h2,
.nsw-h2 {
  @include nsw.font-size('xl');
}

h3,
.nsw-h3 {
  @include nsw.font-size('lg');
}

h4,
.nsw-h4 {
  @include nsw.font-size('md');
}

h5,
h6,
.nsw-h5,
.nsw-h6 {
  @include nsw.font-size('sm');
}

* + h1,
* + .nsw-h1 {
  margin-top: nsw.rem(64px);
}

* + h2,
* + .nsw-h2 {
  margin-top: nsw.rem(48px);
}

* + h3,
* + .nsw-h3 {
  margin-top: nsw.rem(32px);
}

* + h4,
* + h5,
* + h6,
* + .nsw-h4,
* + .nsw-h5,
* + .nsw-h6 {
  margin-top: nsw.rem(24px);
}

.nsw-intro {
  margin: nsw.rem(16px) 0 0 0;
  
  @include nsw.font-size('md');
}


a {
  @include nsw.link;

  .nsw-section--invert & {    
    @include nsw.link-light();
  }
}

.nsw-section-separator {    
  border: 0;
  height: 1px;
  background-color: var(--nsw-grey-04);
  margin: nsw.rem(32) 0;

  @include nsw.breakpoint('md') {
    margin: nsw.rem(48) 0;
  }
}

.nsw-section-text {
  margin-top: nsw.rem(-8px);
  padding-bottom: nsw.rem(8px);
}

.nsw-section-title {
  margin: 0;
  padding-top: nsw.rem(nsw.$grid-gutters);
  padding-bottom: nsw.rem(8px);

  @include nsw.breakpoint('md') {
    padding-top: nsw.rem(nsw.$grid-gutters*2);
  }
}

@mixin responsive-font-size($size) {
  & {
    --nsw-font-size-#{$size}: var(--nsw-font-size-#{$size}-mobile);
    --nsw-line-height-#{$size}: var(--nsw-line-height-#{$size}-mobile);
  }

  @include nsw.breakpoint(nsw.$nsw-font-size-reponsive-breakpoint) {
    & {
      --nsw-font-size-#{$size}: var(--nsw-font-size-#{$size}-desktop);
      --nsw-line-height-#{$size}: var(--nsw-line-height-#{$size}-desktop);
    }
  }
}

:root {
  @include responsive-font-size(xxs);
  @include responsive-font-size(xs);
  @include responsive-font-size(sm);
  @include responsive-font-size(md);
  @include responsive-font-size(lg);
  @include responsive-font-size(xl);
  @include responsive-font-size(xxl);
}