@use "./variables" as var;

@if (var.$output-base) {

  // Remove margin, padding and inherit box-sizing on everything
  *,
  *::before,
  *::after {
    box-sizing: inherit;
    margin: 0;
    padding: 0;
  }

  // Default html (root) and body styles
  html,
  body {
    height: var.$root-height;
  }

  html {
    box-sizing: var.$box-sizing;
    font-size: var.$font-size;
    line-height: var.$line-height;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
  }

  body {
    background: var.$body-background;
    color: var.$color;
    font-family: var.$font-family;
  }

  // Reset font-size for headings
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-size: inherit;
  }

  // Better default styles for images
  img {
    max-width: 100%;
    height: auto;
    border: 0;
    border-style: none;
    vertical-align: middle;
  }

  // Global font weight for Chrome, Edge, and Safari
  b,
  strong {
    font-weight: bold;
  }

  // Default anchor and button styles
  a,
  button {
    color: inherit;
  }

  a {
    text-decoration: none;
  }

  // Default font family and font size for code and pre elements
  code,
  pre {
    font-family: var.$font-family-mono;
    font-size: 1em;
  }

  // Default small element font-size
  small {
    font-size: var.$font-size-sm;
  }

  // Better default table styles
  table {
    border-collapse: collapse;
  }

  // Better default caption styles
  caption {
    caption-side: bottom;
    color: var.$color-caption;
    text-align: left;
  }

  // Default form input element styles
  button,
  input,
  optgroup,
  select,
  textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: inherit;
  }

  button,
  input {
    overflow: visible;
  }

  button {
    border: 0;
    background: none;
    letter-spacing: inherit;
    text-align: inherit;
    text-transform: none;
    cursor: pointer;
    -webkit-font-smoothing: inherit;
  }

  // Correct the inability to style clickable types in iOS and Safari
  button,
  [type="button"],
  [type="reset"],
  [type="submit"] {
    -webkit-appearance: button;
  }

  // Remove the inner border and padding in Firefox
  button::-moz-focus-inner,
  [type="button"]::-moz-focus-inner,
  [type="reset"]::-moz-focus-inner,
  [type="submit"]::-moz-focus-inner {
    padding: 0;
    border-style: none;
  }

  // Correct placeholder text opacity in Firefox
  input::-moz-placeholder {
    opacity: 1;
  }

  // 1. Correct the inability to style clickable types in iOS and Safari
  // 2. Change font properties to `inherit` in Safari
  ::-webkit-file-upload-button {
    -webkit-appearance: button; // 1
    font: inherit; // 2
  }
}