@use 'sass:math';
@use '../abstracts' as *;
@use '../utilities/skeleton' as *;
@use '../cfpb-tagline/skeleton' as *;
@use '../cfpb-form-search/skeleton' as *;

/* ==========================================================================
   Design System
   Base styles
   ========================================================================== */

//
// Type hierarchy
//
body {
  color: var(--text);
  font-family: var(--font-stack);
  font-size: math.div($base-font-size, 16) * 100%;
  font-size-adjust: var(--font-adjust-body);
  line-height: $base-line-height;
  -webkit-font-smoothing: antialiased;
}

button,
input,
select,
textarea {
  // Must set these explicitly to override Normalize.css's provided default
  // of `font-family: sans-serif;`
  font-family: var(--font-stack);

  // Characters in some languages, like Chinese, have a larger x-height,
  // which will make the button taller than the input.
  // Fix that by setting the line height on the button and the input.
  line-height: math.div(19px, $base-font-size-px);
  font-size-adjust: var(--font-adjust-body);
}

/*
 * On iOS Safari the input is collapsed till it's clicked.
 * This sets the default min width and height to what it would be if the
 * appearance was a textfield.
 */
input[type='date'] {
  display: revert;
  min-width: 100px;
  min-height: 35px;
  padding-top: 0;
  padding-bottom: 0;

  &.a-text-input--full {
    min-width: 100%;
  }
}

// Globally remove inset border style from HR elements.
hr {
  border: none;
  border-top: 1px solid var(--gray-40);
}

strong,
b {
  font-weight: 600;
}

// Resetting default browser styling for margin-top on headings
h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0;
}

h1,
.h1 {
  @include heading-1;
}

h2,
.h2 {
  @include heading-2;
}

h3,
.h3 {
  @include heading-3;
}

h4,
.h4 {
  @include heading-4;
}

h5,
.h5 {
  @include heading-5;
}

h6,
.h6 {
  @include heading-6;
}

.lead-paragraph {
  @include u-lead-paragraph;
}

.superheading {
  @include u-superheading;
}

//
// Body copy element vertical margins
//

p,
ul,
ol,
dl,
figure,
table,
blockquote {
  margin-top: 0;
  margin-bottom: math.div(15px, $base-font-size-px) + em;

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

p + ul,
p + ol {
  margin-top: math.div(-5px, $base-font-size-px) + em;
}

ul ul,
ol ol,
ul ol,
ol ul {
  margin-top: math.div(8px, $base-font-size-px) + em;
}

li {
  margin-bottom: math.div(8px, $base-font-size-px) + em;

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

//
// Default link
//

a {
  color: var(--link-text);

  text-decoration-color: var(--link-underline);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-decoration-style: dotted;
  text-underline-offset: 4.5px;

  // Note: The class definitions below are only for use in
  // demonstrating link states. Do not use in production.

  &:visited,
  &.visited {
    text-decoration-color: var(--link-underline-visited);
    color: var(--link-text-visited);
  }

  &:hover,
  &.hover {
    text-decoration-style: solid;
    text-decoration-color: var(--link-underline-hover);
    color: var(--link-text-hover);
  }

  &:focus,
  &.focus {
    outline: thin dotted;
    outline-offset: 1px;
  }

  &:active,
  &.active {
    text-decoration-style: solid;
    text-decoration-color: var(--link-underline-active);
    color: var(--link-text-active);
  }
}

nav a {
  // Don't show underlines if they're part of a nav list.
  text-decoration-line: none;
}

//
// Lists
//

ul {
  padding-left: math.div(18px, $base-font-size-px) + em;
  list-style: square;
}

ul ul {
  list-style-type: circle;
}

ol {
  // Slightly larger than necessary, but this is the minimum value
  // for numbers to not be partially in the margin in Internet Explorer.
  padding-left: math.div(21px, $base-font-size-px) + em;

  li:nth-last-child(n + 10),
  li:nth-last-child(n + 10) ~ li {
    // 0.5625rem
    margin-left: math.div(9px, $base-font-size-px) + rem;
  }
}

ol ol {
  list-style-type: lower-alpha;

  // Negate margin added to lists longer than 9 items.
  li {
    margin-left: 0 !important;
  }
}

ol ol ol {
  list-style-type: lower-roman;
}

// Lists in the nav should be unstyled
nav ul,
nav ol,
nav ul ul,
nav ol ol {
  list-style: none;
  list-style-image: none;
}

//
// Tables
//

caption {
  margin-bottom: math.div(10px, $base-font-size-px) + em;
  text-align: left;
}

th,
td {
  padding: math.div(10px, $base-font-size-px) + em;

  thead & {
    // 10px / 14px
    padding: math.div(10px, $size-v) + em;
    background: var(--table-head-bg);
    color: var(--table-head-text);
    font-size: math.div(16px, $base-font-size-px) + em;
    vertical-align: top;
  }
}

thead,
tbody tr {
  border-bottom: 1px solid var(--table-border);
}

th {
  font-weight: 600;
  text-align: left;

  thead & {
    // Heading elements may at times appear inside `th` elements
    // as required for navigating the page's content with screenreaders.
    // These rules prevent those headings from overriding the desired style
    // of their parent `th` elements.
    h2,
    .h2,
    h3,
    .h3,
    h4,
    .h4,
    h5,
    .h5,
    h6,
    .h6 {
      margin: 0;
      font-size: inherit;
      font-weight: inherit;
      letter-spacing: inherit;
      line-height: inherit;
      text-transform: inherit;
    }
  }
}

//
// Block quote
//

blockquote {
  margin-right: math.div(15px, $base-font-size-px) + em;
  margin-left: math.div(15px, $base-font-size-px) + em;

  // Tablet and above.
  @include respond-to-min($bp-sm-min) {
    margin-right: math.div(30px, $base-font-size-px) + em;
    margin-left: math.div(30px, $base-font-size-px) + em;
  }
}

//
// Form elements have been moved to the @cfpb/cfpb-forms component.
//

//
// Images
//

img {
  max-width: 100%;
}

//
// Figure
//

figure {
  // reset browser default side margins
  margin-right: 0;
  margin-left: 0;

  img {
    // Removes weird vertical spacing below images.
    // TODO: Discuss whether this could just be universally applied to img
    vertical-align: middle;
  }
}

//
// Code blocks
//

pre,
code {
  background: var(--code-bg);
  border-radius: 4px;
  color: var(--code-text);
  font-family: 'Input Mono', Consolas, Monaco, 'Courier New', monospace;
}

code {
  padding: math.div(3px, $size-code) + em math.div(3px, $size-code) + em 0;
  font-size: math.div($size-code, $base-font-size-px) + em;
}

pre {
  display: block;
  padding: math.div(10px, $base-font-size-px) + em
    math.div(15px, $base-font-size-px) + em;
  white-space: pre-wrap;
  overflow-wrap: break-word;

  code {
    padding: 0;
    background-color: transparent;
  }
}