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

@use "@twig/scss/base/_tiny-slider";

$params: (
   "controls-buttons-size": 50px,
   "controls-buttons-width-md": 50px,
   "controls-buttons-height-md": 50px,
   "controls-buttons-border-radius": 50px,
   "controls-buttons-font-size": 20px,
   "controls-buttons-background-color": global.$white,
   "controls-buttons-color": global.$text-dark,
   "controls-buttons-border": global.$border-width solid global.$border-color,
   "controls-buttons-border-color": unset,
   "controls-buttons-offset": global.$gap-width,

   "nav-justify-content": center,
   "nav-gap": global.$gap-width,
   "nav-offset-bottom": -12px,
   "nav-item-width": 60px,
   "nav-item-height": 3px,
   "nav-item-border-radius": 0,
   "nav-item-background": global.$border-color,
   "nav-item-background-active": global.$brand-secondary,

   "margin": 10px 0,
   "padding-inline": 70px,

   "review-background-color": global.$body-bg-alt,
   "review-padding": 0 30px,
   "review-border-radius": global.$border-radius-base,

   "summary-font-size": global.$font-size-smaller,
   "summary-color": global.$text-dark,
   "summary-margin-bottom": 10px,

   "stars-margin": 0 0 6px 0,
   "stars-font-size": global.$font-size-smaller,
   "stars-color": global.$border-color,
   "stars-color-active": global.$yellow,

   "name-font-size": global.$font-size-base,
   "name-font-weight": global.$font-weight-bold,
   "name-color": global.$text-dark,

   "date-font-size": global.$font-size-smaller,
   "date-font-weight": global.$font-weight-base,
   "date-color": global.$text-muted,
);

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

   $params: map.merge($params, components.$c-heurekareviews-slider);
}

.#{component("HeurekaReviews:Slider", "class")} {
   position: relative;
   padding-inline: map.get($params, "padding-inline");
   margin: map.get($params, "margin");

   .slider-tns {
      > div:not(.tns-item) + div:not(.tns-item) {
         display: none;
      }
   }

   .tns-controls {
      button {
         width: map.get($params, "controls-buttons-size");
         height: map.get($params, "controls-buttons-size");
         padding: 0;
         border-radius: map.get($params, "controls-buttons-border-radius");
         font-size: map.get($params, "controls-buttons-font-size");
         background-color: map.get($params, "controls-buttons-background-color");
         border: map.get($params, "controls-buttons-border");
         color: map.get($params, "controls-buttons-color");

         &:first-child {
            left: map.get($params, "controls-buttons-offset");
         }

         &:last-child {
            right: map.get($params, "controls-buttons-offset");
         }
      }
   }

   .tns-nav {
      bottom: map.get($params, "nav-offset-bottom");
      align-items: center;
      justify-content: map.get($params, "nav-justify-content");
      gap: map.get($params, "nav-gap");

      button {
         width: map.get($params, "nav-item-width");
         height: map.get($params, "nav-item-height");
         border-radius: map.get($params, "nav-item-border-radius");
         background-color: map.get($params, "nav-item-background");
         transition: background-color global.$transition-speed;
      }

      button:hover,
      .tns-nav-active {
         background-color: map.get($params, "nav-item-background-active");
      }
   }

   .review-content {
      background-color: map.get($params, "review-background-color");
      padding: map.get($params, "review-padding");
      border-radius: map.get($params, "review-border-radius");
      width: 100%;

      .review-summary {
         font-size: map.get($params, "summary-font-size");
         color: map.get($params, "summary-color");
         margin-bottom: map.get($params, "summary-margin-bottom");
      }

      .review-stars {
         display: flex;
         margin: map.get($params, "stars-margin");

         .c-icon {
            font-size: map.get($params, "stars-font-size");
            margin-right: 2px;
            color: map.get($params, "stars-color");

            &.active {
               color: map.get($params, "stars-color-active");
            }
         }
      }

      .review-name-wrapper {
         display: flex;
         align-items: center;
      }

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

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

   @media screen and (max-width: global.$md - 1) {
      .tns-controls {
         button {
            width: map.get($params, "controls-buttons-width-md");
            height: map.get($params, "controls-buttons-height-md");
         }
      }
   }
}
