// refs
// https://github.com/twbs/bootstrap
// https://github.com/necolas/normalize.css/
// https://github.com/suitcss/base
@use "../themes/base";

*,
*::before,
*::after {
  box-sizing: border-box;
}

// HTML
html {
  font-family: base.$font-family;
  -ms-overflow-style: scrollbar;
  // https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant
  font-variant: base.$font-variant-base;
  // https://developer.mozilla.org/en-US/docs/Web/CSS/font-feature-settings
  font-feature-settings: base.$font-feature-settings-base;
}

html,
body {
  // - 100% height 主要来继承自于历史的 sticky footer 方案的需要（详见见 erp-comps-v2）
  // - 由于现布局使用 flex 和 .brick-layout: min-height: 100vh 这个 width/height 100% 已是不必要的 resetting
  // - 而 100% 使 body 最大只能只能到 100vh 而不能继续跟随文档内容高度增加
  // - 某些情况下会造成 popper 以 body 作为 preventOverflow.boundariesElement 时边界不符预期，
  // - 比如 fixed-header 上的菜单 popper，其预期效果的 preventOverflow 边界是整个文档高度作为边界
  // - 但默认情况下实际的 boundariesElement 限制为 100% height的 body
  // 综上，去掉 width/height 100% 的 resetting
  // @include square(100%);

  // 而由于 100% resetting 还有 "撑满视窗作为基础设置" 这一层目的
  // 所以姑且先保留 min-width / min-height 的修饰
  // ...
  // 后续，但看来不应该保留
  // Mac: System Preferences -> General -> Show Scroll Bars = Always
  // 100vw is greater than the width of the viewport cause vertical scrollbar
  // min-width: 100vw;
  // min-height: 100vh;

  // 另，"撑满视窗" 其实没有作为 resetting 的必要理由，实际承当这个职责的是具体的 layout 样式
}

body {
  margin: 0;
}

// IE10+ doesn't honor `<meta name="viewport">` in some cases.
@-ms-viewport {
  width: #{device-width};
}

// remove the clear button of a text input control in IE10+
input::-ms-clear,
input::-ms-reveal {
  display: none;
}

// Suppress the focus outline on elements that cannot be accessed via keyboard.
// This prevents an unwanted focus outline from appearing around elements that
// might still respond to pointer events.
//
// Credit: https://github.com/suitcss/base
[tabindex='-1']:focus {
  outline: none !important;
}

// Shim for "new" HTML5 structural elements to display correctly (IE10, older browsers)
article,
aside,
dialog,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section {
  display: block;
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 0.5em;
  font-weight: base.$font-weight-semibold;
}

p {
  margin-top: 0;
  margin-bottom: 1em;
}

// Abbreviations
//
// 1. remove the bottom border in Firefox 39-.
// 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
// 3. Add explicit cursor to indicate changed behavior.
// 4. Duplicate behavior to the data-* attribute for our tooltip plugin
abbr[title],
abbr[data-original-title] {
  // 4
  text-decoration: underline; // 2
  text-decoration: underline dotted; // 2
  border-bottom: 0; // 1
  cursor: help; // 3
}

address {
  margin-bottom: 1em;
  font-style: normal;
  line-height: inherit;
}

input[type='text'],
input[type='password'],
input[type='number'],
textarea {
  -webkit-appearance: none;
}

ol, ul, dl {
  margin-top: 0;
  margin-bottom: 1em;
}

ol ol,
ul ul,
ol ul,
ul ol {
  margin-bottom: 0;
}

dt {
  font-weight: base.$font-weight-semibold;
}

dd {
  margin-bottom: 0.5em;
  margin-left: 0; // Undo browser default
}

blockquote {
  margin: 0 0 1em;
}

b,
strong {
  font-weight: base.$font-weight-semibold; // Add the correct font weight in Chrome, Edge, and Safari
}

pre,
code,
kbd,
samp {
  font-size: 1em; // Correct the odd `em` font sizing in all browsers.
  font-family: base.$code-family;
}

pre {
  // remove browser default top margin
  margin-top: 0;
  // Reset browser default of `1em` to use `em`s
  margin-bottom: 1em;
  // Don't allow content to break outside
  overflow: auto;
}

figure {
  // Apply a consistent margin strategy (matches our type styles).
  margin: 0 0 1em;
}

img {
  vertical-align: middle;
}

svg:not(:root) {
  overflow: hidden; // Hide the overflow in IE
}

table {
  border-collapse: collapse; // Prevent double borders
}

caption {
  padding-top: 0.75em;
  padding-bottom: 0.3em;
  text-align: left;
  caption-side: bottom;
}

th {
  // Matches default `<td>` alignment by inheriting from the `<body>`, or the
  // closest parent with a set `text-align`.
  text-align: inherit;
}

input,
button,
select,
optgroup,
textarea {
  margin: 0; // remove the margin in Firefox and Safari
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}

input[type='radio'],
input[type='checkbox'] {
  box-sizing: border-box; // 1. Add the correct box sizing in IE 10-
  padding: 0; // 2. remove the padding in IE 10-
}

input[type='date'],
input[type='time'],
input[type='datetime-local'],
input[type='month'] {
  // remove the default appearance of temporal inputs to avoid a Mobile Safari
  // bug where setting a custom line-height prevents text from being vertically
  // centered within the input.
  // See https://bugs.webkit.org/show_bug.cgi?id=139848
  // and https://github.com/twbs/bootstrap/issues/11266
  -webkit-appearance: listbox;
}

textarea {
  // Textareas should really only resize vertically so they don't break their (horizontal) containers.
  // resize: vertical;
}

fieldset {
  // Browsers set a default `min-width: min-content;` on fieldsets,
  // unlike e.g. `<div>`s, which have `min-width: 0;` by default.
  // So we reset that to ensure fieldsets behave more like a standard block element.
  // See https://github.com/twbs/bootstrap/issues/12359
  // and https://html.spec.whatwg.org/multipage/#the-fieldset-and-legend-elements
  min-width: 0;
  margin: 0;
  // Reset the default outline behavior of fieldsets so they don't affect page layout.
  padding: 0;
  border: 0;
}

legend {
  display: block;
  width: 100%;
  margin-bottom: 0.5em;
  padding: 0;
  font-size: 1.5em;
  line-height: inherit;
}