/*
 * Scopes
 *
 */

@import './reset.scss';

@mixin typographyBasis() {
  font-family: var(--font-family-default);
  font-weight: var(--font-weight-basis);
  font-size: var(--font-size-small); // has to be 16px
  font-style: normal;
  line-height: var(--line-height-basis);
  color: var(--theme-color-body, var(--color-black-80, #333));
}

@mixin coreDefault() {
  @include typographyBasis();

  // The new DNB font needs font smoothing to be thinner on webkit and FF
  /* stylelint-disable-next-line */
  -moz-osx-font-smoothing: grayscale;

  /* stylelint-disable-next-line */
  -webkit-font-smoothing: antialiased;

  /* stylelint-disable-next-line */
  -webkit-tap-highlight-color: rgba(0 0 0 / 0);

  /**
  * Ensure consistency and use the same as HTML reset -> html {...}
  * between base and code package
  */
  tab-size: 4;

  /* stylelint-disable-next-line */
  -moz-tab-size: 4;

  /* stylelint-disable-next-line */
  -ms-text-size-adjust: 100%;

  /* stylelint-disable-next-line */
  -webkit-text-size-adjust: 100%;

  word-break: break-word;

  // Will add this to the body tag – later we can test for a version mismatch
  --eufemia-version: '10.72.0';

  @content;
}

@mixin bodyDefault() {
  @include reset();
  @include coreDefault();

  @media print {
    // Use hard coded colors, because of theming and color swaps
    background-color: white;
    color: black;
  }

  .eufemia-theme {
    @include typographyBasis();
  }

  @content;
}

@mixin htmlDefault() {
  html {
    &:not([data-visual-test]) {
      scroll-behavior: smooth;
    }
    font-size: 100%;

    // IS_SAFARI_MOBILE
    @supports (-webkit-touch-callout: none) {
      @supports (font: -apple-system-body) {
        font: -apple-system-body; /* stylelint-disable-line */
      }
    }
  }

  // reset ePlatform css
  @include resetLegacyStyles();
}

// Can be used to include the most important "CSS reset" rules to one component.
// Should only be used when this component is imported in isolation.
@mixin componentReset() {
  @include coreDefault();
  @include coreReset();

  margin: 0;
  padding: 0;

  @content;
}