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

.mnm-page, .mnm-page-container, .mnm-element, .mnm-element-container {
  display: block !important;
}

.mnm-block {
  .mnm-element-container {
    max-width: 600px;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

.mnm-block {
  // blocki imajo drugačno logiko kot ostali elementi: sami nimajo niti margina, niti paddinga, ima pa zato container margin
  // tak način rabimo, da lahko vstavimo block za drugi block in da lahko nastavljamo položaj slike za ozadje
  margin: 0;
  padding: 0;
  > .mnm-element-container {
    margin: 0;
    padding: calc(var(--mnm-padding-unit-px) * 1);
  }
}

.mnm-element-margins-none, .mnm-element-margins-xxs, .mnm-element-margins-xs, .mnm-element-margins-s, .mnm-element-margins-m, .mnm-element-margins-l, .mnm-element-margins-xl, .mnm-element-margins-xxl {

  // izjema: block nima paddinga, ampak ima njegov .mnm-element-container margin
  &.mnm-block {
    margin: 0 !important;
    padding: 0 !important;
    > .mnm-element-container {
      // block-conatinerju nastavimo padding samo zgoraj in spodaj, levo in desno pa mora biti var(--mnm-padding-unit-px)
      padding: calc(var(--mnm-padding-unit-px) * var(--mnm-padding-factor)) var(--mnm-padding-unit-px) !important;
      margin: 0 !important;
      margin-left: auto !important;
      margin-right: auto !important;
    }
  }
}

.mnm-element {
  > .mnm-element-container {
    gap: 0;
    > .mnm-element {
      padding: calc(var(--mnm-padding-unit-px) * var(--mnm-gapping-factor) / 2) 0;

      &:first-child {
        padding-top: 0 !important;
      }
      &:last-child {
        padding-bottom: 0 !important;
      }
    }
  }
}