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

$params: (
   "square-background-color": global.$black,

   "background-top": 0,
   "background-left": -20px,
   "background-bottom": 0,
   "background-right": 0,
   "background-width": 100%,
   "background-height": 317px,
   "background-image": unset,

   "title-color": global.$white,
   "title-font-size": global.$font-size-h2,
   "title-font-weight": global.$font-weight-bold,
   "title-text-transform": uppercase,

   "user-margin": 0 0 10px 0,
   "user-name-color": global.$brand-secondary,
   "user-name-font-size": global.$font-size-h3,
   "user-font-weight": global.$font-weight-base,
   "user-name-font-family": global.$font-family-base,
   "user-name-margin": 0,

   "user-icon-color": global.$brand-secondary,
   "user-icon-font-size": global.$font-size-larger,
   "user-icon-margin": 0 10px 0 0,

   "panel-padding": 70px 120px 76px 70px,

   "panel-icon-background-color": global.$white,
   "panel-icon-border-radius": global.$border-radius-sm,
   "panel-icon-padding": 30px 35px,
   "panel-icon-margin": 0 0 10px 0,

   "icon-font-size": 18px,
   "icon-color": global.$black,

   "panel-descr-color": global.$black,
   "panel-descr-font-size": global.$font-size-base,
   "panel-descr-font-weight": global.$font-weight-base,
   "panel-descr-padding": 0 0 5px 0,

   "strong-font-size": 20px,
   "strong-color": global.$black,

   "btn-width": calc(50% - 5px),
   "btn-margin": 0 0 10px 0,

   "panel-top-width": 50%,
   "panel-top-border": global.$border-width solid global.$border-color,
   "panel-top-padding": 0 40px 0 0,
);

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

   $params: map.merge($params, components.$c-account-b2buserinfosquare);
}

.#{component("Account:B2BUserInfoSquare", "class")} {
   background-color: map.get($params, "square-background-color");
   position: relative;
   overflow: hidden;
   container-type: inline-size;

   &::before {
      content: "";
      position: absolute;
      top: map.get($params, "background-top");
      left: map.get($params, "background-left");
      bottom: map.get($params, "background-bottom");
      right: map.get($params, "backgorund-right");
      width: map.get($params, "background-width");
      height: map.get($params, "background-height");
      background-image: map.get($params, "background-image");
      background-repeat: no-repeat;
   }

   .b2b-panel {
      position: relative;
      padding: map.get($params, "panel-padding");
      z-index: 1;
   }

   .b2b-panel-inner {
      h2 {
         color: map.get($params, "title-color");
         font-size: map.get($params, "title-font-size");
         font-weight: map.get($params, "title-font-weight");
         text-transform: map.get($params, "title-text-transform");
      }

      .b2b-user-name {
         display: flex;
         align-items: center;
         margin: map.get($params, "user-margin");

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

         .user-name {
            color: map.get($params, "user-name-color");
            font-size: map.get($params, "user-name-font-size");
            font-weight: map.get($params, "user-name-font-weight");
            margin: map.get($params, "user-name-margin");
            font-family: map.get($params, "user-name-font-family");
            text-transform: uppercase;
         }
      }
   }

   .b2b-panel-top {
      display: flex;
      background-color: map.get($params, "panel-icon-background-color");
      border-radius: map.get($params, "panel-icon-border-radius");
      padding: map.get($params, "panel-icon-padding");
      margin: map.get($params, "panel-icon-margin");

      div {
         display: flex;
         flex-direction: column;
         width: map.get($params, "panel-top-width");

         &:last-child {
            border-left: map.get($params, "panel-top-border");
            padding: 0 0 0 40px;
         }
      }

      .c-icon {
         font-size: map.get($params, "icon-font-size");
         color: map.get($params, "icon-color");
         margin-bottom: 10px;
      }

      p {
         color: map.get($params, "panel-descr-color");
         font-size: map.get($params, "panel-descr-font-size");
         font-weight: map.get($params, "panel-descr-font-weight");
         margin: map.get($params, "panel-descr-padding");
      }

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

   .b2b-panel-menu {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;

      a {
         width: map.get($params, "btn-width");
         margin: map.get($params, "btn-margin");
      }
   }

   @container (inline-size < 600px) {
      @include global.container-query-selector(".b2b-panel") {
         padding: 40px 20px;
      }
   }

   @container (inline-size < 460px) {
      @include global.container-query-selector(".b2b-panel-menu a") {
         width: 100%;
      }

      @include global.container-query-selector(".b2b-panel-top") {
         flex-direction: column;

         @include global.container-query-selector("div:last-child") {
            border-left: unset;
            padding: 20px 0 0 0;
         }
      }
   }
}
