@use "../tokens/color" as *;
@use "../tokens/font" as *;
@use "../tokens/spacing" as *;

// Typography styles that are usually applied at the `body` level
// must be placed within this mixin so that they can be pulled into the
//`.iati-design-system--enabled` class in `main-incremental.scss`
@mixin body-styles {
  font-family: $font-stack-body;
  font-weight: $font-weight-body;
  color: $color-grey-90;
  line-height: 1.15;
}

body {
  @include body-styles();
  display: flex;
  flex-direction: column;
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
}

.iati-dark-background {
  color: $color-grey-10;
  background-color: $color-teal-90;
}

p,
a,
li {
  line-height: $line-height-body;
}

strong {
  font-weight: $font-weight-body-strong;
}

em {
  font-style: italic;
}

li p {
  margin: 0;
}

a {
  color: $color-teal-80;
  text-decoration: none;
  text-decoration-color: $color-teal-30;
  text-underline-position: under;

  &:active,
  &:hover,
  &:focus {
    text-decoration: underline;
  }

  &:has(i),
  &:has(img) {
    text-decoration: none;
    line-height: 0;
  }
}

p a {
  text-decoration: underline;

  &:active,
  &:hover,
  &:focus {
    text-decoration: none;
  }
}

a.light {
  color: $color-teal-30;
  text-decoration-color: $color-teal-70;
}

table:not([class]) {
  border-collapse: collapse;
  display: inline-block;
  max-width: 100%;
  width: 100%;
  overflow: auto;

  thead,
  th {
    background-color: $color-grey-10;

    &,
    p {
      font-weight: $font-weight-body-strong;
    }
  }

  th,
  td {
    border: 1px solid $color-grey-20;
    padding: 0.5rem;
  }

  caption {
    margin: $padding-block 0;
  }
}

.iati-quote {
  border-left: 4px solid $color-grey-90;
  padding: 0 $padding-block;
  margin-left: $padding-block;
}

dl {
  dt,
  dd {
    line-height: $line-height-body;
  }

  dt {
    font-weight: $font-weight-body-strong;
  }

  dd {
    margin-left: $padding-block;
  }
}