@php
  /* WARNING: sem pridejo samo CSS spremenljivke, ker se ta blade včita PO tem, ko se včita web.scss */

  $color_set = ($page ?? new App\Models\Page())->effective_page_color_set_array;

@endphp


<!--suppress CssUnresolvedCustomProperty -->
<style>
  :root {

    {{-- Nastavimo spremenljivke iz \App\Classes\Prefs::$web_styles */ --}}
    @foreach(\App\Classes\Prefs::$web_styles as $styles_key => $style)
      --mnm-{{$styles_key}}: {{$style}}{{str_ends_with($styles_key, '-px') ? 'px' : ''}};
    @endforeach

     --mnm-color-background: {{$color_set['background']}};
     --mnm-color-text: {{$color_set['text']}};
     --mnm-color-headings: {{$color_set['headings']}};
     --mnm-color-links: {{$color_set['links'] ?? $color_set['headings']}};
     --mnm-color-borders: {{$color_set['borders'] ?? $color_set['text']}};
  }

  /* :root { --mnm-border-width: unset;  } */
  @foreach(\App\Classes\Prefs::$web_page_borders as $borders_key => $border)
    @if(!is_null($border['id']))
      .mnm-borders-{{$borders_key}} { --mnm-border-width: {{$border['border_width']}}px; }
    @endif
  @endforeach

  :root { --mnm-shadow: none; }
  @foreach(\App\Classes\Prefs::$web_page_shadows as $shadows_key => $shadow)
    .mnm-shadow-{{$shadows_key}} { --mnm-shadow: {{$shadow['style']}}; }
  @endforeach

  :root { --mnm-radius-factor: 0; }
  .mnm-cta_button {
    --mnm-radius-factor: var(--mnm-border-radius-cta_button);
  }
  @foreach(\App\Classes\Prefs::$web_page_border_radiuses as $radiuses_key => $radius)
    .mnm-border-radius-{{$radiuses_key}} { --mnm-radius-factor: {{$radius['radius_factor']}}; }
  @endforeach

  .mnm-element {
    --mnm-padding-factor: 1.00;
    @foreach(\App\Classes\Prefs::$web_page_margins as $margins_key => $margin)
      &.mnm-element-margins-{{$margins_key}}  { --mnm-padding-factor: {{$margin['padding_factor']}}; }
    @endforeach
  }

  /* WARNING: določanje gapping faktorja mora biti ZA določanjem širine (ne razumem več zakaj; Borut, 2025-01-17 */
  .mnm-element {
    & > .mnm-element-container {--mnm-gapping-factor: 1.0;}
    &.mnm-navigation_bar > .mnm-element-container {
      --mnm-gapping-factor: 0.25;
    }
    &.mnm-form > .mnm-element-container {
      --mnm-gapping-factor: 0.50;
    }
    &.mnm-products_group > .mnm-element-container {
      --mnm-gapping-factor: 0.00;
    }
    @foreach(\App\Classes\Prefs::$web_page_gaps as $gaps_key => $gap)
      @if(!is_null($gap['id']))
        &.mnm-element-gaps-{{$gaps_key}} > .mnm-element-container {--mnm-gapping-factor: {{$gap['gapping_factor']}}; }

        /* izjema: .mnm-faqs_group naj ima malo širši razmik med elementi izven .mnm-element-containerja */
        &.mnm-faqs_group.mnm-element-gaps-{{$gaps_key}} {--mnm-gapping-factor: {{$gap['gapping_factor'] * 1.5}}; }
      @endif
    @endforeach
  }

</style>