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

$params: (
   "border": global.$border-width solid global.$border-color,
   "border-radius": global.$border-radius-lg,
   "margin-bottom": global.$spacer,

   "comment-padding": 30px 40px,

   "info-margin-bottom": global.$spacer,

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

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

   "btns-margin": unset,
   "btns-padding": 20px 40px,
   "btns-border-top": global.$border-width solid global.$border-color,
   "btn-padding-right" : 30px,
   "btn-color": global.$text-dark,

   "img-max-height": 54px,
   "img-border-radius": global.$border-radius-lg,
   "img-margin-right": 25px,

   "answer-background-color": global.$body-bg-alt,
   "answer-border": none,
   "answer-padding": 20px,
   "answer-border-left": "false",
   "answers-padding": 0 40px 30px,
);

@if global-variable-exists(c-comments-listing-comment, components) {
   $keys: map.keys(components.$c-comments-listing-comment);
   @each $name in $keys {
      @if not map.get($params, $name) {
         @warn "Neexistující proměnná '#{$name}' v komponentě '$#{component("Comments:Listing:Comment", "class")}'.";
      }
   }

   $params: map.merge($params, components.$c-comments-listing-comment);
}

.#{component("Comments:Listing:Comment", "class")} {
   border: map.get($params, "border");
   border-radius: map.get($params, "border-radius");
   margin-bottom: map.get($params, "margin-bottom");

   .comment-data {
      display: flex;
      flex-direction: column;
      padding: map.get($params,"comment-padding");

      p {
         margin-bottom: 0;
      }
   }

   .comment-info {
      display: flex;
      margin-bottom: map.get($params, "info-margin-bottom");

      > div {
         flex: 1;
      }

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

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

   .btns-wrapper {
      display: flex;
      padding: map.get($params,"btns-padding");
      border-top: map.get($params, "btns-border-top");
      margin: map.get($params, "btns-margin");

      a {
         padding-right: map.get($params, "btn-padding-right");
         color: map.get($params, "btn-color");
      }
   }

   .comment-answers {
      display: none;
      padding: map.get($params, "answers-padding");

      &.active {
         display: block;
      }

      .#{component("Comments:Listing:Comment", "class")} {
         background-color: map.get($params, "answer-background-color");
         border: map.get($params, "answer-border");

         @if not (map.get($params, "answer-border-left") == "false") {
            border-left: map.get($params, "answer-border-left");
         }
      }

      div:last-child {
         .#{component("Comments:Listing:Comment", "class")} {
            margin-bottom: 0;
         }
      }

      .comment-data {
         padding: map.get($params, "answer-padding");
      }

      img {
         display: none;
         border-radius: map.get($params, "img-border-radius");
         max-height: map.get($params, "img-max-height");
      }
   }

   @container (inline-size > 350px) {
      @include global.container-query-selector("img") {
         display: block;
         margin-right: map.get($params, "img-margin-right");
      }
   }
}
