@use "sass:map";
@use "sass:math";
@use "./maps" as *;
@use "../util/scss/add-rules.scss" as *;
@use "../util/scss/clockwise.scss" as *;
@use "../util/scss/besm.scss" as *;
@use "../util/scss/include.scss" as *;
@use "./variables" as *;

@mixin cx-section($name: "section", $mods: $cx-section-mods, $besm: $cx-besm) {
   $block: map.get($besm, block);
   $element: map.get($besm, element);
   $state: map.get($besm, state);
   $mod: map.get($besm, mod);

   .#{$block}#{$name} {
      flex-direction: column;
      display: flex;
      box-sizing: border-box;

      @include cx-add-rules($cx-section-styles);

      @each $modname, $config in $mods {
         &.#{$mod}#{$modname} {
            @include cx-add-state-rules($config, default);
         }
      }
   }

   .#{$element}#{$name}-header {
      box-sizing: border-box;
      @include cx-add-state-rules($cx-section-header-state-style-map, default);
   }

   .#{$element}#{$name}-body {
      flex: 1 1 auto;
      box-sizing: border-box;
      overflow: auto;

      .#{$state}pad > & {
         @include cx-add-state-rules($cx-section-body-state-style-map, default);
      }
   }

   .#{$element}#{$name}-footer {
      box-sizing: border-box;
      @include cx-add-state-rules($cx-section-footer-state-style-map, default);
   }
}

@if (cx-should-include("cx/widgets/Section")) {
   @include cx-section();
}