@use 'sass:map';
@use '~@moda/tokens';
@use '../font-smoothing/font-smoothing';

@mixin global-styles() {
  html {
    box-sizing: border-box;
    font-size: map.get(tokens.$typography, 'root-font-size');
  }

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

  body,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  ol,
  ul {
    margin: 0;
    padding: 0;
    font-weight: normal;
  }

  button {
    margin: 0;
  }

  ol,
  ul {
    list-style: none;
  }

  img {
    max-width: 100%;
    height: auto;
  }

  body,
  input {
    @include font-smoothing.font-smoothing(antialiased);
  }

  // :focus-visible polyfill
  // disable outlines on :focus
  .js-focus-visible :focus:not(.focus-visible) {
    outline: 0;
  }
  // custom outlines on :focus-visible
  .focus-visible {
    outline: 2px solid tokens.color(burnt-orange);
  }
}