// These are global styles that must be included by all apps that consume
// polaris-react. As the AppProvider is a required wrapper when using polaris
// components then this css shall always be present.

@import '../../styles/common';

:root {
  --polaris-version-number: '{{POLARIS_VERSION}}';
}

html,
body {
  @include text-style-body;
  @include text-emphasis-normal;
}

html,
body,
button {
  font-family: var(--p-font-family-sans);
}

html {
  position: relative;
  font-size: 100%;
  -webkit-font-smoothing: antialiased;

  // This needs to come after -webkit-font-smoothing
  -moz-osx-font-smoothing: grayscale;

  text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}

body {
  min-height: 100%;
  margin: 0;
  padding: 0;

  // hardcoding background color because app provider does not have access to
  // the --p-background custom property. Will revisit best way to address in
  // follow-up. PR convo for reference
  // https://github.com/Shopify/polaris-react/pull/4636/files#r748646268
  background-color: #f6f6f7;

  @media print {
    // AppProvider sets styles on the body. These needs to
    // be overridden using !important.
    // stylelint-disable-next-line declaration-no-important
    background-color: transparent !important;
  }
}

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

h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0;
  font-size: 1em;
  font-weight: var(--p-font-weight-regular);
}

button::-moz-focus-inner,
[type='button']::-moz-focus-inner,
[type='reset']::-moz-focus-inner,
[type='submit']::-moz-focus-inner {
  border-style: none;
}