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

$params: (
   "link-padding": 4px 12px,
   "link-margin": 0 5px 10px 0,
   "link-color": global.$black,
   "link-font-size": global.$font-size-base,
   "link-font-weight": global.$font-weight-bold,
   "link-border-radius": global.$border-radius-base,
   "link-background-color": transparent,
   "link-background-color-active": global.$body-bg-alt,

   "tab-gap": global.$gap-width,

   "cell-background-hover": global.$body-bg-alt,
   "cell-background-active": global.$body-bg,
   "cell-border": global.$border-width solid global.$border-color,
   "cell-border-hover": global.$border-width solid global.$border-color,
   "cell-border-active": global.$border-width solid global.$brand-primary,
   "cell-color": global.$text-dark,
   "cell-color-hover": global.$text-dark,
   "cell-color-active": global.$text-dark,
   "cell-font-size": global.$font-size-base,
   "cell-font-weight": global.$font-weight-bold,
   "cell-delivery-font-size": global.$font-size-smaller,
   "cell-delivery-font-weight": global.$font-weight-base,
   "cell-border-radius": global.$border-radius-base,
   "cell-padding": 10px 20px,
   "cell-data-font-size": global.$font-size-tiny,
   "cell-data-color": global.$text-muted,

   "toggle-padding": 5px,
   "toggle-margin": 12px auto,
   "toggle-font-size": global.$font-size-base,
   "toggle-font-weight": global.$font-weight-base,
   "toggle-color": global.$text-dark,
   "toggle-icon": "true",
   "toggle-icon-margin-right": 10px,
   "toggle-icon-font-size": global.$font-size-larger,
   "toggle-icon-color": global.$text-dark,
   "toggle-icon-active-transform": rotate(180deg),
);

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

   $params: map.merge($params, components.$c-convertor-convertortabs);
}

.#{component("Convertor:ConvertorTabs", "class")} {
   display: flex;
   flex-wrap: wrap;

   .convertor-link {
      @include global.underline-never;

      order: -1;
      padding: map.get($params, "link-padding");
      margin: map.get($params, "link-margin");
      color: map.get($params, "link-color");
      font-size: map.get($params, "link-font-size");
      font-weight: map.get($params, "link-font-weight");
      border-radius: map.get($params, "link-border-radius");
      background-color: map.get($params, "link-background-color");
      cursor: pointer;

      @include global.haf {
         background-color: map.get($params, "link-background-color-active");
      }
   }

   .convertor-tab {
      gap: map.get($params, "tab-gap");
      display: flex;
      flex-direction: column;
      width: 100%;

      &:not(.active) {
         display: none;
      }
   }

   input {
      opacity: 0;
      position: absolute;
      z-index: -1;

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

         .title {
            color: map.get($params, "cell-color-active");
         }
      }
   }

   label {
      display: flex;
      justify-content: space-between;
      align-items: center;
      cursor: pointer;
      border: map.get($params, "cell-border");
      border-radius: map.get($params, "cell-border-radius");
      padding: map.get($params, "cell-padding");
      line-height: global.$line-height-sm;
      position: relative;
      transition: all global.$transition-speed;
      margin: 0;

      .data {
         display: block;
         text-align: right;
         font-size: map.get($params, "cell-data-font-size");
         color: map.get($params, "cell-data-color");
      }

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

      .#{component("Product:DeliveryTime:Availability", "class")} {
         margin: 0;
         font-size: map.get($params, "cell-delivery-font-size");
         font-weight: map.get($params, "cell-delivery-font-weight");
      }

      &:hover {
         background: map.get($params, "cell-background-hover");
         border: map.get($params, "cell-border-hover");

         .title {
            color: map.get($params, "cell-color-hover");
         }
      }
   }

   .btn-wrapper {
      width: 100%;
   }

   button {
      @include global.btn-reset;
      @include global.underline-default;

      display: flex;
      align-items: center;
      padding: map.get($params, "toggle-padding");
      margin: map.get($params, "toggle-margin");
      font-size: map.get($params, "toggle-font-size");
      font-weight: map.get($params, "toggle-font-weight");
      color: map.get($params, "toggle-color");
      cursor: pointer;

      .c-icon {
         margin-right: map.get($params, "toggle-icon-margin-right");
         font-size: map.get($params, "toggle-icon-font-size");
         color: map.get($params, "toggle-icon-color");
         transition: transform global.$transition-speed;

         @if (map.get($params, "toggle-icon") == "false") {
            display: none;
         }
      }

      &.active {
         .c-icon {
            transform: map.get($params, "toggle-icon-active-transform");
         }
      }
   }
}
