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

$params: (
   "max-width": 734px,
   "margin": 0,

   "form-items-per-row": 2,
   "form-gap": 10px,
   "form-label-color": global.$text-dark,

   "btn-more-margin": 13px 0,
   "btn-more-gap": 15px,
   "btn-more-indicator-size": 26px,
   "btn-more-indicator-border": 1px solid global.$border-color,
   "btn-more-indicator-icon-size": 18px,
   "btn-more-indicator-icon-color": global.$white,
   "btn-more-indicator-text-size": global.$font-size-larger,
   "btn-more-indicator-text-weight": global.$font-weight-bold,
   "btn-more-indicator-text-color": global.$text-dark,

   "title-margin": 0 0 15px 0,
   "title-font-size": inherit,
   "title-text-align": left,

   "privacy-policy-max-width": 100%,
   "privacy-policy-margin": 0 0 8px 0,
   "privacy-policy-link-color": global.$text-dark,
   "privacy-policy-color": inherit,
   "privacy-policy-text-align": inherit,

   "btn-send-margin": 0 0 18px 0,
   "btn-send-max-width": 360px,
   "btn-send-style": "btn-primary",
   "btn-send-text-align": left,
);

@if global-variable-exists(c-b2b-user-registration-form, components) {
   $keys: map.keys(components.$c-b2b-user-registration-form);
   @each $name in $keys {
      @if not map.get($params, $name) {
         @warn "Neexistující proměnná '#{$name}' v komponentě '$#{component("B2BUserRegistration:Form", "class")}'.";
      }
   }

   $params: map.merge($params, components.$c-b2b-user-registration-form);
}

.#{component("B2BUserRegistration:Form", "class")} {
   max-width: map.get($params, "max-width");
   margin: map.get($params, "margin");

   .title {
      font-size: map.get($params, "title-font-size");
      margin: map.get($params, "title-margin");
      text-align: map.get($params, "title-text-align");
   }

   form {
      container-type: inline-size;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: map.get($params, "form-gap");

      > div {
         flex-basis: 100%;
         max-width: 100%;
      }

      label {
         color: map.get($params, "form-label-color");
      }

      .form-group {
         margin-bottom: 0;
      }

      .country {
         display: flex;
         gap: map.get($params, "form-gap");

         > div {
            flex: 1;

            &:first-child {
               flex-basis: calc(33% - (#{map.get($params, "form-gap")} / 2));
               max-width: calc(33% - (#{map.get($params, "form-gap")} / 2));
            }
         }
      }

      .privacy-policy {
         max-width: map.get($params, "privacy-policy-max-width");
         margin: map.get($params, "privacy-policy-margin");
         color: map.get($params, "privacy-policy-color");
         text-align: map.get($params, "privacy-policy-text-align");

         a {
            display: inline-block;
            color: map.get($params, "privacy-policy-link-color");
         }
      }

      .submit-wrapper {
         width: 100%;
         margin: map.get($params, "btn-send-margin");
         text-align: map.get($params, "btn-send-text-align");
      }

      button {
         @include global.set-btn-style(map.get($params, "btn-send-style"));

         max-width: map.get($params, "btn-send-max-width");
         width: 100%;
         flex-basis: 100%;
      }

      .checkbox {
         display: flex;
         gap: map.get($params, "btn-more-gap");
         margin: map.get($params, "btn-more-margin");
         width: 100%;

         > a {
            position: relative;
            cursor: pointer;

            > div {
               height: map.get($params, "btn-more-indicator-size");
            }
         }

         input {
            position: relative;
            appearance: none;
            display: inline-block;
            min-width: unset;
            min-height: unset;
            border: map.get($params, "btn-more-indicator-border");
            border-radius: global.$border-radius-base;
            width: map.get($params, "btn-more-indicator-size");
            height: map.get($params, "btn-more-indicator-size");
            padding: 0;
            cursor: pointer;
         }

         .c-icon {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            font-size: map.get($params, "btn-more-indicator-icon-size");
            color: map.get($params, "btn-more-indicator-icon-color");
            display: none;
         }

         p {
            margin-bottom: 0;
            font-size: map.get($params, "btn-more-indicator-text-size");
            font-weight: map.get($params, "btn-more-indicator-text-weight");
            color: map.get($params, "btn-more-indicator-text-color");
         }

         &.active {
            input:checked {
               background-color: global.$state-success;
            }

            .c-icon {
               display: block;
            }
         }
      }

      @container (inline-size > 500px) {
         @include global.container-query-selector("> div:not(.submit-wrapper):not(.checkbox)") {
            @include global.item-size(map.get($params, "form-items-per-row"), map.get($params, "form-gap"));
         }
      }
   }
}
