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

$params: (
   "icon-size": 22px,
   "icon-color": global.$text-dark,
   "icon-color-hover": global.$brand-primary,
   "icon-padding": 5px 10px,

   "counter-position-top": -4px,
   "counter-position-right": -6px,
   "counter-size": 13px,
   "counter-font-size": 11px,
   "counter-color": global.$white,
   "counter-background": global.$blue,
   "counter-font-weight": global.$font-weight-base,

   "b2b-counter-position-left": 9px,
   "b2b-counter-position-right": unset,
   "b2b-counter-font-weight": global.$font-weight-base,

   "b2b-indicator-color": global.$white,
   "b2b-indicator-background": global.$blue,
   "b2b-indicator-font-size": 11px,
   "b2b-indicator-padding": 1px 4px,

   "text-margin-left": global.$gap-width,
   "text-line-height": global.$line-height-sm,

   "show-text": "true",
   "hide-text-md": "true",
);

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

   $params: map.merge($params, components.$c-header-icon);
}

.#{component("Header:Icon", "class")} {
   a {
      display: flex;
      align-items: center;
      justify-content: center;
      text-decoration: none;
      padding: map.get($params, "icon-padding");
      color: map.get($params, "icon-color");
      cursor: pointer;

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

   .icon {
      position: relative;
      line-height: 1;
      color: map.get($params, "icon-color");
      font-size: map.get($params, "icon-size");
      transition: color global.$transition-speed;

      .c-icon {
         display: block;
      }

      span {
         position: absolute;
         z-index: 10;
         top: map.get($params, "counter-position-top");
         right: map.get($params, "counter-position-right");
         display: flex;
         align-items: center;
         justify-content: center;
         min-width: map.get($params, "counter-size");
         height: map.get($params, "counter-size");
         border-radius: map.get($params, "counter-size");
         overflow: hidden;
         background: map.get($params, "counter-background");
         color: map.get($params, "counter-color");
         font-size: map.get($params, "counter-font-size");
         font-weight: map.get($params, "counter-font-weight");

         &.logged-b2b {
            left: map.get($params, "b2b-counter-position-left");
            right: map.get($params, "b2b-counter-position-right");
            font-weight: map.get($params, "b2b-counter-font-weight");
         }
      }

      .icon-indicator {
         font-size: map.get($params, "counter-size");
         background: map.get($params, "counter-color");
         color: map.get($params, "counter-background");
      }

      .icon-indicator-b2B {
         color: map.get($params, "b2b-indicator-color");
         background-color: map.get($params, "b2b-indicator-background");
         font-size: map.get($params, "b2b-indicator-font-size");
         padding: map.get($params, "b2b-indicator-padding");
         margin: 0;
      }
   }

   .text {
      display: flex;
      flex-direction: column;
      line-height: map.get($params, "text-line-height");

      @if (map.get($params, "show-text") == "false") {
         display: none;
      }
      
      &:not(:empty) {
         margin-left: map.get($params, "text-margin-left");
      }

      @if (map.get($params, "hide-text-md") == "true") {
         @media screen and (max-width: global.$md - 1) {
            display: none;
         }
      }
   }
}
