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

$params: (
   "margin-bottom": global.$spacer,

   "breakpoint-xl": global.$xl,
   "breakpoint-md": global.$md,
   "breakpoint-sm": global.$sm,

   "item-overlay": true, //background
   "item-border": 0,
   "item-border-radius": global.$border-radius-base,
   "item-gap": global.$gap-width,
   "item-min-height": 75px,
   "item-padding": 10px,

   "title-color": global.$black,
   "title-letter-spacing": 0,
   "title-line-height": global.$line-height-base,
   "title-font-size": global.$font-size-larger,
   "title-padding": 0 20px,

   "border": global.$border-width solid transparent,
   "border-color-active": global.$brand-primary,

   "grid-template-columns-sm": repeat(2, 1fr),
   "grid-template-columns-md": repeat(3, 1fr),
   "grid-template-columns-xl": repeat(4, 1fr),
);

@if global-variable-exists(c-search-results-tileitems, components) {
   $keys: map.keys(components.$c-search-results-tileitems);
   @each $name in $keys {
      @if not map.get($params, $name) {
         @warn "Neexistující proměnná '#{$name}' v komponentě '$#{component("Search:Results:TileItems", "class")}'.";
      }
   }

   $params: map.merge($params, components.$c-search-results-tileitems);
}

.#{component("Search:Results:TileItems", "class")} {
   width: 100%;
   margin-bottom: map.get($params, "margin-bottom");
   container-type: inline-size;

   .inner {
      display: grid;
      grid-template-columns: 1fr;
      gap: map.get($params, "item-gap");
   }

   .item {
      @if (map.get($params, "item-overlay") == true) {
         @include global.image-overlay(0);
      }

      min-height: map.get($params, "item-min-height");
      border: map.get($params, "item-border");
      border-radius: map.get($params, "item-border-radius");
      border: map.get($params, "border");
      transition: border-color global.$transition-speed;

      @include global.haf {
         border-color: map.get($params, "border-color-active");
      }
   }

   .item-inner {
      position: relative;
      align-items: center;
      display: flex;
      height: 100%;
      text-decoration: none;
      padding: map.get($params, "item-padding");
   }

   .item-image {
      @if (map.get($params, "item-overlay") == true) {
         @include global.image-overlay(0);
      }

      border-radius: map.get($params, "item-border-radius");
   }

   .item-title {
      padding: map.get($params, "title-padding");
      color: map.get($params, "title-color");
      letter-spacing: map.get($params, "title-letter-spacing");
      line-height: map.get($params, "title-line-height");
      font-size: map.get($params, "title-font-size");
   }

   @container (inline-size > #{map.get($params, "breakpoint-sm")}) {
      @include global.container-query-selector('.inner') {
         grid-template-columns: map.get($params, "grid-template-columns-sm");
      }
   }

   @container (inline-size > #{map.get($params, "breakpoint-md")}) {
      @include global.container-query-selector('.inner') {
         grid-template-columns: map.get($params, "grid-template-columns-md");
      }
   }

   @container (inline-size > #{map.get($params, "breakpoint-xl")}) {
      @include global.container-query-selector('.inner') {
         grid-template-columns: map.get($params, "grid-template-columns-xl");
      }
   }
}
