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

$params: (
   "breakpoint": global.$lg,

   "link-margin": 0 -10px -1px -10px,
   "active-link-margin": 0 -10px global.$spacer -10px,
   "link-padding": 25px 10px,
   "link-border": 1px solid global.$border-color,
   "link-border-bottom-color-active": global.$border-color,
   "link-border-bottom-color-hover": global.$border-color,
   "link-after-margin": 0 12.5px 0 auto,

   "icon-color": inherit,
);

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

   $params: map.merge($params, components.$c-product-tabs);
}

.#{component("Product:Tabs", "class")} {
   display: flex;
   flex-direction: column;
   margin-bottom: global.$spacer-lg;

   .#{component("Product:Tabs:Tab:Link", "class")} {
      order: unset;
      justify-content: space-between;
      margin: map.get($params, "link-margin");
      padding: map.get($params, "link-padding");
      border-top: map.get($params, "link-border");
      border-bottom: map.get($params, "link-border");
      border-radius: 0;

      svg {
         transition: transform global.$transition-speed;
         order: 2;
         color: map.get($params, "icon-color");
      }

      &.active {
         background: transparent;
         border-bottom-color: map.get($params, "link-border-bottom-color-active");
         margin: map.get($params, "active-link-margin");

         svg {
            transform: rotate(180deg);
         }
      }

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

      &::after {
         margin: map.get($params, "link-after-margin");
      }
   }

   @media screen and (min-width: (map.get($params, "breakpoint"))) {
      &.d-hidden-links {
         .#{component("Product:Tabs:Tab:Link", "class")} {
            display: none;
         }
      }
   }
}
