@use "sass:map";
@use "sass:math";
@use "@twig/scss/_global" as global;
@use "@twig/scss/variables/_variables-components" as components;

$params: (
   "margin": 0 0 global.$spacer 0,

   "justify-content": flex-start,
   "item-gap": global.$spacer,
   "item-padding": 0 10px,
   "item-text-decoration-mixin": "never",
   "item-border-radius": unset,
   "item-background-color": none,
   "item-background-color-active": transparent,
   "item-color-active": global.$text-dark,

   "background-color": global.$body-bg,
   "font-size": global.$font-size-larger,
   "font-weight": global.$font-weight-bold,
   "color": global.$text-dark,
   "hover-line": true,
   "hover-line-color": global.$blue,
   "hover-line-size": 3px,

   "title-margin": 0 0 20px 0,
   "title-color": global.$headings-color,
   "title-font-size": global.$font-size-h4,
   "title-font-weight": global.$font-weight-bold,
);

@if global-variable-exists(c-articles-sections, components) {
   $keys: map.keys(components.$c-articles-sections);
   @each $name in $keys {
      @if not map.get($params, $name) {
         @warn "Neexistující proměnná '#{$name}' v komponentě '$#{component("Articles:Sections", "class")}'.";
      }
   }

   $params: map.merge($params, components.$c-articles-sections);
}

.#{component("Articles:Sections", "class")} {
   display: flex;
   justify-content: map.get($params, "justify-content");
   background-color: map.get($params, "background-color");
   container-type: inline-size;
   margin: map.get($params, "margin");

   ul {
      @include global.list-inline;

      display: flex;
      flex-wrap: wrap;
      gap: map.get($params, "item-gap");
   }

   .title {
      margin: map.get($params, "title-margin");
      color: map.get($params, "title-color");
      font-size: map.get($params, "title-font-size");
      font-weight: map.get($params, "title-font-weight");
   }

   a {
      @if (map.get($params, "item-text-decoration-mixin") == "never") {
         @include global.underline-never;
      } @else if (map.get($params, "item-text-decoration-mixin") == "hover") {
         @include global.underline-hover;
      } @else if (map.get($params, "item-text-decoration-mixin") == "default") {
         @include global.underline-default;
      }

      display: block;
      font-size: map.get($params, "font-size");
      font-weight: map.get($params, "font-weight");
      color: map.get($params, "color");
      padding: map.get($params, "item-padding");
      background: map.get($params, "item-background-color");
      border-radius: map.get($params, "item-border-radius");
      position: relative;

      @if (map.get($params, "hover-line") == true) {
         &::after {
            content: "";
            display: block;
            position: absolute;
            border-bottom: map.get($params, "hover-line-size") solid map.get($params, "hover-line-color");
            bottom: calc(#{math.ceil(math.div(map.get($params, "hover-line-size"), 2))} * -1);
            left: 50%;
            width: 100%;
            max-width: 0;
            transition: all global.$transition-speed;
         }
      }

      &.active {
         background-color: map.get($params, "item-background-color-active");
         color: map.get($params, "item-color-active");
         text-decoration: none;
      }

      @include global.haf {
         &::after {
            max-width: 100%;
            left: 0;
         }
      }
   }

   @container (inline-size > 500px) {
      @include global.container-query-selector('ul') {
         flex-direction: row;
         align-items: center;
         justify-content: map.get($params, "justify-content");
      }
   }
}
