@use '../configs/variables' as variables;
@use 'sass:map' as map;
@use '../functions' as *;
@use '../utils/utilities' as util;

/* stylelint-disable -- reboot configs may not follow stylelint rules */

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

// Root
// Ability to the value of the root font sizes, affecting the value of `rem`.
// null by default, thus nothing is generated.

:root {
  font-size: 16px;

  // Material doesn't support rem yet
  @media (max-width: map.get(variables.$grid-breakpoints, md)) {
    font-size: 14px;
  }
}

// Body
//
// 1. Remove the margin in all browsers.
// 2. As a best practice, apply a default `background-color`.
// 3. Prevent adjustments of font size after orientation changes in iOS.
// 4. Change the default tap highlight to be completely transparent in iOS.

html,
body {
  height: 100%;
}

html[dir='rtl'] {
  body {
    direction: rtl;
    text-align: start;
  }
}

html {
  scrollbar-color: rgb(0 0 0 / 20%) transparent;
  scrollbar-width: auto;

  &:focus-within {
    scroll-behavior: smooth;
    @media screen and (prefers-reduced-motion: reduce) {
      scroll-behavior: auto;
    }
  }
}

::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background-color: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: rgb(0 0 0 / 20%);
  @include onlyInDarkMode {
    background-color: rgb(255 255 255 / 25%);
  }
  border-radius: 4px;
}

body {
  margin: 0; // 1
  font-family: var(--font-family);
  font-size: 1rem;
  @include util.font-weight-without-variable-support('normal');
  line-height: 1.5;
  //color: var(--body-color);
  background-color: var(--body-bg); // 2
  //text-size-adjust: 100%; // 3
  -webkit-tap-highlight-color: rgba(#000, 0); // 4

  @include supports-font-variables {
    font-feature-settings: 'kern' on, 'liga' on, 'calt' on, 'ss02';
  }
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0;
  margin-bottom: 0;
  @include util.font-weight-without-variable-support('bold');
}

.mat-typography {
  h4 {
    margin-bottom: 0.75rem;
  }

  h4,
  h5,
  h6 {
    @include util.font-weight-without-variable-support('bold');
  }
}

// Content grouping
//
// 1. Reset Firefox's gray color
// 2. Set correct height and prevent the `size` attribute to make the `hr` look like an input field

hr {
  margin: 1rem 0;
  color: inherit; // 1
  background-color: currentcolor;
  border: 0;
  opacity: 25%;
}

hr:not([size]) {
  height: 1px; // 2
}

img {
  vertical-align: middle;
}

// Lists

ol,
ul {
  padding-inline-end: 2rem;
}

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

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

// Strong
//
// Add the correct font weight in Chrome, Edge, and Safari

b,
strong {
  @include util.font-weight-without-variable-support('bold');
}

// Small
//
// Add the correct font size in all browsers

small {
  font-size: 0.875em;
}

// Sub and Sup
//
// Prevent `sub` and `sup` elements from affecting the line height in
// all browsers.

sub,
sup {
  position: relative;
  font-size: 0.75em;
  line-height: 0;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

// Links

a {
  color: var(--primary);
  text-decoration: none;

  &:hover {
    color: var(--primary-700);
  }
}

// And undo these styles for placeholder links/named anchors (without href).
// It would be more straightforward to just use a[href] in previous block, but that
// causes specificity issues in many other styles that are too complex to fix.
// See https://github.com/twbs/bootstrap/issues/19402

a:not([href]):not([class]) {
  &,
  &:hover {
    color: inherit;
    text-decoration: none;
  }
}

// Code

pre,
code,
kbd,
samp {
  font-family: var(--font-monospace);
  direction: ltr;
  unicode-bidi: bidi-override;
}

// Tables
//
// Prevent double borders

table {
  caption-side: bottom;
  border-collapse: collapse;
}

// 2. Matches default `<td>` alignment by inheriting `text-align`.
// 3. Fix alignment for Safari

th {
  text-align: inherit; // 2
  text-align: -webkit-match-parent; // 3
}

// Forms
//
// 1. Allow labels to use `margin` for spacing.

label {
  display: inline-block; // 1
}

// Explicitly remove focus outline in Chromium when it shouldn't be
// visible (e.g. as result of mouse click or touch tap). It already
// should be doing this automatically, but seems to currently be
// confused and applies its very visible two-tone outline anyway.

button:focus:not(:focus-visible) {
  outline: 0;
}

// Remove inner border and padding from Firefox, but don't restore the outline like Normalize.

::-moz-focus-inner {
  padding: 0;
  border-style: none;
}

// 1. Textareas should really only resize vertically so they don't break their (horizontal) containers.

textarea {
  resize: vertical; // 1
}

// Inherit font family and line height for file input buttons

::file-selector-button {
  font: inherit;
}

// 1. Change font properties to `inherit`
// 2. Correct the inability to style clickable types in iOS and Safari.

::-webkit-file-upload-button {
  font: inherit; // 1
  appearance: button; // 2
}

// Hidden attribute
//
// Always hide an element with the `hidden` HTML attribute.

[hidden] {
  display: none !important;
}