// -----------------------------------------------------------------------------
// This file contains very basic styles.
// -----------------------------------------------------------------------------

//
HTML {
  box-sizing: border-box;
  height: 100%;
}

BODY {
  background-color: var(--body-bg);
  font-family: 'Fira Sans';
  direction: ltr;
  position: relative;
  margin: 0;
}

/*
 * Make all elements from the DOM inherit from the parent box-sizing
 * Since `*` has a specificity of 0, it does not override the `html` value
 * making all elements inheriting from the root box-sizing value
 * See: https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
 */
*, *::before, *::after {
  box-sizing: inherit;
}

:focus {
  outline-width: $outline-width;
  outline-offset: #{(-1 * $outline-width) + 1};
}

A {
  @include link-color(var(--link-text), var(--link-hover-text));

  text-decoration: none;

  &:hover,
  &:active {
    text-decoration: none;
  }
}

HR {
  height: 0;
  border: 0;
  border-top: 1px solid var(--border);

  &.dark {
    border-color: var(--nav-bg);
  }
}