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

$params: (
   "margin": global.$spacer 0,
   "background": global.$body-bg-alt,
   "border-radius": global.$border-radius-lg,
   "padding": 30px 20px,
   "img-border-radius": 50%,

   "title-font-size": global.$font-size-base,
   "title-color": global.$text-muted,
   "title-margin": global.$spacer 0 0 0,

   "note-font-size": global.$font-size-smaller,
   "note-color": global.$text-dark,
   "note-margin": 0,

   "name-font-size": global.$font-size-larger,
   "name-color": global.$text-dark,
   "name-margin": 0,
);

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

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

.#{component("Articles:AuthorSmall", "class")} {
   background: map.get($params, "background");
   border-radius: map.get($params, "border-radius");
   padding: map.get($params, "padding");
   margin: map.get($params, "margin");
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   text-align: center;

   p {
      margin: 0;
   }

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

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

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

   .#{component("Picture", "class")} {

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