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

$params: (
   "label-margin": 0 0 0 10px,
   "label-padding": 15px,
   "label-border": global.$border-width solid global.$border-color,
   "label-border-radius": global.$border-radius-base,

   "icon-font-size": 18px,

   "color-active": global.$brand-ctr,
   "border-color-active": global.$brand-ctr,
);

@if global-variable-exists(c-section-listshow-selector, components) {
   $keys: map.keys(components.$c-section-listshow-selector);
   @each $name in $keys {
      @if not map.get($params, $name) {
         @warn "Neexistující proměnná '#{$name}' v komponentě '$#{component("Section:ListShow:Selector", "class")}'.";
      }
   }

   $params: map.merge($params, components.$c-section-listshow-selector);
}

.#{component("Section:ListShow:Selector", "class")} {
   input {
      opacity: 0;
      pointer-events: none;
      position: absolute;

      &:checked + label {
         color: map.get($params, "color-active");
         border-color: map.get($params, "border-color-active");
      }
   }

   label {
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      margin: map.get($params, "label-margin");
      padding: map.get($params, "label-padding");
      border: map.get($params, "label-border");
      border-radius: map.get($params, "label-border-radius");
      transition: color global.$transition-speed, border-color global.$transition-speed;

      .c-icon {
         font-size: map.get($params, "icon-font-size");
      }

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

