@use '../abstract' as *;

/* remove bounce affect on Safari mac */
html, body {
  overscroll-behavior-y: none;
}

html {
  //@include scroll(); //Eldad ask to try to use if without for MacOS affect (hide when not being use)
  scrollbar-gutter: stable;
  overflow: overlay; // fallback macOS
  overflow-x: hidden;
  &:has(:where(body#{$theme-dark})) {  color-scheme:dark; }
}

body {
  --p-body-text-color: var(--color-neutral-60);
  --p-body-bg-color: var(--color-neutral-5);
  font-family: var(--content-font);
  -webkit-font-smoothing: antialiased;
  font-weight: 400;
  font-size: 87.5%; /* default equal to 14px */
  line-height: 1.5;
  color: hsl(var(--p-body-text-color));
  background-color: hsl(var(--p-body-bg-color));

  &#{$theme-dark} {
    --p-body-text-color: var(--color-neutral-20);
    --p-body-bg-color: var(--color-neutral-105);
  }
}

/*
  Native element affect

  there also utilities classes:
  - u-small-text
  - u-font-bold
*/
small { font-size:pxToRem(14); }
b     { font-weight:600; }
code  {
  font-family: var(--code-font);
  font-size: pxToRem(14);
  line-height: 1.5;
  letter-spacing: 0.08em;
  white-space: pre-wrap;
}

/** heading **/

/* color for both heading */
[class*="heading-"] {
  --p-heading-text-color: var(--heading-text-color, var(--color-neutral-80));
  color: hsl(var(--p-heading-text-color));
  #{$theme-dark} & {
    --p-heading-text-color: var(--heading-text-color, var(--color-neutral-10));
  }
}

[class*="heading-level"] {
  font-family: var(--heading-font, arial);
  line-height: 1.5;
}

.heading-level {
  @media #{$break1}, #{$break2} {
    &-1 { font-size:var(--font-size-7); font-weight:700; }
    &-2 { font-size:var(--font-size-6); font-weight:700; }
    &-3 { font-size:var(--font-size-5); font-weight:600; }
    &-4 { font-size:var(--font-size-4); font-weight:500; }
    &-5 { font-size:var(--font-size-3); font-weight:500; }
    &-6 { font-size:var(--font-size-2); font-weight:500; }
    &-7 { font-size:var(--font-size-1); font-weight:500; }
  }
  @media #{$break3open} {
    &-1 { font-size:var(--font-size-8); font-weight:700; }
    &-2 { font-size:var(--font-size-7); font-weight:700; }
    &-3 { font-size:var(--font-size-6); font-weight:700; }
    &-4 { font-size:var(--font-size-5); font-weight:600; }
    &-5 { font-size:var(--font-size-4); font-weight:500; }
    &-6 { font-size:var(--font-size-3); font-weight:500; }
    &-7 { font-size:var(--font-size-2); font-weight:500; }
  }
}

[class*="eyebrow-heading"] {
  text-transform: uppercase;
  font-weight: 600;
  line-height: 1.5;
}

.eyebrow-heading {
  &-1 { font-size:var(--font-size-1);  letter-spacing:0.08em; }
  &-2 { font-size:var(--font-size-0);  letter-spacing:0.08em; }
  &-3 { font-size:var(--font-size-00); letter-spacing:0.12em; }
}

.body-text {
  &-1 { font-size:var(--font-size-1); }
  &-2 { font-size:var(--font-size-0); }
}

::selection {
  color: hsl(var(--color-neutral-1000)); -webkit-text-fill-color: hsl(var(--color-neutral-1000));
  background-color: hsl(var(--color-mint-500)); background-clip:revert; -webkit-background-clip:revert;
}

:where(body) :focus-visible {
  /* focus styles */
  box-shadow: var(--focus-box-shadow);
}