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

  // ugotovi color_profile
  $color_profile = App\Classes\Utilities::multiFindRow(App\Classes\Prefs::$web_color_profiles, 'id', $page->page_color_profile ?? App\Classes\Prefs::$web_default_color_profile, false);

  // ugotovi color_set
  $color_set = App\Classes\Utilities::multiFindRow(App\Classes\Prefs::$web_color_sets, 'id', App\Classes\Prefs::$web_default_color_set, false);
  if($color_set) {
    $color_set = App\Models\Page::convertColorSet($color_set, $color_profile);
  }
@endphp


<!--suppress CssUnresolvedCustomProperty -->
<style>
  :root {
    --mnm-edit-sidebar-width: @if($edit_mode ?? false)  {{'480px'}} @else  {{'0px'}} @endif;

    {{-- 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: {{\App\Classes\Prefs::$web_colors[$color_set['background']]['color']}};
    --mnm-color-text: {{\App\Classes\Prefs::$web_colors[$color_set['text']]['color']}};
    --mnm-color-headings: {{\App\Classes\Prefs::$web_colors[$color_set['headings']]['color']}};
    --mnm-color-links: {{\App\Classes\Prefs::$web_colors[$color_set['links']]['color']}};
    --mnm-color-borders: {{\App\Classes\Prefs::$web_colors[$color_set['borders']]['color']}};
  }

  :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-gapping-factor: 1.0;}
    &.mnm-navigation_bar {
      --mnm-gapping-factor: 0.25;
    }
    &.mnm-form {
      --mnm-gapping-factor: 0.50;
    }
    @foreach(\App\Classes\Prefs::$web_page_gaps as $gaps_key => $gap)
      @if(!is_null($gap['id']))
        &.mnm-element-gaps-{{$gaps_key}}  {--mnm-gapping-factor: {{$gap['gapping_factor']}}; }
      @endif
    @endforeach
  }

</style>