@use "sass:meta";
@use "mixin";

* {
  box-sizing: border-box;
}

@include meta.load-css("tokens");
@include meta.load-css("animation");

@include meta.load-css("_components/appbar");
@include meta.load-css("_components/dialog");
@include meta.load-css("_components/loading-splash");
@include meta.load-css("_components/snackbar");
@include meta.load-css("_components/table");

:root {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  font-size: 1px;
  font-synthesis: none;
  scrollbar-color: var(--md-sys-color-secondary) transparent;
  text-rendering: optimizeLegibility;
  hyphens: auto;
}

html,
body {
  height: 100%;
  width: 100%;

  margin: 0px;
  padding: 0px;

  overflow: hidden;

  ::selection {
    color: var(--md-sys-color-surface-variant);

    background-color: var(--md-sys-color-on-surface-variant);
  }
}

#app {
  position: relative;

  height: 100%;

  color: var(--md-sys-color-on-surface);

  background-color: var(--md-sys-color-surface-container-lowest);

  backdrop-filter: contrast(1);
  opacity: 1;
  touch-action: none;
  transition: var(--md-sys-motion-duration-extra-long1) var(--md-sys-motion-easing-standard);
  z-index: 1;

  :disabled,
  [disabled] {
    box-shadow: none;
    filter: grayscale(1);
    pointer-events: none;
  }
}

h1 {
  @include mixin.typescale-style("headline-large");

  margin: 0px;
}

h2 {
  @include mixin.typescale-style("headline-medium");

  margin: 0px;
}

h3 {
  @include mixin.typescale-style("headline-small");

  margin: 0px;
}

h4 {
  @include mixin.typescale-style("title-large");

  margin: 0px;
}

h5 {
  @include mixin.typescale-style("title-medium");

  margin: 0px;
}

h6 {
  @include mixin.typescale-style("title-small");

  margin: 0px;
}

p,
pre {
  @include mixin.typescale-style("body-large");

  margin: 0px;
}

a {
  display: inline-block;

  height: max-content;
  width: max-content;

  color: var(--md-sys-color-primary);
  letter-spacing: 0px;
  text-underline-offset: 5px;

  code {
    color: var(--md-sys-color-inverse-primary) !important;
    font-weight: bold;
    text-decoration: underline;
  }
}

abbr {
  cursor: help;
}

hr {
  height: 15px;

  margin: 0px;

  border-radius: var(--md-sys-shape-corner-small);
  border: none;

  background: var(--md-sys-color-outline-variant);

  -webkit-mask: var(--via-svg-wave) repeat;
  mask: var(--via-svg-wave) repeat;
  opacity: 0.3;
}

a,
span {
  @include mixin.typescale-style("body-large");
}
