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

* {
  box-sizing: border-box;

  transition: background-color var(--md-sys-motion-spring-default-effect-duration) var(--md-sys-motion-spring-default-effect);

  &::after,
  &::before {
    transition: background-color var(--md-sys-motion-spring-default-effect-duration)
      var(--md-sys-motion-spring-default-effect);
  }
}

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

@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;
}

:focus-visible {
  @include mixin.focus-ring($thickness: 3, $offset: 2);
}

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

  margin: 0px;
  padding: 0px;

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

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

  overflow: hidden;

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

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

#app {
  position: relative;

  height: 100%;
  width: 100%;

  touch-action: none;
  z-index: 0;

  :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");
}

.MaterialButton,
.MaterialCard,
.PrevNext a {
  &::after {
    content: "";

    position: absolute;
    top: 0;
    left: 0;

    height: 100%;
    width: 100%;

    background-color: transparent;

    z-index: 0;
  }

  &:hover {
    &::after {
      background-color: var(--md-sys-state-hover-state-layer);
    }
  }

  &:focus-visible {
    &::after {
      background-color: var(--md-sys-state-focus-state-layer);
    }
  }

  &:active {
    &::after {
      background-color: var(--md-sys-state-pressed-state-layer);
    }
  }
}
