import { s as styleInject } from './index-bbdfb97a.js';
import 'react';
import { useTranslation } from '@crystaldesign/diva-core';
import { observer } from 'mobx-react-lite';
import { jsx, Fragment, jsxs } from 'react/jsx-runtime';

var shelfPlannerContainerHorizontal = "shelfPlannerContainerHorizontal-zUcmv";
var shelfPlannerContainerVertical = "shelfPlannerContainerVertical-3jwdx";
var accessoires = "accessoires-ExU9-";
var expanded = "expanded-qqANx";
var shelfGrid = "shelfGrid-VM2OD";
var shelfGridBorder = "shelfGridBorder-DyInR";
var shelfPlannerContainerRtv = "shelfPlannerContainerRtv-OFMK-";
var accessoireContainer = "accessoireContainer-Ht6lL";
var selectedElement = "selectedElement-e8fZe";
var info = "info-Kfwx2";
var warning = "warning-1klI4";
var configHeaderWrapper = "config-header-wrapper-ycLDr";
var name = "name-4YnN5";
var closeButton = "closeButton-kL18z";
var css_248z = ".shelfPlannerContainerHorizontal-zUcmv {\n  display: flex;\n  width: 100%;\n}\n\n.shelfPlannerContainerVertical-3jwdx {\n  display: flex;\n  width: 100%;\n  flex-direction: column;\n}\n\n.shelfPlannerContainerHorizontal-zUcmv .accessoires-ExU9- {\n  width: 60%;\n}\n\n.shelfPlannerContainerVertical-3jwdx .accessoires-ExU9- {\n  width: 100%;\n  height: 60%;\n}\n\n.expanded-qqANx.shelfPlannerContainerHorizontal-zUcmv .shelfGrid-VM2OD {\n  width: 34%;\n}\n\n.shelfPlannerContainerHorizontal-zUcmv .shelfGrid-VM2OD {\n  width: 40%;\n  padding-right: 10px;\n}\n\n.shelfPlannerContainerVertical-3jwdx .shelfGrid-VM2OD {\n  width: 100%;\n  height: 40%;\n  padding: 0 0;\n  margin: 10px 0;\n}\n\n.shelfPlannerContainerHorizontal-zUcmv .shelfGridBorder-DyInR {\n  border-top: solid #c7c7c7 1px;\n  /* border-bottom: solid #c7c7c7 1px; */\n  border-left: solid #c7c7c7 1px;\n  border-right: solid #c7c7c7 1px;\n  border-radius: 3px;\n}\n.shelfPlannerContainerVertical-3jwdx .shelfGridBorder-DyInR {\n  border-left: solid #c7c7c7 1px;\n  border-right: solid #c7c7c7 1px;\n  border-radius: 3px;\n  display: contents;\n}\n.expanded-qqANx.shelfPlannerContainerHorizontal-zUcmv .accessoires-ExU9- {\n  width: 66%;\n}\n\n.shelfPlannerContainerVertacal-rU1lK.shelfPlannerContainerRtv-OFMK- .accessoires-ExU9-,\n.shelfPlannerContainerHorizontal-zUcmv.shelfPlannerContainerRtv-OFMK- .accessoires-ExU9- {\n  width: 100%;\n}\n\n.row-JYcIF:first-child {\n  padding-right: 10px;\n}\n\n.shelfPlannerContainerHorizontal-zUcmv .accessoireContainer-Ht6lL {\n  height: 100%;\n  overflow: auto;\n}\n\n.selectedElement-e8fZe {\n  width: 100%;\n  height: 75px;\n  margin-bottom: 5px;\n}\n\n.info-Kfwx2 {\n  height: 75px;\n  overflow: auto;\n}\n\n.selectedElement-e8fZe img {\n  width: 100px;\n  float: left;\n  height: 75px;\n  -o-object-fit: contain;\n     object-fit: contain;\n}\n\n.warning-1klI4 {\n  color: red;\n  padding-bottom: 1rem;\n}\n.config-header-wrapper-ycLDr {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  cursor: pointer;\n}\n\n.name-4YnN5 {\n  font-size: 18px;\n  transition: font-size 0.3s ease;\n}\n\n.closeButton-kL18z {\n  width: 50px;\n  height: 50px;\n  background: center / 35% no-repeat url(\"data:image/svg+xml,%3Csvg width%3D%2212%22 height%3D%2222%22 viewBox%3D%220 0 12 22%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M11 1L1 11L11 21%22 stroke%3D%22%234F4F4F%22 stroke-width%3D%222%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E\");\n  transition: background-size 0.3s ease, background-image 0.3s ease;\n}\n\n.config-header-wrapper-ycLDr:hover .closeButton-kL18z {\n  background: center / 40% no-repeat url(\"data:image/svg+xml,%3Csvg width%3D%2212%22 height%3D%2222%22 viewBox%3D%220 0 12 22%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M11 1L1 11L11 21%22 stroke%3D%22%233f3f3f%22 stroke-width%3D%222%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E\");\n}\n\n.config-header-wrapper-ycLDr:hover .name-4YnN5 {\n  font-size: 20px;\n}\n";
styleInject(css_248z);

var index = function index(_ref) {
  var selAccItem = _ref.selAccItem;
  var _useTranslation = useTranslation(),
    t = _useTranslation.t;
  return /*#__PURE__*/jsx(Fragment, {
    children: selAccItem ? /*#__PURE__*/jsxs("div", {
      className: selectedElement,
      children: [/*#__PURE__*/jsx("img", {
        src: selAccItem.image
      }), /*#__PURE__*/jsxs("div", {
        className: info,
        children: [t('configurator.REGALPLANER_CHOOSE_SPACE_1') + ' ', /*#__PURE__*/jsx("b", {
          dangerouslySetInnerHTML: {
            __html: selAccItem.name
          }
        }), ' ' + t('configurator.REGALPLANER_CHOOSE_SPACE_2') + ' ', /*#__PURE__*/jsx("b", {
          children: selAccItem.cellSize
        }), t('configurator.REGALPLANER_CHOOSE_SPACE_3')]
      })]
    }) : /*#__PURE__*/jsxs("div", {
      className: selectedElement,
      children: [/*#__PURE__*/jsx("img", {
        src: "data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
      }), /*#__PURE__*/jsx("div", {
        className: info,
        children: t('configurator.REGALPLANER_CHOOSE_FIRST_ARTICLE')
      })]
    })
  });
};
var SelectedAcc = observer(index);

var index$1 = /*#__PURE__*/Object.freeze({
  __proto__: null,
  'default': SelectedAcc
});

export { SelectedAcc as S, shelfPlannerContainerHorizontal as a, shelfPlannerContainerVertical as b, shelfGrid as c, shelfGridBorder as d, expanded as e, accessoires as f, configHeaderWrapper as g, closeButton as h, accessoireContainer as i, index$1 as j, name as n, shelfPlannerContainerRtv as s, warning as w };
