// @use 'main';
// @use '../automatic/_web_colors';
// @use 'web';
// @use 'web-mail';

// uvoz liteness-icons
// @use "/resources/fonts/liteness-icons/style.css"; // ne deluje dovolj zanesljivo, ne moremo uporabiti ikon

// SCSS variables
@use "variables" as *;

/* vse fonte naložimo neposredno iz Google fonts, da se nam ne kompajlirajo v minimiran fajl (razen, če fonta ni tam) */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&family=Commissioner:wght@100;200;300;400;500;600;700;800;900&family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&family=Dosis:wght@200;300;400;500;600;700;800&family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Nunito+Sans:ital,opsz,wght@0,6..12,200;0,6..12,300;0,6..12,400;0,6..12,500;0,6..12,600;0,6..12,700;0,6..12,800;0,6..12,900;0,6..12,1000;1,6..12,200;1,6..12,300;1,6..12,400;1,6..12,500;1,6..12,600;1,6..12,700;1,6..12,800;1,6..12,900;1,6..12,1000&family=Nunito:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;0,1000;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900;1,1000&family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Pattaya&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Rum+Raisin&family=Sansita:ital,wght@0,400;0,700;0,800;0,900;1,400;1,700;1,800;1,900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

html {
  box-sizing: border-box;
}
body {
  margin: 0 !important;
  min-width: 360px; // to je absolutno najmanjša širina, ki jo še dopuščamo; če ima telefon samo 320px, bodo morali scrollati oz. se bo naredil zoom
}
html, body, button, input, textarea, select, option, .mce-content-body[data-mce-placeholder]:not(.mce-visualblocks)::before, .vue-dropzone,
.v-select, .vs__selected, .vs__search, .mnm-data-input-holder > .mce-content-body {
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  font-size: 15px;
  color: black;
  overflow-wrap: anywhere; // s tem dovolimo deljenje besed, ki bi sicer zavzemale več kot je razpoložljive širine elementa (npr. linki so taki)
}
:focus-visible {
  box-shadow: 0 0 6px 2px #77777766 !important;
  outline: none;
  outline-offset: unset;
}
button {
  cursor: pointer;
}
pre {
  margin: 0;
}
a {
  opacity: 1;
  text-decoration: none;

  &:hover {
    opacity: 0.8;
  }
  &:active {
    background-color: #77777733 !important;
  }
}

// h1, h2, h3, h4, h5, h6 {
//   font-weight: lighter;
//   margin: 0.4em 0;
//   break-after: avoid; // da nam, če je besedilo v več stolpcih, naslov ne ostane na koncu stolpca
//   //&:first-child, &:last-child {
//   //  margin-top: 0; // to zato, ker nočemo dodatnih razmikov v elementu, če pa se naslov pojavi med besedilom, pa seveda ja
//   //  margin-bottom: 0; // to zato, ker nočemo dodatnih razmikov v elementu, če pa se naslov pojavi med besedilom, pa seveda ja
//   //}
//   a {
//     color: inherit;
//     text-decoration: none;
//   }
// }

// h1 {
//   font-size: 2.50em;
//   @media #{$mobile} { font-size: 2.40em; }
// }
// h2 {
//   font-size: 1.80em;
//   @media #{$mobile} { font-size: 2.00em; }
// }
// h3 {
//   font-size: 1.60em;
//   @media #{$mobile} { font-size: 1.70em; }
// }
// h4 {
//   font-size: 1.45em;
//   @media #{$mobile} { font-size: 1.40em; }
// }
// h5 {
//   font-size: 1.30em;
//   @media #{$mobile} { font-size: 1.25em; }
// }
// h6 {
//   font-size: 1.00em;
//   @media #{$mobile} { font-size: 1.00em; }
// }
// p {
//   margin: 0;
//   padding: 0;
// }
figure {
  margin: 0;
}
ul {
  margin-block-start: 0em;
  margin-block-end: 0em;
  padding-inline-start: 2em;
}
ol {
  margin-block-start: 0em;
  margin-block-end: 0em;
  padding-inline-start: 1.8em;
  li::marker {
    font-variant-numeric: proportional-nums;
  }
}


html {
  scroll-behavior: smooth;
  scroll-padding-top: 150px; // height of sticky header   https://stackoverflow.com/a/67324390
  box-sizing: border-box; // s tem določimo, da širina elementa vključuje tudi črte
}
body {
  background-color: var(--mnm-color-background);
  color: var(--mnm-color-text);
  padding: 0;
  margin: 0;
  box-sizing: border-box; // s tem določimo, da širina elementa vključuje tudi črte
  line-height: var(--mnm-line-height);
}
// h1, h2, h3, h4, h5, h6 {
//   position: relative; // rabimo, da lahko naredimo absolutne linke preko besedila (da samo besedilo ni link, ampak link naredimo kot block čez celoten naslov)
//   // color: var(--mnm-color-headings);
//   line-height: 1.3em;
//   margin: 0;
//   width: 100%;
// }
img {
  object-fit: contain;
}

// .karpo_si {
//
//   body, button, input, textarea, select, option, .mce-content-body[data-mce-placeholder]:not(.mce-visualblocks)::before, .vue-dropzone,
//   .v-select, .vs__selected, .vs__search, .mnm-data-input-holder > .mce-content-body {
//     font-family: "Poppins", Helvetica, Arial, sans-serif;
//     font-size: 16px;
//     font-weight: 300;
//   }
//
//   // WARNING: vse spremenbe slogov naredi znotraj .mnm-page-container, da se ne naredijo tudi v delih urejevalnika
//   .mnm-page-container {
//
//     h1, h2 {
//       &:not(.swal2-title) {
//         font-weight: 600;
//       }
//     }
//     h3, h4, h5, h6 {
//       &:not(.swal2-title) {
//         font-weight: 600;
//       }
//     }
//
//     main {
//       h1:not(.swal2-title) {
//         font-size: 4.0em;
//       }
//       h2:not(.swal2-title) {
//         font-size: 2.6em;
//       }
//       h3:not(.swal2-title) {
//         font-size: 2.0em;
//       }
//       h4:not(.swal2-title) {
//         font-size: 1.3em;
//         text-transform: uppercase;
//         letter-spacing: 0.12em;
//         font-weight: normal;
//       }
//     }
//
//   }
//
// }