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

$params: (
   "code-color" : global.$text-dark,
   "code-font-size": global.$font-size-base,
   "code-font-weight": global.$font-weight-base,

   "date-color" : global.$text-muted,
   "date-font-size": global.$font-size-base,
   "date-font-weight": global.$font-weight-base,

   "status-color" : global.$text-dark,
   "status-color-success" : global.$state-success,
   "status-color-error" : global.$state-error,
   "status-font-size": global.$font-size-base,
   "status-font-weight": global.$font-weight-base,

   "price-color" : global.$text-dark,
   "price-font-size" : global.$font-size-base,
   "price-font-weight" : global.$font-weight-base,

   "action-text-color": global.$text-dark,

   "responsive-image-breakpoint": calc(870px),
);

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

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

.#{component("Account:OrdersList:Order", "class")} {
   .code a {
      color: map.get($params, "code-color");
      font-size: map.get($params, "code-font-size");
      font-weight: map.get($params, "code-font-weight");
   }

   .responsive-order-info {
      td {
         border: 0;
         padding: 0;
      }

      & + .code {
         display: none;

         & + .date {
            display: none;
         }
      }
   }

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

   .status {
      text-align: center;
      color: map.get($params, "status-color");

      &-0 {
         color: map.get($params, "status-color-success");
      }

      &--1 {
         color: map.get($params, "status-color-error");
      }
   }

   .price {
      color: map.get($params, "price-color");
      font-size: map.get($params, "price-font-size");
      font-weight: map.get($params, "price-font-weight");
      text-align: right;
   }

   .action {
      display: none;
      text-align: right;
      color: map.get($params, "action-text-color");
   }

   .#{component("Account:OrdersList:Order:Items", "class")} {
      display: none;
   }

   @container (inline-size > #{map.get($params, "responsive-image-breakpoint")}) {
      @include global.container-query-selector(".action") {
         margin-left: auto;
      }

      .#{component("Account:OrdersList:Order:Items", "class")} {
         display: flex;
      }
   }

   @container (inline-size > #{global.$md}) {
      @include global.container-query-selector(".responsive-order-info") {
         display: none;

         & + .code {
            display: table-cell;

            & + .date {
               display: table-cell;
            }
         }
      }

      .status, .price {
         text-align: left;
      }

      @include global.container-query-selector(".action") {
         display: table-cell;
      }
   }
}
