@configura/web-ui 1.3.0-alpha.2 → 1.3.0-alpha.7

package/dist/components/productConfiguration/CfgDropdownOptionView.js

@@ -3,6 +3,7 @@ import { useUuid } from "../../useUniqueId.js";
 import { Checkmark } from "../icons/Checkmark.js";
 import { forwardProps, } from "./CfgFeatureView.js";
 import { CfgOptionFeaturesView } from "./CfgOptionFeaturesView.js";
+import { CfgOptionNumericView } from "./CfgOptionNumericView.js";
 import { CfgOptionPriceView } from "./CfgOptionPriceView.js";
 export const CfgDropdownOptionView = (props) => {
     const { option, upchargeDisplayMode } = props;
@@ -28,6 +29,7 @@ export const CfgDropdownOptionView = (props) => {
                 React.createElement("div", { className: "cfgFeatureItemOption__title" },
                     description || code,
                     React.createElement(CfgOptionPriceView, { option: option, upchargeDisplayMode: upchargeDisplayMode })))),
+        selected && React.createElement(CfgOptionNumericView, { option: option }),
         React.createElement(CfgOptionFeaturesView, Object.assign({ option: option }, forwardProps(props)))));
 };
 export const CfgDropdownOptionViewMemo = React.memo(CfgDropdownOptionView);

package/dist/components/productConfiguration/CfgOptionNumericView.d.ts

@@ -0,0 +1,28 @@
+import { CfgOption, NumericValueDiscrete, NumericValueRangeDefinition } from "@configura/web-api";
+import { LengthUnit } from "@configura/web-utilities";
+import React from "react";
+import { CssProps } from "../../utilities.js";
+export declare const CfgOptionNumericView: React.FC<{
+    option: CfgOption;
+} & CssProps>;
+/**
+ * Displays GUI for selecting in one "range". Please note that the range
+ * parameter can also be a discrete value.
+ */
+export declare const NumericValueView: React.FC<{
+    currentValue: number;
+    unit: LengthUnit;
+    range: NumericValueRangeDefinition | NumericValueDiscrete;
+    updateValue: (val: number, commit: boolean) => void;
+    hasNoSiblings: boolean;
+}>;
+export declare const RangeView: React.FC<{
+    currentValue: number;
+    unit: LengthUnit;
+    range: NumericValueRangeDefinition;
+    inputValue: number;
+    onChange: (val: number, instantUpdate: boolean) => void;
+    onCommit: () => void;
+    showRangeError: boolean;
+} & CssProps>;
+//# sourceMappingURL=CfgOptionNumericView.d.ts.map

package/dist/components/productConfiguration/CfgOptionNumericView.js

@@ -0,0 +1,117 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { NumericValueDiscrete, NumericValueRangeDefinition } from "@configura/web-api";
+import React, { useEffect, useState } from "react";
+import { useRerender } from "../../useRerender.js";
+import { useUuid } from "../../useUniqueId.js";
+import { Checkmark } from "../icons/Checkmark.js";
+export const CfgOptionNumericView = (props) => {
+    const { option } = props;
+    const { isUseNumericValue } = option;
+    // Contrary to most other components this one has its own connection to the
+    // option that is backing it. This is for it to be able to "live" update
+    // as we drag sliders. The value is not "commited" at immediate drag, and so
+    // the full machinery of validations and such is not run until later.
+    const rerender = useRerender();
+    useEffect(() => {
+        option.listenForChange(rerender);
+        return () => {
+            option.stopListenForChange(rerender);
+        };
+    }, [option, rerender]);
+    if (!isUseNumericValue) {
+        return null;
+    }
+    const { allowedNumericValues, numericValue, unit } = option;
+    if (allowedNumericValues === undefined) {
+        throw new Error("AllowedNumericValues undefined for numeric option");
+    }
+    if (numericValue === undefined) {
+        throw new Error("Numeric value not set for numeric option");
+    }
+    const { ranges } = allowedNumericValues;
+    const isSingleRange = ranges.length === 1;
+    if (isSingleRange && ranges[0] instanceof NumericValueDiscrete) {
+        return null;
+    }
+    return (React.createElement("ul", { className: `cfgOptionTree cfgOptionTree--subLevel cfgOptionTree--indent ${props.className || ""}`, style: props.style }, ranges.map((range) => (React.createElement(NumericValueView, { currentValue: numericValue, unit: unit, range: range, key: range.first, hasNoSiblings: isSingleRange, updateValue: (value, commit) => __awaiter(void 0, void 0, void 0, function* () { return yield option.setNumericValue(value, commit); }) })))));
+};
+/**
+ * Displays GUI for selecting in one "range". Please note that the range
+ * parameter can also be a discrete value.
+ */
+export const NumericValueView = (props) => {
+    const { range, currentValue, updateValue, hasNoSiblings } = props;
+    const { legend, first } = range;
+    const selected = range.includesValue(currentValue);
+    const optionClasses = selected ? "cfgFeatureItemOption--checked" : "";
+    const uniqueId = useUuid();
+    const [inputValue, setInputValue] = useState(first);
+    const [inputCommited, setInputCommited] = useState(true);
+    const [showRangeError, setShowRangeError] = useState(false);
+    if (inputCommited && inputValue !== currentValue && range.includesValue(currentValue)) {
+        setInputValue(currentValue);
+    }
+    function isAcceptableValue(value) {
+        return !isNaN(value) && range.includesValue(value);
+    }
+    return (React.createElement("li", { className: `cfgFeatureItem cfgMb1 ${hasNoSiblings ? "" : "cfgMt1"}` },
+        !hasNoSiblings && (React.createElement("label", { className: `cfgFeatureItemOption ${optionClasses}`, htmlFor: uniqueId },
+            React.createElement("input", { checked: selected, className: "cfgFeatureItem__hiddenInput", id: uniqueId, name: uniqueId, onChange: (event) => {
+                    if (event.target.checked) {
+                        updateValue(inputValue, true);
+                    }
+                }, type: "radio", value: first }),
+            React.createElement("div", { className: "cfgFeatureItem__radio" }, selected && React.createElement(Checkmark, null)),
+            React.createElement("div", { className: "cfgFeatureItemOption__titleWrapper" },
+                React.createElement("div", { className: "cfgFeatureItemOption__title" }, legend)))),
+        selected && range instanceof NumericValueRangeDefinition && (React.createElement(RangeView, Object.assign({}, props, { className: hasNoSiblings ? undefined : "cfgOptionTree--indent", range: range, onChange: (val, instantUpdate) => {
+                setInputValue(val);
+                if (!isAcceptableValue(inputValue)) {
+                    return;
+                }
+                if (instantUpdate) {
+                    updateValue(val, false);
+                }
+                setShowRangeError(false);
+                setInputCommited(false);
+            }, onCommit: () => {
+                if (inputCommited) {
+                    return;
+                }
+                if (!isAcceptableValue(inputValue)) {
+                    setShowRangeError(true);
+                    return;
+                }
+                updateValue(inputValue, true);
+                setShowRangeError(false);
+                setInputCommited(true);
+            }, inputValue: inputValue, showRangeError: showRangeError })))));
+};
+export const RangeView = (props) => {
+    const { currentValue, unit, inputValue, range, onChange, onCommit, showRangeError } = props;
+    const { minValue, maxValue, increment, legend } = range;
+    const getOnChange = (instant) => (event) => onChange(event.currentTarget.valueAsNumber, instant);
+    const inputProps = {
+        min: minValue,
+        max: maxValue,
+        step: increment || Math.pow(10, Math.round(Math.log10(maxValue - minValue)) - 3),
+        onBlur: onCommit,
+        onMouseUp: onCommit,
+    };
+    return (React.createElement("div", { className: `cfgRangeView cfgMt1 ${props.className || ""}`, style: props.style },
+        React.createElement("div", { className: "cfgRangeView__inputs" },
+            React.createElement("input", Object.assign({}, inputProps, { type: "number", value: isNaN(inputValue) ? "" : inputValue, onChange: getOnChange(false), className: "cfgRangeView__number-input" })),
+            React.createElement("span", { className: "cfgRangeView__unit-label" }, unit),
+            React.createElement("input", Object.assign({}, inputProps, { type: "range", className: "cfgSlider cfgRangeView__slider-input", value: currentValue, onChange: getOnChange(true) }))),
+        showRangeError && (React.createElement("div", { className: "cfgRangeView__error" },
+            "Value not allowed, allowed values are ",
+            legend))));
+};

package/dist/components/productConfiguration/CfgProductConfigurationView.js

@@ -14,7 +14,15 @@ export const CfgProductConfigurationView = React.memo((props) => {
     const configuration = productOrConfiguration instanceof CfgProduct
         ? productOrConfiguration.configuration
         : productOrConfiguration;
-    const { features } = configuration;
+    const features = configuration.features.reduce((agg, feature) => {
+        // It is possible in Cat Creator to double add a Feature. This fills no known
+        // purpose and React can not handle this, so we filter out the duplicates.
+        const code = feature.code;
+        if (agg.every((f) => f.code !== code)) {
+            agg.push(feature);
+        }
+        return agg;
+    }, []);
     const additionalProducts = productOrConfiguration instanceof CfgProduct
         ? productOrConfiguration.additionalProducts
         : undefined;

package/dist/css/web-ui.css

@@ -1 +1 @@
-.cfgMl1{margin-left:1em}.cfgMb1{margin-bottom:1em}.cfgTextOverflow{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cfgButton{box-sizing:border-box;display:inline-block;background-color:transparent;color:#333;border-radius:.3em;border:.1em solid #bababa;font-size:1.3em;font-weight:500;outline:none;padding:.4em .8em}.cfgButton:after,.cfgButton:before{box-sizing:inherit}.cfgButton *{box-sizing:border-box}.cfgButton :after,.cfgButton :before{box-sizing:inherit}.cfgButton:focus{box-shadow:0 0 0 .075em #fff,0 0 0 .2em #333}.cfgButtonRow{box-sizing:border-box}.cfgButtonRow:after,.cfgButtonRow:before{box-sizing:inherit}.cfgButtonRow *{box-sizing:border-box}.cfgButtonRow :after,.cfgButtonRow :before{box-sizing:inherit}.cfgButtonRow__button:nth-child(n+2){margin-left:1em}.cfgConfigurator{box-sizing:border-box;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;font-size:10px;color:#333;min-width:0}.cfgConfigurator:after,.cfgConfigurator:before{box-sizing:inherit}.cfgConfigurator *{box-sizing:border-box}.cfgConfigurator :after,.cfgConfigurator :before{box-sizing:inherit}.cfgConfiguratorHeader{border-bottom:.1em solid #c8c7cc;padding:1.7em 1.7em 1.9em;position:relative}.cfgConfiguratorHeader__actions{margin-top:1em}.cfgConfiguratorTree{padding-top:1em}.cfgCanvasWrapper{box-sizing:border-box;position:relative;height:50rem;-webkit-user-select:none;user-select:none}.cfgCanvasWrapper:after,.cfgCanvasWrapper:before{box-sizing:inherit}.cfgCanvasWrapper *{box-sizing:border-box}.cfgCanvasWrapper :after,.cfgCanvasWrapper :before{box-sizing:inherit}.cfgCanvasWrapper canvas{outline:none}.cfgConfiguratorWrapper{box-sizing:border-box;color:#333;height:100%;width:100%}.cfgConfiguratorWrapper:after,.cfgConfiguratorWrapper:before{box-sizing:inherit}.cfgConfiguratorWrapper *{box-sizing:border-box}.cfgConfiguratorWrapper :after,.cfgConfiguratorWrapper :before{box-sizing:inherit}@media screen and (orientation:landscape){.cfgConfiguratorWrapper{display:flex;flex-direction:row}.cfgConfiguratorWrapper>.cfgConfigurator{flex:0 1 40%;height:100%}.cfgConfiguratorWrapper .cfgCanvasWrapper{flex:0 1 60%;height:85vh;overflow:hidden;position:sticky;top:0}}.cfgExpandableHeadingRow{box-sizing:border-box;-webkit-appearance:none;appearance:none;font-family:inherit;font-size:inherit;color:inherit;background:none;border:none;padding:0;align-items:stretch;display:flex;height:3.9em;outline:0;position:relative;width:100%}.cfgExpandableHeadingRow:after,.cfgExpandableHeadingRow:before{box-sizing:inherit}.cfgExpandableHeadingRow *{box-sizing:border-box}.cfgExpandableHeadingRow :after,.cfgExpandableHeadingRow :before{box-sizing:inherit}.cfgExpandableHeadingRow--expandable{cursor:pointer}.cfgExpandableHeadingRow__title{align-items:center;display:flex;flex:1 1 auto;font-size:1.5em;font-weight:500;justify-content:flex-start}.cfgExpandableHeadingRow__icon{align-items:center;display:flex;flex:0 0 5em;justify-content:center;padding:0 1.5em}.cfgHr{box-sizing:border-box;border:0;border-bottom:.1em solid #c8c7cc;padding:0;margin:0}.cfgHr:after,.cfgHr:before{box-sizing:inherit}.cfgHr *{box-sizing:border-box}.cfgHr :after,.cfgHr :before{box-sizing:inherit}.cfgThumbnailImage{border-radius:.7em;display:inline-block;height:3em;width:3em}.cfgThumbnailPlaceholder{align-items:center;display:flex;flex:0 0 4.2em;justify-content:flex-start}.cfgFeatureItem{box-sizing:border-box;color:#333}.cfgFeatureItem:after,.cfgFeatureItem:before{box-sizing:inherit}.cfgFeatureItem *{box-sizing:border-box}.cfgFeatureItem :after,.cfgFeatureItem :before{box-sizing:inherit}.cfgFeatureItem__dropdown{-webkit-appearance:none;appearance:none;font-family:inherit;font-size:inherit;color:inherit;background:none;border:none;padding:0;align-items:stretch;display:flex;height:3.9em;outline:0;position:relative;width:100%;cursor:pointer}.cfgFeatureItem--optional{margin-top:1em}.cfgFeatureItem__hiddenInput{left:-99999px;opacity:0;position:absolute;z-index:-1}.cfgFeatureItem__radio{border:.2em solid #c8c7cc;border-radius:50%}.cfgFeatureItem__checkbox,.cfgFeatureItem__radio{align-items:center;display:flex;flex:0 0 auto;height:2.2em;justify-content:center;pointer-events:none;-webkit-user-select:none;user-select:none;width:2.2em}.cfgFeatureItem__checkbox{border:.2em solid #c8c7cc;border-radius:.3em}.cfgFeatureItem__hiddenInput:focus~.cfgFeatureItem__checkbox,.cfgFeatureItem__hiddenInput:focus~.cfgFeatureItem__radio{box-shadow:0 0 0 .075em #fff,0 0 0 .2em #333}.cfgFeatureItem__hiddenInput:checked~.cfgFeatureItem__radio{border:.2em solid #000;border-radius:50%}.cfgFeatureItem__hiddenInput:checked~.cfgFeatureItem__checkbox,.cfgFeatureItem__hiddenInput:checked~.cfgFeatureItem__radio{align-items:center;display:flex;flex:0 0 auto;height:2.2em;justify-content:center;pointer-events:none;-webkit-user-select:none;user-select:none;width:2.2em}.cfgFeatureItem__hiddenInput:checked~.cfgFeatureItem__checkbox{border:.2em solid #000;border-radius:.3em}.cfgFeatureItemOption__titleWrapper,.cfgFeatureItemOptional__titleWrapper{flex:1 1 auto;margin-left:1em}.cfgFeatureItemOption__title,.cfgFeatureItemOptional__title{font-size:1.5em}.cfgFeatureItemOption__price{font-weight:600;font-size:.75em;color:grey}.cfgOptionTree--subLevel .cfgFeatureItem__hr{display:none}.cfgFeatureItemOption,.cfgFeatureItemOptional{align-items:center;display:flex}.cfgFeatureItemOptional{justify-content:center;margin-top:.5em}.cfgFeatureItemOptional__header{font-size:1.2em;font-weight:600;margin:0 0 .3em;padding:0;text-transform:uppercase}.cfgAdditionalProduct .cfgFeatureItem:last-child .cfgFeatureItem__hr{margin-bottom:-.1em}.cfgOptionTree{box-sizing:border-box;list-style:none;margin:0;padding:0}.cfgOptionTree:after,.cfgOptionTree:before{box-sizing:inherit}.cfgOptionTree *{box-sizing:border-box}.cfgOptionTree :after,.cfgOptionTree :before{box-sizing:inherit}.cfgOptionTree--topLevel{padding-left:1.7em}.cfgOptionTree--indent{margin-left:3.2em}.cfgOptionTree--compThumb{margin-left:4.2em}.cfgProductInfo{box-sizing:border-box;color:#333;display:flex}.cfgProductInfo:after,.cfgProductInfo:before{box-sizing:inherit}.cfgProductInfo *{box-sizing:border-box}.cfgProductInfo :after,.cfgProductInfo :before{box-sizing:inherit}.cfgProductInfo__left{flex:1 1 auto;min-width:0;overflow:hidden}.cfgProductInfo__right{align-items:flex-end;display:flex;flex-direction:column;flex:1 0 auto;margin-left:1em;max-width:.3333333333;min-width:0}.cfgProductInfo__name{display:block;font-size:1.6em;font-weight:600;line-height:1.33;margin:0}.cfgProductInfo__number{font-size:1.3em;font-weight:400;line-height:1.38;margin:0}.cfgCenteredLoading{box-sizing:border-box;align-items:center;display:flex;flex-direction:column;height:100%;justify-content:center;width:100%}.cfgCenteredLoading:after,.cfgCenteredLoading:before{box-sizing:inherit}.cfgCenteredLoading *{box-sizing:border-box}.cfgCenteredLoading :after,.cfgCenteredLoading :before{box-sizing:inherit}.cfgOverlayLoading{box-sizing:border-box;align-items:center;background-color:#fff;bottom:0;display:flex;flex-direction:column;justify-content:center;left:0;position:absolute;right:0;top:0;z-index:1000}.cfgOverlayLoading:after,.cfgOverlayLoading:before{box-sizing:inherit}.cfgOverlayLoading *{box-sizing:border-box}.cfgOverlayLoading :after,.cfgOverlayLoading :before{box-sizing:inherit}.cfgOverlayLoading--clickThrough{background-color:transparent;pointer-events:none}.cfgOverlayLoading--clickThrough .cfgLoadingWithText{padding:2em 2em 1.8em;border-radius:.8em;background-color:#fff;opacity:.8;border:.1em solid rgba(0,0,0,.15)}.cfgOverlayLoading--fullWindow{position:fixed;z-index:1001}.cfgLoadingWithText{box-sizing:border-box;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;text-align:center}.cfgLoadingWithText:after,.cfgLoadingWithText:before{box-sizing:inherit}.cfgLoadingWithText *{box-sizing:border-box}.cfgLoadingWithText :after,.cfgLoadingWithText :before{box-sizing:inherit}.cfgLoadingWithText__text{color:#000;font-weight:600;margin-top:.5em;font-size:1.6em}.cfgLoading{box-sizing:border-box;animation:rotate 1.1s linear 0s infinite;border-radius:100%;border:.5em solid rgba(0,0,0,.15);border-bottom-color:#000;display:inline-block;height:3em;width:3em}.cfgLoading:after,.cfgLoading:before{box-sizing:inherit}.cfgLoading *{box-sizing:border-box}.cfgLoading :after,.cfgLoading :before{box-sizing:inherit}.cfgLoading--small{border-width:.4em;height:2em;width:2em}.cfgSlider{box-sizing:border-box;flex:1;margin:0;padding:0;min-height:2.8em;background:transparent;font:inherit}.cfgSlider:after,.cfgSlider:before{box-sizing:inherit}.cfgSlider *{box-sizing:border-box}.cfgSlider :after,.cfgSlider :before{box-sizing:inherit}.cfgSlider,.cfgSlider::-webkit-slider-thumb{-webkit-appearance:none}.cfgSlider::-webkit-slider-runnable-track{box-sizing:border-box;border:none;height:.2em;background:#666}.cfgSlider::-moz-range-track{box-sizing:border-box;border:none;height:.2em;background:#666}.cfgSlider::-ms-track{box-sizing:border-box;border:none;height:.2em;background:#666}.cfgSlider::-webkit-slider-thumb{margin-top:-1.3em;box-sizing:border-box;border:none;width:2.8em;height:2.8em;border-radius:50%;background:#fff;box-shadow:0 .15em .45em .05em #666}.cfgSlider::-moz-range-thumb{box-sizing:border-box;border:none;width:2.8em;height:2.8em;border-radius:50%;background:#fff;box-shadow:0 .15em .45em .05em #666}.cfgSlider::-ms-thumb{margin-top:0;box-sizing:border-box;border:none;width:2.8em;height:2.8em;border-radius:50%;background:#fff;box-shadow:0 .15em .45em .05em #666}.cfgSlider::-ms-tooltip{display:none}.cfgCheckmark{box-sizing:border-box;display:inline-block;width:100%;height:100%}.cfgCheckmark:after,.cfgCheckmark:before{box-sizing:inherit}.cfgCheckmark *{box-sizing:border-box}.cfgCheckmark :after,.cfgCheckmark :before{box-sizing:inherit}.cfgCheckmark__container{transition:transform .4s;transform:translateY(17px)}.cfgCheckmark__line{stroke:#000;stroke-linecap:round;stroke-width:12;transform-origin:50px 50px;transition:transform .4s,stroke .4s}.cfgCheckmark__lineLeft{stroke:#000;transform:rotate(40deg) translateY(24px) translateX(18px)}.cfgCheckmark__lineRight{stroke:#000;transform:rotate(-50deg) translateY(-2px) translateX(-3px)}.cfgCheckmark__border{border:.2em solid #c8c7cc;border-radius:.3em}.cfgCheckmark__border,.cfgCheckmark__border--active{align-items:center;display:flex;flex:0 0 auto;height:2.2em;justify-content:center;pointer-events:none;-webkit-user-select:none;user-select:none;width:2.2em}.cfgCheckmark__border--active{border:.2em solid #000;border-radius:.3em}.cfgChevron{box-sizing:border-box;display:inline-block;width:100%}.cfgChevron:after,.cfgChevron:before{box-sizing:inherit}.cfgChevron *{box-sizing:border-box}.cfgChevron :after,.cfgChevron :before{box-sizing:inherit}.cfgChevron__container{transition:transform .4s}.cfgChevron__container--down{transform:translateY(13px)}.cfgChevron__container--up{transform:translateY(-13px)}.cfgChevron__line{stroke-linecap:round;stroke-width:10;transform-origin:50px 50px;transition:transform .4s,stroke .4s}.cfgChevron__lineLeft--active,.cfgChevron__lineRight--active{stroke:#000}.cfgChevron__lineLeft--passive,.cfgChevron__lineRight--passive{stroke:#bababa}.cfgChevron__lineLeft--down{transform:rotate(40deg)}.cfgChevron__lineLeft--up,.cfgChevron__lineRight--down{transform:rotate(-40deg)}.cfgChevron__lineRight--up{transform:rotate(40deg)}.cfgDarkTheme .cfgButton{box-sizing:border-box;display:inline-block;background-color:transparent;color:#d6d6d6;border-radius:.3em;border:.1em solid #6a6a6a;font-size:1.3em;font-weight:500;outline:none;padding:.4em .8em}.cfgDarkTheme .cfgButton:after,.cfgDarkTheme .cfgButton:before{box-sizing:inherit}.cfgDarkTheme .cfgButton *{box-sizing:border-box}.cfgDarkTheme .cfgButton :after,.cfgDarkTheme .cfgButton :before{box-sizing:inherit}.cfgDarkTheme .cfgButton:focus{box-shadow:0 0 0 .075em #333,0 0 0 .2em #d6d6d6}.cfgDarkTheme .cfgButtonRow{box-sizing:border-box}.cfgDarkTheme .cfgButtonRow:after,.cfgDarkTheme .cfgButtonRow:before{box-sizing:inherit}.cfgDarkTheme .cfgButtonRow *{box-sizing:border-box}.cfgDarkTheme .cfgButtonRow :after,.cfgDarkTheme .cfgButtonRow :before{box-sizing:inherit}.cfgDarkTheme .cfgButtonRow__button:nth-child(n+2){margin-left:1em}.cfgDarkTheme .cfgConfigurator{box-sizing:border-box;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;font-size:10px;color:#d6d6d6;min-width:0}.cfgDarkTheme .cfgConfigurator:after,.cfgDarkTheme .cfgConfigurator:before{box-sizing:inherit}.cfgDarkTheme .cfgConfigurator *{box-sizing:border-box}.cfgDarkTheme .cfgConfigurator :after,.cfgDarkTheme .cfgConfigurator :before{box-sizing:inherit}.cfgDarkTheme .cfgConfiguratorHeader{border-bottom:.1em solid #5b5963;padding:1.7em 1.7em 1.9em;position:relative}.cfgDarkTheme .cfgConfiguratorHeader__actions{margin-top:1em}.cfgDarkTheme .cfgConfiguratorTree{padding-top:1em}.cfgDarkTheme .cfgCanvasWrapper{box-sizing:border-box;position:relative;height:50rem;-webkit-user-select:none;user-select:none}.cfgDarkTheme .cfgCanvasWrapper:after,.cfgDarkTheme .cfgCanvasWrapper:before{box-sizing:inherit}.cfgDarkTheme .cfgCanvasWrapper *{box-sizing:border-box}.cfgDarkTheme .cfgCanvasWrapper :after,.cfgDarkTheme .cfgCanvasWrapper :before{box-sizing:inherit}.cfgDarkTheme .cfgCanvasWrapper canvas{outline:none}.cfgDarkTheme .cfgConfiguratorWrapper{box-sizing:border-box;color:#d6d6d6;height:100%;width:100%}.cfgDarkTheme .cfgConfiguratorWrapper:after,.cfgDarkTheme .cfgConfiguratorWrapper:before{box-sizing:inherit}.cfgDarkTheme .cfgConfiguratorWrapper *{box-sizing:border-box}.cfgDarkTheme .cfgConfiguratorWrapper :after,.cfgDarkTheme .cfgConfiguratorWrapper :before{box-sizing:inherit}@media screen and (orientation:landscape){.cfgDarkTheme .cfgConfiguratorWrapper{display:flex;flex-direction:row}.cfgDarkTheme .cfgConfiguratorWrapper>.cfgConfigurator{flex:0 1 40%;height:100%}.cfgDarkTheme .cfgConfiguratorWrapper .cfgCanvasWrapper{flex:0 1 60%;height:85vh;overflow:hidden;position:sticky;top:0}}.cfgDarkTheme .cfgExpandableHeadingRow{box-sizing:border-box;-webkit-appearance:none;appearance:none;font-family:inherit;font-size:inherit;color:inherit;background:none;border:none;padding:0;align-items:stretch;display:flex;height:3.9em;outline:0;position:relative;width:100%}.cfgDarkTheme .cfgExpandableHeadingRow:after,.cfgDarkTheme .cfgExpandableHeadingRow:before{box-sizing:inherit}.cfgDarkTheme .cfgExpandableHeadingRow *{box-sizing:border-box}.cfgDarkTheme .cfgExpandableHeadingRow :after,.cfgDarkTheme .cfgExpandableHeadingRow :before{box-sizing:inherit}.cfgDarkTheme .cfgExpandableHeadingRow--expandable{cursor:pointer}.cfgDarkTheme .cfgExpandableHeadingRow__title{align-items:center;display:flex;flex:1 1 auto;font-size:1.5em;font-weight:500;justify-content:flex-start}.cfgDarkTheme .cfgExpandableHeadingRow__icon{align-items:center;display:flex;flex:0 0 5em;justify-content:center;padding:0 1.5em}.cfgDarkTheme .cfgHr{box-sizing:border-box;border:0;border-bottom:.1em solid #5b5963;padding:0;margin:0}.cfgDarkTheme .cfgHr:after,.cfgDarkTheme .cfgHr:before{box-sizing:inherit}.cfgDarkTheme .cfgHr *{box-sizing:border-box}.cfgDarkTheme .cfgHr :after,.cfgDarkTheme .cfgHr :before{box-sizing:inherit}.cfgDarkTheme .cfgThumbnailImage{border-radius:.7em;display:inline-block;height:3em;width:3em}.cfgDarkTheme .cfgThumbnailPlaceholder{align-items:center;display:flex;flex:0 0 4.2em;justify-content:flex-start}.cfgDarkTheme .cfgFeatureItem{box-sizing:border-box;color:#d6d6d6}.cfgDarkTheme .cfgFeatureItem:after,.cfgDarkTheme .cfgFeatureItem:before{box-sizing:inherit}.cfgDarkTheme .cfgFeatureItem *{box-sizing:border-box}.cfgDarkTheme .cfgFeatureItem :after,.cfgDarkTheme .cfgFeatureItem :before{box-sizing:inherit}.cfgDarkTheme .cfgFeatureItem__dropdown{-webkit-appearance:none;appearance:none;font-family:inherit;font-size:inherit;color:inherit;background:none;border:none;padding:0;align-items:stretch;display:flex;height:3.9em;outline:0;position:relative;width:100%;cursor:pointer}.cfgDarkTheme .cfgFeatureItem--optional{margin-top:1em}.cfgDarkTheme .cfgFeatureItem__hiddenInput{left:-99999px;opacity:0;position:absolute;z-index:-1}.cfgDarkTheme .cfgFeatureItem__radio{border:.2em solid #5b5963;border-radius:50%}.cfgDarkTheme .cfgFeatureItem__checkbox,.cfgDarkTheme .cfgFeatureItem__radio{align-items:center;display:flex;flex:0 0 auto;height:2.2em;justify-content:center;pointer-events:none;-webkit-user-select:none;user-select:none;width:2.2em}.cfgDarkTheme .cfgFeatureItem__checkbox{border:.2em solid #5b5963;border-radius:.3em}.cfgDarkTheme .cfgFeatureItem__hiddenInput:focus~.cfgFeatureItem__checkbox,.cfgDarkTheme .cfgFeatureItem__hiddenInput:focus~.cfgFeatureItem__radio{box-shadow:0 0 0 .075em #333,0 0 0 .2em #d6d6d6}.cfgDarkTheme .cfgFeatureItem__hiddenInput:checked~.cfgFeatureItem__radio{border:.2em solid #fff;border-radius:50%}.cfgDarkTheme .cfgFeatureItem__hiddenInput:checked~.cfgFeatureItem__checkbox,.cfgDarkTheme .cfgFeatureItem__hiddenInput:checked~.cfgFeatureItem__radio{align-items:center;display:flex;flex:0 0 auto;height:2.2em;justify-content:center;pointer-events:none;-webkit-user-select:none;user-select:none;width:2.2em}.cfgDarkTheme .cfgFeatureItem__hiddenInput:checked~.cfgFeatureItem__checkbox{border:.2em solid #fff;border-radius:.3em}.cfgDarkTheme .cfgFeatureItemOption__titleWrapper,.cfgDarkTheme .cfgFeatureItemOptional__titleWrapper{flex:1 1 auto;margin-left:1em}.cfgDarkTheme .cfgFeatureItemOption__title,.cfgDarkTheme .cfgFeatureItemOptional__title{font-size:1.5em}.cfgDarkTheme .cfgFeatureItemOption__price{font-weight:600;font-size:.75em;color:#999}.cfgDarkTheme .cfgOptionTree--subLevel .cfgFeatureItem__hr{display:none}.cfgDarkTheme .cfgFeatureItemOption{align-items:center;display:flex}.cfgDarkTheme .cfgFeatureItemOptional{align-items:center;display:flex;justify-content:center;margin-top:.5em}.cfgDarkTheme .cfgFeatureItemOptional__header{font-size:1.2em;font-weight:600;margin:0 0 .3em;padding:0;text-transform:uppercase}.cfgDarkTheme .cfgAdditionalProduct .cfgFeatureItem:last-child .cfgFeatureItem__hr{margin-bottom:-.1em}.cfgDarkTheme .cfgOptionTree{box-sizing:border-box;list-style:none;margin:0;padding:0}.cfgDarkTheme .cfgOptionTree:after,.cfgDarkTheme .cfgOptionTree:before{box-sizing:inherit}.cfgDarkTheme .cfgOptionTree *{box-sizing:border-box}.cfgDarkTheme .cfgOptionTree :after,.cfgDarkTheme .cfgOptionTree :before{box-sizing:inherit}.cfgDarkTheme .cfgOptionTree--topLevel{padding-left:1.7em}.cfgDarkTheme .cfgOptionTree--indent{margin-left:3.2em}.cfgDarkTheme .cfgOptionTree--compThumb{margin-left:4.2em}.cfgDarkTheme .cfgProductInfo{box-sizing:border-box;color:#d6d6d6;display:flex}.cfgDarkTheme .cfgProductInfo:after,.cfgDarkTheme .cfgProductInfo:before{box-sizing:inherit}.cfgDarkTheme .cfgProductInfo *{box-sizing:border-box}.cfgDarkTheme .cfgProductInfo :after,.cfgDarkTheme .cfgProductInfo :before{box-sizing:inherit}.cfgDarkTheme .cfgProductInfo__left{flex:1 1 auto;min-width:0;overflow:hidden}.cfgDarkTheme .cfgProductInfo__right{align-items:flex-end;display:flex;flex-direction:column;flex:1 0 auto;margin-left:1em;max-width:.3333333333;min-width:0}.cfgDarkTheme .cfgProductInfo__name{display:block;font-size:1.6em;font-weight:600;line-height:1.33;margin:0}.cfgDarkTheme .cfgProductInfo__number{font-size:1.3em;font-weight:400;line-height:1.38;margin:0}.cfgDarkTheme .cfgCenteredLoading{box-sizing:border-box;align-items:center;display:flex;flex-direction:column;height:100%;justify-content:center;width:100%}.cfgDarkTheme .cfgCenteredLoading:after,.cfgDarkTheme .cfgCenteredLoading:before{box-sizing:inherit}.cfgDarkTheme .cfgCenteredLoading *{box-sizing:border-box}.cfgDarkTheme .cfgCenteredLoading :after,.cfgDarkTheme .cfgCenteredLoading :before{box-sizing:inherit}.cfgDarkTheme .cfgOverlayLoading{box-sizing:border-box;align-items:center;background-color:#333;bottom:0;display:flex;flex-direction:column;justify-content:center;left:0;position:absolute;right:0;top:0;z-index:1000}.cfgDarkTheme .cfgOverlayLoading:after,.cfgDarkTheme .cfgOverlayLoading:before{box-sizing:inherit}.cfgDarkTheme .cfgOverlayLoading *{box-sizing:border-box}.cfgDarkTheme .cfgOverlayLoading :after,.cfgDarkTheme .cfgOverlayLoading :before{box-sizing:inherit}.cfgDarkTheme .cfgOverlayLoading--clickThrough{background-color:transparent;pointer-events:none}.cfgDarkTheme .cfgOverlayLoading--clickThrough .cfgLoadingWithText{padding:2em 2em 1.8em;border-radius:.8em;background-color:#333;opacity:.8;border:.1em solid hsla(0,0%,100%,.15)}.cfgDarkTheme .cfgOverlayLoading--fullWindow{position:fixed;z-index:1001}.cfgDarkTheme .cfgLoadingWithText{box-sizing:border-box;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;text-align:center}.cfgDarkTheme .cfgLoadingWithText:after,.cfgDarkTheme .cfgLoadingWithText:before{box-sizing:inherit}.cfgDarkTheme .cfgLoadingWithText *{box-sizing:border-box}.cfgDarkTheme .cfgLoadingWithText :after,.cfgDarkTheme .cfgLoadingWithText :before{box-sizing:inherit}.cfgDarkTheme .cfgLoadingWithText__text{color:#fff;font-weight:600;margin-top:.5em;font-size:1.6em}.cfgDarkTheme .cfgLoading{box-sizing:border-box;animation:rotate 1.1s linear 0s infinite;border-radius:100%;border:.5em solid hsla(0,0%,100%,.15);border-bottom-color:#fff;display:inline-block;height:3em;width:3em}.cfgDarkTheme .cfgLoading:after,.cfgDarkTheme .cfgLoading:before{box-sizing:inherit}.cfgDarkTheme .cfgLoading *{box-sizing:border-box}.cfgDarkTheme .cfgLoading :after,.cfgDarkTheme .cfgLoading :before{box-sizing:inherit}.cfgDarkTheme .cfgLoading--small{border-width:.4em;height:2em;width:2em}@keyframes rotate{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.cfgDarkTheme .cfgSlider{box-sizing:border-box;flex:1;margin:0;padding:0;min-height:2.8em;background:transparent;font:inherit}.cfgDarkTheme .cfgSlider:after,.cfgDarkTheme .cfgSlider:before{box-sizing:inherit}.cfgDarkTheme .cfgSlider *{box-sizing:border-box}.cfgDarkTheme .cfgSlider :after,.cfgDarkTheme .cfgSlider :before{box-sizing:inherit}.cfgDarkTheme .cfgSlider,.cfgDarkTheme .cfgSlider::-webkit-slider-thumb{-webkit-appearance:none}.cfgDarkTheme .cfgSlider::-webkit-slider-runnable-track{box-sizing:border-box;border:none;height:.2em;background:#adadad}.cfgDarkTheme .cfgSlider::-moz-range-track{box-sizing:border-box;border:none;height:.2em;background:#adadad}.cfgDarkTheme .cfgSlider::-ms-track{box-sizing:border-box;border:none;height:.2em;background:#adadad}.cfgDarkTheme .cfgSlider::-webkit-slider-thumb{margin-top:-1.3em;box-sizing:border-box;border:none;width:2.8em;height:2.8em;border-radius:50%;background:#333;box-shadow:0 .15em .45em .05em #adadad}.cfgDarkTheme .cfgSlider::-moz-range-thumb{box-sizing:border-box;border:none;width:2.8em;height:2.8em;border-radius:50%;background:#333;box-shadow:0 .15em .45em .05em #adadad}.cfgDarkTheme .cfgSlider::-ms-thumb{margin-top:0;box-sizing:border-box;border:none;width:2.8em;height:2.8em;border-radius:50%;background:#333;box-shadow:0 .15em .45em .05em #adadad}.cfgDarkTheme .cfgSlider::-ms-tooltip{display:none}.cfgDarkTheme .cfgCheckmark{box-sizing:border-box;display:inline-block;width:100%;height:100%}.cfgDarkTheme .cfgCheckmark:after,.cfgDarkTheme .cfgCheckmark:before{box-sizing:inherit}.cfgDarkTheme .cfgCheckmark *{box-sizing:border-box}.cfgDarkTheme .cfgCheckmark :after,.cfgDarkTheme .cfgCheckmark :before{box-sizing:inherit}.cfgDarkTheme .cfgCheckmark__container{transition:transform .4s;transform:translateY(17px)}.cfgDarkTheme .cfgCheckmark__line{stroke:#fff;stroke-linecap:round;stroke-width:12;transform-origin:50px 50px;transition:transform .4s,stroke .4s}.cfgDarkTheme .cfgCheckmark__lineLeft{stroke:#fff;transform:rotate(40deg) translateY(24px) translateX(18px)}.cfgDarkTheme .cfgCheckmark__lineRight{stroke:#fff;transform:rotate(-50deg) translateY(-2px) translateX(-3px)}.cfgDarkTheme .cfgCheckmark__border{border:.2em solid #5b5963;border-radius:.3em}.cfgDarkTheme .cfgCheckmark__border,.cfgDarkTheme .cfgCheckmark__border--active{align-items:center;display:flex;flex:0 0 auto;height:2.2em;justify-content:center;pointer-events:none;-webkit-user-select:none;user-select:none;width:2.2em}.cfgDarkTheme .cfgCheckmark__border--active{border:.2em solid #fff;border-radius:.3em}.cfgDarkTheme .cfgChevron{box-sizing:border-box;display:inline-block;width:100%}.cfgDarkTheme .cfgChevron:after,.cfgDarkTheme .cfgChevron:before{box-sizing:inherit}.cfgDarkTheme .cfgChevron *{box-sizing:border-box}.cfgDarkTheme .cfgChevron :after,.cfgDarkTheme .cfgChevron :before{box-sizing:inherit}.cfgDarkTheme .cfgChevron__container{transition:transform .4s}.cfgDarkTheme .cfgChevron__container--down{transform:translateY(13px)}.cfgDarkTheme .cfgChevron__container--up{transform:translateY(-13px)}.cfgDarkTheme .cfgChevron__line{stroke-linecap:round;stroke-width:10;transform-origin:50px 50px;transition:transform .4s,stroke .4s}.cfgDarkTheme .cfgChevron__lineLeft--active,.cfgDarkTheme .cfgChevron__lineRight--active{stroke:#fff}.cfgDarkTheme .cfgChevron__lineLeft--passive,.cfgDarkTheme .cfgChevron__lineRight--passive{stroke:#6a6a6a}.cfgDarkTheme .cfgChevron__lineLeft--down{transform:rotate(40deg)}.cfgDarkTheme .cfgChevron__lineLeft--up,.cfgDarkTheme .cfgChevron__lineRight--down{transform:rotate(-40deg)}.cfgDarkTheme .cfgChevron__lineRight--up{transform:rotate(40deg)}
+.cfgRangeView__inputs{display:flex;align-items:center}.cfgRangeView__number-input{font-size:1.5em;flex-grow:1;text-align:right}.cfgRangeView__unit-label{font-size:1.5em;margin-left:.3em}.cfgRangeView__slider-input.cfgSlider{margin-left:1em;flex-grow:3}.cfgRangeView__error{margin-top:1em;font-size:1.5em;color:#b00}.cfgMl1{margin-left:1em}.cfgMt1{margin-top:1em}.cfgMb1{margin-bottom:1em}.cfgTextOverflow{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cfgButton{box-sizing:border-box;display:inline-block;background-color:transparent;color:#333;border-radius:.3em;border:.1em solid #bababa;font-size:1.3em;font-weight:500;outline:none;padding:.4em .8em}.cfgButton:after,.cfgButton:before{box-sizing:inherit}.cfgButton *{box-sizing:border-box}.cfgButton :after,.cfgButton :before{box-sizing:inherit}.cfgButton:focus{box-shadow:0 0 0 .075em #fff,0 0 0 .2em #333}.cfgButtonRow{box-sizing:border-box}.cfgButtonRow:after,.cfgButtonRow:before{box-sizing:inherit}.cfgButtonRow *{box-sizing:border-box}.cfgButtonRow :after,.cfgButtonRow :before{box-sizing:inherit}.cfgButtonRow__button:nth-child(n+2){margin-left:1em}.cfgConfigurator{box-sizing:border-box;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;font-size:10px;color:#333;min-width:0}.cfgConfigurator:after,.cfgConfigurator:before{box-sizing:inherit}.cfgConfigurator *{box-sizing:border-box}.cfgConfigurator :after,.cfgConfigurator :before{box-sizing:inherit}.cfgConfiguratorHeader{border-bottom:.1em solid #c8c7cc;padding:1.7em 1.7em 1.9em;position:relative}.cfgConfiguratorHeader__actions{margin-top:1em}.cfgConfiguratorTree{padding-top:1em}.cfgCanvasWrapper{box-sizing:border-box;position:relative;height:50rem;-webkit-user-select:none;user-select:none}.cfgCanvasWrapper:after,.cfgCanvasWrapper:before{box-sizing:inherit}.cfgCanvasWrapper *{box-sizing:border-box}.cfgCanvasWrapper :after,.cfgCanvasWrapper :before{box-sizing:inherit}.cfgCanvasWrapper canvas{outline:none}.cfgConfiguratorWrapper{box-sizing:border-box;color:#333;height:100%;width:100%}.cfgConfiguratorWrapper:after,.cfgConfiguratorWrapper:before{box-sizing:inherit}.cfgConfiguratorWrapper *{box-sizing:border-box}.cfgConfiguratorWrapper :after,.cfgConfiguratorWrapper :before{box-sizing:inherit}@media screen and (orientation:landscape){.cfgConfiguratorWrapper{display:flex;flex-direction:row}.cfgConfiguratorWrapper>.cfgConfigurator{flex:0 1 40%;height:100%}.cfgConfiguratorWrapper .cfgCanvasWrapper{flex:0 1 60%;height:85vh;overflow:hidden;position:sticky;top:0}}.cfgExpandableHeadingRow{box-sizing:border-box;-webkit-appearance:none;appearance:none;font-family:inherit;font-size:inherit;color:inherit;background:none;border:none;padding:0;align-items:stretch;display:flex;height:3.9em;outline:0;position:relative;width:100%}.cfgExpandableHeadingRow:after,.cfgExpandableHeadingRow:before{box-sizing:inherit}.cfgExpandableHeadingRow *{box-sizing:border-box}.cfgExpandableHeadingRow :after,.cfgExpandableHeadingRow :before{box-sizing:inherit}.cfgExpandableHeadingRow--expandable{cursor:pointer}.cfgExpandableHeadingRow__title{align-items:center;display:flex;flex:1 1 auto;font-size:1.5em;font-weight:500;justify-content:flex-start}.cfgExpandableHeadingRow__icon{align-items:center;display:flex;flex:0 0 5em;justify-content:center;padding:0 1.5em}.cfgHr{box-sizing:border-box;border:0;border-bottom:.1em solid #c8c7cc;padding:0;margin:0}.cfgHr:after,.cfgHr:before{box-sizing:inherit}.cfgHr *{box-sizing:border-box}.cfgHr :after,.cfgHr :before{box-sizing:inherit}.cfgThumbnailImage{border-radius:.7em;display:inline-block;height:3em;width:3em}.cfgThumbnailPlaceholder{align-items:center;display:flex;flex:0 0 4.2em;justify-content:flex-start}.cfgFeatureItem{box-sizing:border-box;color:#333}.cfgFeatureItem:after,.cfgFeatureItem:before{box-sizing:inherit}.cfgFeatureItem *{box-sizing:border-box}.cfgFeatureItem :after,.cfgFeatureItem :before{box-sizing:inherit}.cfgFeatureItem__dropdown{-webkit-appearance:none;appearance:none;font-family:inherit;font-size:inherit;color:inherit;background:none;border:none;padding:0;align-items:stretch;display:flex;height:3.9em;outline:0;position:relative;width:100%;cursor:pointer}.cfgFeatureItem--optional{margin-top:1em}.cfgFeatureItem__hiddenInput{left:-99999px;opacity:0;position:absolute;z-index:-1}.cfgFeatureItem__radio{border:.2em solid #c8c7cc;border-radius:50%}.cfgFeatureItem__checkbox,.cfgFeatureItem__radio{align-items:center;display:flex;flex:0 0 auto;height:2.2em;justify-content:center;pointer-events:none;-webkit-user-select:none;user-select:none;width:2.2em}.cfgFeatureItem__checkbox{border:.2em solid #c8c7cc;border-radius:.3em}.cfgFeatureItem__hiddenInput:focus~.cfgFeatureItem__checkbox,.cfgFeatureItem__hiddenInput:focus~.cfgFeatureItem__radio{box-shadow:0 0 0 .075em #fff,0 0 0 .2em #333}.cfgFeatureItem__hiddenInput:checked~.cfgFeatureItem__radio{border:.2em solid #000;border-radius:50%}.cfgFeatureItem__hiddenInput:checked~.cfgFeatureItem__checkbox,.cfgFeatureItem__hiddenInput:checked~.cfgFeatureItem__radio{align-items:center;display:flex;flex:0 0 auto;height:2.2em;justify-content:center;pointer-events:none;-webkit-user-select:none;user-select:none;width:2.2em}.cfgFeatureItem__hiddenInput:checked~.cfgFeatureItem__checkbox{border:.2em solid #000;border-radius:.3em}.cfgFeatureItemOption__titleWrapper,.cfgFeatureItemOptional__titleWrapper{flex:1 1 auto;margin-left:1em}.cfgFeatureItemOption__title,.cfgFeatureItemOptional__title{font-size:1.5em}.cfgFeatureItemOption__price{font-weight:600;font-size:.75em;color:grey}.cfgOptionTree--subLevel .cfgFeatureItem__hr{display:none}.cfgFeatureItemOption,.cfgFeatureItemOptional{align-items:center;display:flex}.cfgFeatureItemOptional{justify-content:center;margin-top:.5em}.cfgFeatureItemOptional__header{font-size:1.2em;font-weight:600;margin:0 0 .3em;padding:0;text-transform:uppercase}.cfgAdditionalProduct .cfgFeatureItem:last-child .cfgFeatureItem__hr{margin-bottom:-.1em}.cfgOptionTree{box-sizing:border-box;list-style:none;margin:0;padding:0}.cfgOptionTree:after,.cfgOptionTree:before{box-sizing:inherit}.cfgOptionTree *{box-sizing:border-box}.cfgOptionTree :after,.cfgOptionTree :before{box-sizing:inherit}.cfgOptionTree--topLevel{padding-left:1.7em}.cfgOptionTree--indent{margin-left:3.2em}.cfgOptionTree--compThumb{margin-left:4.2em}.cfgProductInfo{box-sizing:border-box;color:#333;display:flex}.cfgProductInfo:after,.cfgProductInfo:before{box-sizing:inherit}.cfgProductInfo *{box-sizing:border-box}.cfgProductInfo :after,.cfgProductInfo :before{box-sizing:inherit}.cfgProductInfo__left{flex:1 1 auto;min-width:0;overflow:hidden}.cfgProductInfo__right{align-items:flex-end;display:flex;flex-direction:column;flex:1 0 auto;margin-left:1em;max-width:.333333333;min-width:0}.cfgProductInfo__name{display:block;font-size:1.6em;font-weight:600;line-height:1.33;margin:0}.cfgProductInfo__number{font-size:1.3em;font-weight:400;line-height:1.38;margin:0}.cfgCenteredLoading{box-sizing:border-box;align-items:center;display:flex;flex-direction:column;height:100%;justify-content:center;width:100%}.cfgCenteredLoading:after,.cfgCenteredLoading:before{box-sizing:inherit}.cfgCenteredLoading *{box-sizing:border-box}.cfgCenteredLoading :after,.cfgCenteredLoading :before{box-sizing:inherit}.cfgOverlayLoading{box-sizing:border-box;align-items:center;background-color:#fff;bottom:0;display:flex;flex-direction:column;justify-content:center;left:0;position:absolute;right:0;top:0;z-index:1000}.cfgOverlayLoading:after,.cfgOverlayLoading:before{box-sizing:inherit}.cfgOverlayLoading *{box-sizing:border-box}.cfgOverlayLoading :after,.cfgOverlayLoading :before{box-sizing:inherit}.cfgOverlayLoading--clickThrough{background-color:transparent;pointer-events:none}.cfgOverlayLoading--clickThrough .cfgLoadingWithText{padding:2em 2em 1.8em;border-radius:.8em;background-color:#fff;opacity:.8;border:.1em solid rgba(0,0,0,.15)}.cfgOverlayLoading--fullWindow{position:fixed;z-index:1001}.cfgLoadingWithText{box-sizing:border-box;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;text-align:center}.cfgLoadingWithText:after,.cfgLoadingWithText:before{box-sizing:inherit}.cfgLoadingWithText *{box-sizing:border-box}.cfgLoadingWithText :after,.cfgLoadingWithText :before{box-sizing:inherit}.cfgLoadingWithText__text{color:#000;font-weight:600;margin-top:.5em;font-size:1.6em}.cfgLoading{box-sizing:border-box;animation:rotate 1.1s linear 0s infinite;border-radius:100%;border:.5em solid rgba(0,0,0,.15);border-bottom-color:#000;display:inline-block;height:3em;width:3em}.cfgLoading:after,.cfgLoading:before{box-sizing:inherit}.cfgLoading *{box-sizing:border-box}.cfgLoading :after,.cfgLoading :before{box-sizing:inherit}.cfgLoading--small{border-width:.4em;height:2em;width:2em}.cfgSlider{box-sizing:border-box;flex:1;margin:0;padding:0;min-height:2.8em;background:transparent;font:inherit}.cfgSlider:after,.cfgSlider:before{box-sizing:inherit}.cfgSlider *{box-sizing:border-box}.cfgSlider :after,.cfgSlider :before{box-sizing:inherit}.cfgSlider,.cfgSlider::-webkit-slider-thumb{-webkit-appearance:none}.cfgSlider::-webkit-slider-runnable-track{box-sizing:border-box;border:none;height:.2em;background:#666}.cfgSlider::-moz-range-track{box-sizing:border-box;border:none;height:.2em;background:#666}.cfgSlider::-ms-track{box-sizing:border-box;border:none;height:.2em;background:#666}.cfgSlider::-webkit-slider-thumb{margin-top:-1.3em;box-sizing:border-box;border:none;width:2.8em;height:2.8em;border-radius:50%;background:#fff;box-shadow:0 .15em .45em .05em #666}.cfgSlider::-moz-range-thumb{box-sizing:border-box;border:none;width:2.8em;height:2.8em;border-radius:50%;background:#fff;box-shadow:0 .15em .45em .05em #666}.cfgSlider::-ms-thumb{margin-top:0;box-sizing:border-box;border:none;width:2.8em;height:2.8em;border-radius:50%;background:#fff;box-shadow:0 .15em .45em .05em #666}.cfgSlider::-ms-tooltip{display:none}.cfgCheckmark{box-sizing:border-box;display:inline-block;width:100%;height:100%}.cfgCheckmark:after,.cfgCheckmark:before{box-sizing:inherit}.cfgCheckmark *{box-sizing:border-box}.cfgCheckmark :after,.cfgCheckmark :before{box-sizing:inherit}.cfgCheckmark__container{transition:transform .4s;transform:translateY(17px)}.cfgCheckmark__line{stroke:#000;stroke-linecap:round;stroke-width:12;transform-origin:50px 50px;transition:transform .4s,stroke .4s}.cfgCheckmark__lineLeft{stroke:#000;transform:rotate(40deg) translateY(24px) translateX(18px)}.cfgCheckmark__lineRight{stroke:#000;transform:rotate(-50deg) translateY(-2px) translateX(-3px)}.cfgCheckmark__border{border:.2em solid #c8c7cc;border-radius:.3em}.cfgCheckmark__border,.cfgCheckmark__border--active{align-items:center;display:flex;flex:0 0 auto;height:2.2em;justify-content:center;pointer-events:none;-webkit-user-select:none;user-select:none;width:2.2em}.cfgCheckmark__border--active{border:.2em solid #000;border-radius:.3em}.cfgChevron{box-sizing:border-box;display:inline-block;width:100%}.cfgChevron:after,.cfgChevron:before{box-sizing:inherit}.cfgChevron *{box-sizing:border-box}.cfgChevron :after,.cfgChevron :before{box-sizing:inherit}.cfgChevron__container{transition:transform .4s}.cfgChevron__container--down{transform:translateY(13px)}.cfgChevron__container--up{transform:translateY(-13px)}.cfgChevron__line{stroke-linecap:round;stroke-width:10;transform-origin:50px 50px;transition:transform .4s,stroke .4s}.cfgChevron__lineLeft--active,.cfgChevron__lineRight--active{stroke:#000}.cfgChevron__lineLeft--passive,.cfgChevron__lineRight--passive{stroke:#bababa}.cfgChevron__lineLeft--down{transform:rotate(40deg)}.cfgChevron__lineLeft--up,.cfgChevron__lineRight--down{transform:rotate(-40deg)}.cfgChevron__lineRight--up{transform:rotate(40deg)}.cfgDarkTheme .cfgButton{box-sizing:border-box;display:inline-block;background-color:transparent;color:#d6d6d6;border-radius:.3em;border:.1em solid #6a6a6a;font-size:1.3em;font-weight:500;outline:none;padding:.4em .8em}.cfgDarkTheme .cfgButton:after,.cfgDarkTheme .cfgButton:before{box-sizing:inherit}.cfgDarkTheme .cfgButton *{box-sizing:border-box}.cfgDarkTheme .cfgButton :after,.cfgDarkTheme .cfgButton :before{box-sizing:inherit}.cfgDarkTheme .cfgButton:focus{box-shadow:0 0 0 .075em #333,0 0 0 .2em #d6d6d6}.cfgDarkTheme .cfgButtonRow{box-sizing:border-box}.cfgDarkTheme .cfgButtonRow:after,.cfgDarkTheme .cfgButtonRow:before{box-sizing:inherit}.cfgDarkTheme .cfgButtonRow *{box-sizing:border-box}.cfgDarkTheme .cfgButtonRow :after,.cfgDarkTheme .cfgButtonRow :before{box-sizing:inherit}.cfgDarkTheme .cfgButtonRow__button:nth-child(n+2){margin-left:1em}.cfgDarkTheme .cfgConfigurator{box-sizing:border-box;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;font-size:10px;color:#d6d6d6;min-width:0}.cfgDarkTheme .cfgConfigurator:after,.cfgDarkTheme .cfgConfigurator:before{box-sizing:inherit}.cfgDarkTheme .cfgConfigurator *{box-sizing:border-box}.cfgDarkTheme .cfgConfigurator :after,.cfgDarkTheme .cfgConfigurator :before{box-sizing:inherit}.cfgDarkTheme .cfgConfiguratorHeader{border-bottom:.1em solid #5b5963;padding:1.7em 1.7em 1.9em;position:relative}.cfgDarkTheme .cfgConfiguratorHeader__actions{margin-top:1em}.cfgDarkTheme .cfgConfiguratorTree{padding-top:1em}.cfgDarkTheme .cfgCanvasWrapper{box-sizing:border-box;position:relative;height:50rem;-webkit-user-select:none;user-select:none}.cfgDarkTheme .cfgCanvasWrapper:after,.cfgDarkTheme .cfgCanvasWrapper:before{box-sizing:inherit}.cfgDarkTheme .cfgCanvasWrapper *{box-sizing:border-box}.cfgDarkTheme .cfgCanvasWrapper :after,.cfgDarkTheme .cfgCanvasWrapper :before{box-sizing:inherit}.cfgDarkTheme .cfgCanvasWrapper canvas{outline:none}.cfgDarkTheme .cfgConfiguratorWrapper{box-sizing:border-box;color:#d6d6d6;height:100%;width:100%}.cfgDarkTheme .cfgConfiguratorWrapper:after,.cfgDarkTheme .cfgConfiguratorWrapper:before{box-sizing:inherit}.cfgDarkTheme .cfgConfiguratorWrapper *{box-sizing:border-box}.cfgDarkTheme .cfgConfiguratorWrapper :after,.cfgDarkTheme .cfgConfiguratorWrapper :before{box-sizing:inherit}@media screen and (orientation:landscape){.cfgDarkTheme .cfgConfiguratorWrapper{display:flex;flex-direction:row}.cfgDarkTheme .cfgConfiguratorWrapper>.cfgConfigurator{flex:0 1 40%;height:100%}.cfgDarkTheme .cfgConfiguratorWrapper .cfgCanvasWrapper{flex:0 1 60%;height:85vh;overflow:hidden;position:sticky;top:0}}.cfgDarkTheme .cfgExpandableHeadingRow{box-sizing:border-box;-webkit-appearance:none;appearance:none;font-family:inherit;font-size:inherit;color:inherit;background:none;border:none;padding:0;align-items:stretch;display:flex;height:3.9em;outline:0;position:relative;width:100%}.cfgDarkTheme .cfgExpandableHeadingRow:after,.cfgDarkTheme .cfgExpandableHeadingRow:before{box-sizing:inherit}.cfgDarkTheme .cfgExpandableHeadingRow *{box-sizing:border-box}.cfgDarkTheme .cfgExpandableHeadingRow :after,.cfgDarkTheme .cfgExpandableHeadingRow :before{box-sizing:inherit}.cfgDarkTheme .cfgExpandableHeadingRow--expandable{cursor:pointer}.cfgDarkTheme .cfgExpandableHeadingRow__title{align-items:center;display:flex;flex:1 1 auto;font-size:1.5em;font-weight:500;justify-content:flex-start}.cfgDarkTheme .cfgExpandableHeadingRow__icon{align-items:center;display:flex;flex:0 0 5em;justify-content:center;padding:0 1.5em}.cfgDarkTheme .cfgHr{box-sizing:border-box;border:0;border-bottom:.1em solid #5b5963;padding:0;margin:0}.cfgDarkTheme .cfgHr:after,.cfgDarkTheme .cfgHr:before{box-sizing:inherit}.cfgDarkTheme .cfgHr *{box-sizing:border-box}.cfgDarkTheme .cfgHr :after,.cfgDarkTheme .cfgHr :before{box-sizing:inherit}.cfgDarkTheme .cfgThumbnailImage{border-radius:.7em;display:inline-block;height:3em;width:3em}.cfgDarkTheme .cfgThumbnailPlaceholder{align-items:center;display:flex;flex:0 0 4.2em;justify-content:flex-start}.cfgDarkTheme .cfgFeatureItem{box-sizing:border-box;color:#d6d6d6}.cfgDarkTheme .cfgFeatureItem:after,.cfgDarkTheme .cfgFeatureItem:before{box-sizing:inherit}.cfgDarkTheme .cfgFeatureItem *{box-sizing:border-box}.cfgDarkTheme .cfgFeatureItem :after,.cfgDarkTheme .cfgFeatureItem :before{box-sizing:inherit}.cfgDarkTheme .cfgFeatureItem__dropdown{-webkit-appearance:none;appearance:none;font-family:inherit;font-size:inherit;color:inherit;background:none;border:none;padding:0;align-items:stretch;display:flex;height:3.9em;outline:0;position:relative;width:100%;cursor:pointer}.cfgDarkTheme .cfgFeatureItem--optional{margin-top:1em}.cfgDarkTheme .cfgFeatureItem__hiddenInput{left:-99999px;opacity:0;position:absolute;z-index:-1}.cfgDarkTheme .cfgFeatureItem__radio{border:.2em solid #5b5963;border-radius:50%}.cfgDarkTheme .cfgFeatureItem__checkbox,.cfgDarkTheme .cfgFeatureItem__radio{align-items:center;display:flex;flex:0 0 auto;height:2.2em;justify-content:center;pointer-events:none;-webkit-user-select:none;user-select:none;width:2.2em}.cfgDarkTheme .cfgFeatureItem__checkbox{border:.2em solid #5b5963;border-radius:.3em}.cfgDarkTheme .cfgFeatureItem__hiddenInput:focus~.cfgFeatureItem__checkbox,.cfgDarkTheme .cfgFeatureItem__hiddenInput:focus~.cfgFeatureItem__radio{box-shadow:0 0 0 .075em #333,0 0 0 .2em #d6d6d6}.cfgDarkTheme .cfgFeatureItem__hiddenInput:checked~.cfgFeatureItem__radio{border:.2em solid #fff;border-radius:50%}.cfgDarkTheme .cfgFeatureItem__hiddenInput:checked~.cfgFeatureItem__checkbox,.cfgDarkTheme .cfgFeatureItem__hiddenInput:checked~.cfgFeatureItem__radio{align-items:center;display:flex;flex:0 0 auto;height:2.2em;justify-content:center;pointer-events:none;-webkit-user-select:none;user-select:none;width:2.2em}.cfgDarkTheme .cfgFeatureItem__hiddenInput:checked~.cfgFeatureItem__checkbox{border:.2em solid #fff;border-radius:.3em}.cfgDarkTheme .cfgFeatureItemOption__titleWrapper,.cfgDarkTheme .cfgFeatureItemOptional__titleWrapper{flex:1 1 auto;margin-left:1em}.cfgDarkTheme .cfgFeatureItemOption__title,.cfgDarkTheme .cfgFeatureItemOptional__title{font-size:1.5em}.cfgDarkTheme .cfgFeatureItemOption__price{font-weight:600;font-size:.75em;color:#999}.cfgDarkTheme .cfgOptionTree--subLevel .cfgFeatureItem__hr{display:none}.cfgDarkTheme .cfgFeatureItemOption{align-items:center;display:flex}.cfgDarkTheme .cfgFeatureItemOptional{align-items:center;display:flex;justify-content:center;margin-top:.5em}.cfgDarkTheme .cfgFeatureItemOptional__header{font-size:1.2em;font-weight:600;margin:0 0 .3em;padding:0;text-transform:uppercase}.cfgDarkTheme .cfgAdditionalProduct .cfgFeatureItem:last-child .cfgFeatureItem__hr{margin-bottom:-.1em}.cfgDarkTheme .cfgOptionTree{box-sizing:border-box;list-style:none;margin:0;padding:0}.cfgDarkTheme .cfgOptionTree:after,.cfgDarkTheme .cfgOptionTree:before{box-sizing:inherit}.cfgDarkTheme .cfgOptionTree *{box-sizing:border-box}.cfgDarkTheme .cfgOptionTree :after,.cfgDarkTheme .cfgOptionTree :before{box-sizing:inherit}.cfgDarkTheme .cfgOptionTree--topLevel{padding-left:1.7em}.cfgDarkTheme .cfgOptionTree--indent{margin-left:3.2em}.cfgDarkTheme .cfgOptionTree--compThumb{margin-left:4.2em}.cfgDarkTheme .cfgProductInfo{box-sizing:border-box;color:#d6d6d6;display:flex}.cfgDarkTheme .cfgProductInfo:after,.cfgDarkTheme .cfgProductInfo:before{box-sizing:inherit}.cfgDarkTheme .cfgProductInfo *{box-sizing:border-box}.cfgDarkTheme .cfgProductInfo :after,.cfgDarkTheme .cfgProductInfo :before{box-sizing:inherit}.cfgDarkTheme .cfgProductInfo__left{flex:1 1 auto;min-width:0;overflow:hidden}.cfgDarkTheme .cfgProductInfo__right{align-items:flex-end;display:flex;flex-direction:column;flex:1 0 auto;margin-left:1em;max-width:.333333333;min-width:0}.cfgDarkTheme .cfgProductInfo__name{display:block;font-size:1.6em;font-weight:600;line-height:1.33;margin:0}.cfgDarkTheme .cfgProductInfo__number{font-size:1.3em;font-weight:400;line-height:1.38;margin:0}.cfgDarkTheme .cfgCenteredLoading{box-sizing:border-box;align-items:center;display:flex;flex-direction:column;height:100%;justify-content:center;width:100%}.cfgDarkTheme .cfgCenteredLoading:after,.cfgDarkTheme .cfgCenteredLoading:before{box-sizing:inherit}.cfgDarkTheme .cfgCenteredLoading *{box-sizing:border-box}.cfgDarkTheme .cfgCenteredLoading :after,.cfgDarkTheme .cfgCenteredLoading :before{box-sizing:inherit}.cfgDarkTheme .cfgOverlayLoading{box-sizing:border-box;align-items:center;background-color:#333;bottom:0;display:flex;flex-direction:column;justify-content:center;left:0;position:absolute;right:0;top:0;z-index:1000}.cfgDarkTheme .cfgOverlayLoading:after,.cfgDarkTheme .cfgOverlayLoading:before{box-sizing:inherit}.cfgDarkTheme .cfgOverlayLoading *{box-sizing:border-box}.cfgDarkTheme .cfgOverlayLoading :after,.cfgDarkTheme .cfgOverlayLoading :before{box-sizing:inherit}.cfgDarkTheme .cfgOverlayLoading--clickThrough{background-color:transparent;pointer-events:none}.cfgDarkTheme .cfgOverlayLoading--clickThrough .cfgLoadingWithText{padding:2em 2em 1.8em;border-radius:.8em;background-color:#333;opacity:.8;border:.1em solid hsla(0,0%,100%,.15)}.cfgDarkTheme .cfgOverlayLoading--fullWindow{position:fixed;z-index:1001}.cfgDarkTheme .cfgLoadingWithText{box-sizing:border-box;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;text-align:center}.cfgDarkTheme .cfgLoadingWithText:after,.cfgDarkTheme .cfgLoadingWithText:before{box-sizing:inherit}.cfgDarkTheme .cfgLoadingWithText *{box-sizing:border-box}.cfgDarkTheme .cfgLoadingWithText :after,.cfgDarkTheme .cfgLoadingWithText :before{box-sizing:inherit}.cfgDarkTheme .cfgLoadingWithText__text{color:#fff;font-weight:600;margin-top:.5em;font-size:1.6em}.cfgDarkTheme .cfgLoading{box-sizing:border-box;animation:rotate 1.1s linear 0s infinite;border-radius:100%;border:.5em solid hsla(0,0%,100%,.15);border-bottom-color:#fff;display:inline-block;height:3em;width:3em}.cfgDarkTheme .cfgLoading:after,.cfgDarkTheme .cfgLoading:before{box-sizing:inherit}.cfgDarkTheme .cfgLoading *{box-sizing:border-box}.cfgDarkTheme .cfgLoading :after,.cfgDarkTheme .cfgLoading :before{box-sizing:inherit}.cfgDarkTheme .cfgLoading--small{border-width:.4em;height:2em;width:2em}@keyframes rotate{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.cfgDarkTheme .cfgSlider{box-sizing:border-box;flex:1;margin:0;padding:0;min-height:2.8em;background:transparent;font:inherit}.cfgDarkTheme .cfgSlider:after,.cfgDarkTheme .cfgSlider:before{box-sizing:inherit}.cfgDarkTheme .cfgSlider *{box-sizing:border-box}.cfgDarkTheme .cfgSlider :after,.cfgDarkTheme .cfgSlider :before{box-sizing:inherit}.cfgDarkTheme .cfgSlider,.cfgDarkTheme .cfgSlider::-webkit-slider-thumb{-webkit-appearance:none}.cfgDarkTheme .cfgSlider::-webkit-slider-runnable-track{box-sizing:border-box;border:none;height:.2em;background:#adadad}.cfgDarkTheme .cfgSlider::-moz-range-track{box-sizing:border-box;border:none;height:.2em;background:#adadad}.cfgDarkTheme .cfgSlider::-ms-track{box-sizing:border-box;border:none;height:.2em;background:#adadad}.cfgDarkTheme .cfgSlider::-webkit-slider-thumb{margin-top:-1.3em;box-sizing:border-box;border:none;width:2.8em;height:2.8em;border-radius:50%;background:#333;box-shadow:0 .15em .45em .05em #adadad}.cfgDarkTheme .cfgSlider::-moz-range-thumb{box-sizing:border-box;border:none;width:2.8em;height:2.8em;border-radius:50%;background:#333;box-shadow:0 .15em .45em .05em #adadad}.cfgDarkTheme .cfgSlider::-ms-thumb{margin-top:0;box-sizing:border-box;border:none;width:2.8em;height:2.8em;border-radius:50%;background:#333;box-shadow:0 .15em .45em .05em #adadad}.cfgDarkTheme .cfgSlider::-ms-tooltip{display:none}.cfgDarkTheme .cfgCheckmark{box-sizing:border-box;display:inline-block;width:100%;height:100%}.cfgDarkTheme .cfgCheckmark:after,.cfgDarkTheme .cfgCheckmark:before{box-sizing:inherit}.cfgDarkTheme .cfgCheckmark *{box-sizing:border-box}.cfgDarkTheme .cfgCheckmark :after,.cfgDarkTheme .cfgCheckmark :before{box-sizing:inherit}.cfgDarkTheme .cfgCheckmark__container{transition:transform .4s;transform:translateY(17px)}.cfgDarkTheme .cfgCheckmark__line{stroke:#fff;stroke-linecap:round;stroke-width:12;transform-origin:50px 50px;transition:transform .4s,stroke .4s}.cfgDarkTheme .cfgCheckmark__lineLeft{stroke:#fff;transform:rotate(40deg) translateY(24px) translateX(18px)}.cfgDarkTheme .cfgCheckmark__lineRight{stroke:#fff;transform:rotate(-50deg) translateY(-2px) translateX(-3px)}.cfgDarkTheme .cfgCheckmark__border{border:.2em solid #5b5963;border-radius:.3em}.cfgDarkTheme .cfgCheckmark__border,.cfgDarkTheme .cfgCheckmark__border--active{align-items:center;display:flex;flex:0 0 auto;height:2.2em;justify-content:center;pointer-events:none;-webkit-user-select:none;user-select:none;width:2.2em}.cfgDarkTheme .cfgCheckmark__border--active{border:.2em solid #fff;border-radius:.3em}.cfgDarkTheme .cfgChevron{box-sizing:border-box;display:inline-block;width:100%}.cfgDarkTheme .cfgChevron:after,.cfgDarkTheme .cfgChevron:before{box-sizing:inherit}.cfgDarkTheme .cfgChevron *{box-sizing:border-box}.cfgDarkTheme .cfgChevron :after,.cfgDarkTheme .cfgChevron :before{box-sizing:inherit}.cfgDarkTheme .cfgChevron__container{transition:transform .4s}.cfgDarkTheme .cfgChevron__container--down{transform:translateY(13px)}.cfgDarkTheme .cfgChevron__container--up{transform:translateY(-13px)}.cfgDarkTheme .cfgChevron__line{stroke-linecap:round;stroke-width:10;transform-origin:50px 50px;transition:transform .4s,stroke .4s}.cfgDarkTheme .cfgChevron__lineLeft--active,.cfgDarkTheme .cfgChevron__lineRight--active{stroke:#fff}.cfgDarkTheme .cfgChevron__lineLeft--passive,.cfgDarkTheme .cfgChevron__lineRight--passive{stroke:#6a6a6a}.cfgDarkTheme .cfgChevron__lineLeft--down{transform:rotate(40deg)}.cfgDarkTheme .cfgChevron__lineLeft--up,.cfgDarkTheme .cfgChevron__lineRight--down{transform:rotate(-40deg)}.cfgDarkTheme .cfgChevron__lineRight--up{transform:rotate(40deg)}

package/dist/css/web-ui.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/scss/_utilities.scss","../../src/scss/web-ui.scss","../../src/scss/_button.scss","../../src/scss/_mixins.scss","../../src/scss/_themed.scss","../../src/scss/_configurator.scss","../../src/scss/_variables.scss","../../src/scss/_expandable.scss","../../src/scss/_hr.scss","../../src/scss/_feature-item.scss","../../src/scss/_option-tree.scss","../../src/scss/_product-information.scss","../../src/scss/_loading.scss","../../src/scss/_slider.scss","../../src/scss/icons/_checkmark.scss","../../src/scss/icons/_chevron.scss"],"names":[],"mappings":"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A,qBAAA,CYNC,oBAAA,CACA,Ud+qBF,CEzqBC,qCAEC,kBF0qBF,CEnqBC,cAVA,qBFgrBD,CE/qBC,uCAEC,kBFgrBF,CctrBE,uBACC,wBdwrBH,CctrBG,6BACC,0BdwrBJ,CcrrBG,2BACC,2BdurBJ,CcnrBE,kBACC,oBAAA,CACA,eAAA,CACA,0BAAA,CACA,mCdqrBH,CchrBG,6DACC,WdkrBJ,CchrBG,+DACC,cdkrBJ,Cc7qBG,4BACC,uBd+qBJ,CcxqBG,uDACC,wBd6qBJ,Cc1qBG,2BACC,uBd4qBJ,CC5sBC,yBCRA,qBAAA,CDRA,oBAAA,CACA,4BAAA,CACA,aE6EC,CF5ED,kBAAA,CACA,yBAAA,CACA,eAAA,CACA,eAAA,CACA,YAAA,CACA,iBDouBD,CEnuBC,+DAEC,kBFouBF,CE7tBC,2BAVA,qBF0uBD,CEzuBC,iEAEC,kBF0uBF,CC3uBC,+BCNA,+CFovBD,CCpuBC,4BCZA,qBFmvBD,CElvBC,qEAEC,kBFmvBF,CE5uBC,8BAVA,qBFyvBD,CExvBC,uEAEC,kBFyvBF,CC7uBG,mDACC,eD+uBJ,CIvwBC,+BFQA,qBAAA,CAgBA,iIAAA,CErBC,cCNa,CDOb,aDgF4C,CC/E5C,WJywBF,CErwBC,2EAEC,kBFswBF,CE/vBC,iCAVA,qBF4wBD,CE3wBC,6EAEC,kBF4wBF,CI/wBC,qCACC,gCAAA,CACA,yBAAA,CACA,iBJixBF,CI/wBE,8CACC,cJixBH,CI7wBC,mCACC,eJ+wBF,CI5wBC,gCFdA,qBAAA,CEgBC,iBAAA,CACA,YAAA,CACA,wBAAA,CAAA,gBJ8wBF,CE/xBC,6EAEC,kBFgyBF,CEzxBC,kCAVA,qBFsyBD,CEryBC,+EAEC,kBFsyBF,CIrxBE,uCACC,YJuxBH,CInxBC,sCFzBA,qBAAA,CE2BC,aDiD4C,CChD5C,WAAA,CACA,UJqxBF,CEjzBC,yFAEC,kBFkzBF,CE3yBC,wCAVA,qBFwzBD,CEvzBC,2FAEC,kBFwzBF,CI3xBC,0CACC,sCACC,YAAA,CACA,kBJ6xBD,CI3xBC,uDACC,YAAA,CACA,WJ6xBF,CI1xBC,wDACC,YAAA,CACA,WAAA,CACA,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,YAbe,CAcf,iBAAA,CACA,eT6FC,CS5FD,sCZ4vCD,CYntCE,sCACC,YZqtCH,CalxCC,4BXYA,qBAAA,CWNC,oBAAA,CACA,UAAA,CACA,WbkxCF,CE7wCC,qEAEC,kBF8wCF,CEvwCC,8BAVA,qBFoxCD,CEnxCC,uEAEC,kBFoxCF,CazxCE,uCACC,wBAAA,CACA,0Bb2xCH,CaxxCE,kCACC,WVmGD,CUlGC,oBAAA,CACA,eAAA,CACA,0BAAA,CACA,mCb0xCH,CavxCE,sCACC,WV2FD,CU1FC,yDbyxCH,CatxCE,uCACC,WVsFD,CUrFC,0DbwxCH,CanxCE,oCXDD,yBAAA,CAYA,kBFoxCD,Ca7xCG,gFXJF,kBAAA,CAEA,YAAA,CACA,aAAA,CACA,YAAA,CACA,sBAAA,CACA,mBAAA,CACA,wBAAA,CAAA,gBAAA,CACA,WFqyCD,CazyCG,4CXHF,sBAAA,CAYA,kBFgyCD,Cc90CC,0BZYA,qBAAA,CYNC,oBAAA,CACA,Ud80CF,CEx0CC,iEAEC,kBFy0CF,CEl0CC,4BAVA,qBF+0CD,CE90CC,mEAEC,kBF+0CF,Ccr1CE,qCACC,wBdu1CH,Ccr1CG,2CACC,0Bdu1CJ,Ccp1CG,yCACC,2Bds1CJ,Ccl1CE,gCACC,oBAAA,CACA,eAAA,CACA,0BAAA,CACA,mCdo1CH,Cc/0CG,yFACC,Wdi1CJ,Cc/0CG,2FACC,cdi1CJ,Cc50CG,0CACC,uBd80CJ,Ccv0CG,mFACC,wBd40CJ,Ccz0CG,yCACC,uBd20CJ","file":"web-ui.css","sourcesContent":["/**\n * Web UI Utilities\n */\n\n.cfgMl1 {\n\tmargin-left: 1em;\n}\n\n.cfgMb1 {\n\tmargin-bottom: 1em;\n}\n\n.cfgTextOverflow {\n\toverflow: hidden;\n\ttext-overflow: ellipsis;\n\twhite-space: nowrap;\n}\n","/**\n* Web UI Styling\n*/\n\n@use \"themed\";\n\n@include themed.themed(themed.$lightTheme);\n\n.cfgDarkTheme {\n\t@include themed.themed(themed.$darkTheme);\n}\n","/**\n * Web UI Product information\n */\n@use \"mixins\";\n\n@mixin styles($textColor, $borderColor, $focusOutlineInnerColor, $focusOutlineOuterColor) {\n\t@include mixins.cfgRootStyles;\n\tdisplay: inline-block;\n\tbackground-color: transparent;\n\tcolor: $textColor;\n\tborder-radius: 0.3em;\n\tborder: 0.1em solid $borderColor;\n\tfont-size: 1.3em;\n\tfont-weight: 500;\n\toutline: none;\n\tpadding: 0.4em 0.8em;\n\n\t&:focus {\n\t\t@include mixins.focusOutline($focusOutlineInnerColor, $focusOutlineOuterColor);\n\t}\n}\n\n@mixin classes($textColor, $borderColor, $focusOutlineInnerColor, $focusOutlineOuterColor) {\n\t.cfgButton {\n\t\t@include styles($textColor, $borderColor, $focusOutlineInnerColor, $focusOutlineOuterColor);\n\t}\n\n\t.cfgButtonRow {\n\t\t@include mixins.cfgRootStyles;\n\t\t&__button {\n\t\t\t&:nth-child(n + 2) {\n\t\t\t\tmargin-left: 1em;\n\t\t\t}\n\t\t}\n\t}\n}\n","@mixin noButtonLook {\n\tappearance: none;\n\tfont-family: inherit;\n\tfont-size: inherit;\n\tcolor: inherit;\n\tbackground: none;\n\tborder: none;\n\tpadding: 0;\n}\n\n@mixin focusOutline($focusOutlineInnerColor, $focusOutlineOuterColor) {\n\tbox-shadow: 0 0 0 0.075em $focusOutlineInnerColor, 0 0 0 0.2em $focusOutlineOuterColor;\n}\n\n@mixin borderBox {\n\tbox-sizing: border-box;\n\t&:before,\n\t&:after {\n\t\tbox-sizing: inherit;\n\t}\n}\n\n@mixin cfgRootStyles {\n\t@include borderBox;\n\n\t* {\n\t\t@include borderBox;\n\t}\n}\n\n@mixin cfgDefaultFont {\n\tfont-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif,\n\t\t\"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n}\n\n@mixin cfgCheckAndRadio($color) {\n\talign-items: center;\n\tborder: 0.2em solid $color;\n\tdisplay: flex;\n\tflex: 0 0 auto;\n\theight: 2.2em;\n\tjustify-content: center;\n\tpointer-events: none;\n\tuser-select: none;\n\twidth: 2.2em;\n}\n\n@mixin cfgCheckbox($color) {\n\t@include cfgCheckAndRadio($color);\n\tborder-radius: 0.3em;\n}\n\n@mixin cfgRadio($color) {\n\t@include cfgCheckAndRadio($color);\n\tborder-radius: 50%;\n}\n","@use \"sass:map\";\n@use \"sass:color\";\n\n@use \"variables\" as v;\n\n// Components\n@use \"button\";\n\n@use \"configurator\";\n@use \"expandable\";\n@use \"hr\";\n@use \"feature-item\";\n@use \"option-tree\";\n@use \"product-information\";\n@use \"loading\";\n@use \"slider\";\n\n// Icons\n@use \"icons/checkmark\";\n@use \"icons/chevron\";\n\n// Utilities\n@use \"utilities\";\n\n/* Colors */\n\n$black: hsl(0, 0%, 0%) !default;\n$white: hsl(0, 0%, 100%) !default;\n$darkGrey: hsl(0, 0%, 15%) !default;\n\n/* Specific colors */\n\n$border: hsl(252, 5%, 79%) !default;\n$borderDark: hsl(0, 0%, 73%) !default;\n$focusOutlineOuter: hsl(0, 0%, 13%) !default;\n$sliderTrack: #666 !default;\n$spinner2: hsla(0, 0%, 0%, 0.15);\n$grayText: hsl(0, 0%, 50%) !default;\n$text: hsl(0, 0%, 20%) !default;\n/* As convention we assume the default theme when naming colors,\n   as attempts at generic naming often leads to confussion */\n$lightTheme: (\n\t\"black\": $black,\n\t\"border\": $border,\n\t\"borderDark\": $borderDark,\n\t\"checkButtonChecked\": $black,\n\t\"checkButtonUnchecked\": $border,\n\t\"chevronActive\": $black,\n\t\"chevronPassive\": $borderDark,\n\t\"divider\": $border,\n\t\"focusOutlineInner\": $white,\n\t\"focusOutlineOuter\": $text,\n\t\"grayText\": $grayText,\n\t\"overlayBackground\": $white,\n\t\"sliderThumb\": $white,\n\t\"sliderThumbShadow\": $sliderTrack,\n\t\"sliderTrack\": $sliderTrack,\n\t\"spinner1\": $black,\n\t\"spinner2\": $spinner2,\n\t\"text\": $text,\n\t\"white\": $white,\n) !default;\n\n@function invertLightness($color) {\n\t@return color.change(\n\t\t$color,\n\t\t$lightness: 100 - color.lightness($color) * 0.8\n\t); // We scale with 80% to have a bit more contrast\n}\n\n@function invertLightnessList($list) {\n\t@each $key, $color in $list {\n\t\t$list: map.set($list, $key, invertLightness($color));\n\t}\n\t@return $list;\n}\n\n$darkTheme: invertLightnessList($lightTheme);\n\n$themes: (\n\t\"light\": $lightTheme,\n\t\"dark\": $darkTheme,\n);\n\n@mixin themed($ct, $baseFontSize: v.$baseFontSize, $overlayingZIndex: v.$overlayingZIndex) {\n\t@include button.classes(\n\t\tmap.get($ct, \"text\"),\n\t\tmap.get($ct, \"borderDark\"),\n\t\tmap.get($ct, \"focusOutlineInner\"),\n\t\tmap.get($ct, \"focusOutlineOuter\")\n\t);\n\t@include configurator.classes($baseFontSize, map.get($ct, \"text\"), map.get($ct, \"divider\"));\n\t@include expandable.classes;\n\t@include hr.classes(map.get($ct, \"divider\"));\n\t@include feature-item.classes(\n\t\tmap.get($ct, \"text\"),\n\t\tmap.get($ct, \"grayText\"),\n\t\tmap.get($ct, \"checkButtonUnchecked\"),\n\t\tmap.get($ct, \"checkButtonChecked\"),\n\t\tmap.get($ct, \"focusOutlineInner\"),\n\t\tmap.get($ct, \"focusOutlineOuter\")\n\t);\n\t@include option-tree.classes;\n\t@include product-information.classes(map.get($ct, \"text\"));\n\t@include loading.classes(\n\t\tmap.get($ct, \"black\"),\n\t\tmap.get($ct, \"spinner1\"),\n\t\tmap.get($ct, \"spinner2\"),\n\t\tmap.get($ct, \"overlayBackground\"),\n\t\t$overlayingZIndex\n\t);\n\n\t@include slider.classes(\n\t\tmap.get($ct, \"sliderTrack\"),\n\t\tmap.get($ct, \"sliderThumb\"),\n\t\tmap.get($ct, \"sliderThumbShadow\")\n\t);\n\t@include checkmark.classes(\n\t\tmap.get($ct, \"checkButtonChecked\"),\n\t\tmap.get($ct, \"checkButtonUnchecked\")\n\t);\n\t@include chevron.classes(map.get($ct, \"chevronActive\"), map.get($ct, \"chevronPassive\"));\n}\n","/**\n * Web UI Configurator\n */\n\n@use \"mixins\";\n\n@mixin classes($fontSize, $textColor, $headerUnderlineColor) {\n\t.cfgConfigurator {\n\t\t@include mixins.cfgRootStyles;\n\t\t@include mixins.cfgDefaultFont;\n\t\tfont-size: $fontSize;\n\t\tcolor: $textColor;\n\t\tmin-width: 0;\n\t}\n\n\t.cfgConfiguratorHeader {\n\t\tborder-bottom: 0.1em solid $headerUnderlineColor;\n\t\tpadding: 1.7em 1.7em 1.9em;\n\t\tposition: relative;\n\n\t\t&__actions {\n\t\t\tmargin-top: 1em;\n\t\t}\n\t}\n\n\t.cfgConfiguratorTree {\n\t\tpadding-top: 1em;\n\t}\n\n\t.cfgCanvasWrapper {\n\t\t@include mixins.cfgRootStyles;\n\t\tposition: relative;\n\t\theight: 50rem;\n\t\tuser-select: none;\n\n\t\t& canvas {\n\t\t\toutline: none;\n\t\t}\n\t}\n\n\t.cfgConfiguratorWrapper {\n\t\t@include mixins.cfgRootStyles;\n\t\tcolor: $textColor;\n\t\theight: 100%;\n\t\twidth: 100%;\n\t}\n\n\t@media screen and (orientation: landscape) {\n\t\t.cfgConfiguratorWrapper {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: row;\n\n\t\t\t& > .cfgConfigurator {\n\t\t\t\tflex: 0 1 40%;\n\t\t\t\theight: 100%;\n\t\t\t}\n\n\t\t\t& .cfgCanvasWrapper {\n\t\t\t\tflex: 0 1 60%;\n\t\t\t\theight: 85vh;\n\t\t\t\toverflow: hidden;\n\t\t\t\tposition: sticky;\n\t\t\t\ttop: 0;\n\t\t\t}\n\t\t}\n\t}\n}\n","/**\n * Web UI Variables\n */\n\t\n$baseFontSize: 10px !default; // We use 10px for easy em conversion\n$overlayingZIndex: 1000 !default;\n","@use \"mixins\";\n\n@mixin classes {\n\t.cfgExpandableHeadingRow {\n\t\t@include mixins.cfgRootStyles;\n\t\t@include mixins.noButtonLook;\n\t\talign-items: stretch;\n\t\tdisplay: flex;\n\t\theight: 3.9em;\n\t\toutline: 0;\n\t\tposition: relative;\n\t\twidth: 100%;\n\n\t\t&--expandable {\n\t\t\tcursor: pointer;\n\t\t}\n\n\t\t&__title {\n\t\t\talign-items: center;\n\t\t\tdisplay: flex;\n\t\t\tflex: 1 1 auto;\n\t\t\tfont-size: 1.5em;\n\t\t\tfont-weight: 500;\n\t\t\tjustify-content: flex-start;\n\t\t}\n\n\t\t&__icon {\n\t\t\talign-items: center;\n\t\t\tdisplay: flex;\n\t\t\tflex: 0 0 5em;\n\t\t\tjustify-content: center;\n\t\t\tpadding: 0 1.5em;\n\t\t}\n\n\t\t@content;\n\t}\n}\n","@use \"mixins\";\n\n@mixin styles($color) {\n\t@include mixins.cfgRootStyles;\n\tborder: 0;\n\tborder-bottom: 0.1em solid $color;\n\tpadding: 0;\n\tmargin: 0;\n}\n\n@mixin classes($color) {\n\t.cfgHr {\n\t\t@include styles($color);\n\t\t@content;\n\t}\n}\n","/**\n * Web UI Feature item\n */\n\n@use \"mixins\";\n\n@mixin classes(\n\t$textColor,\n\t$grayTextColor,\n\t$checkButtonUncheckedColor,\n\t$checkButtonCheckedColor,\n\t$focusOutlineInnerColor,\n\t$focusOutlineOuterColor\n) {\n\t.cfgThumbnailImage {\n\t\tborder-radius: 0.7em;\n\t\tdisplay: inline-block;\n\t\theight: 3em;\n\t\twidth: 3em;\n\t}\n\n\t.cfgThumbnailPlaceholder {\n\t\talign-items: center;\n\t\tdisplay: flex;\n\t\tflex: 0 0 4.2em;\n\t\tjustify-content: flex-start;\n\t}\n\n\t.cfgFeatureItem {\n\t\t@include mixins.cfgRootStyles;\n\n\t\tcolor: $textColor;\n\n\t\t&__dropdown {\n\t\t\t@include mixins.noButtonLook;\n\t\t\talign-items: stretch;\n\t\t\tdisplay: flex;\n\t\t\theight: 3.9em;\n\t\t\toutline: 0;\n\t\t\tposition: relative;\n\t\t\twidth: 100%;\n\t\t\tcursor: pointer;\n\t\t}\n\n\t\t&--optional {\n\t\t\tmargin-top: 1em;\n\t\t}\n\n\t\t&__hiddenInput {\n\t\t\tleft: -99999px;\n\t\t\topacity: 0;\n\t\t\tposition: absolute;\n\t\t\tz-index: -1;\n\t\t}\n\n\t\t&__radio {\n\t\t\t@include mixins.cfgRadio($checkButtonUncheckedColor);\n\t\t}\n\n\t\t&__checkbox {\n\t\t\t@include mixins.cfgCheckbox($checkButtonUncheckedColor);\n\t\t}\n\n\t\t/* The &-syntax brings in the entire path, so the second part of this rule must be explicit */\n\n\t\t&__hiddenInput:focus ~ .cfgFeatureItem__radio,\n\t\t&__hiddenInput:focus ~ .cfgFeatureItem__checkbox {\n\t\t\t@include mixins.focusOutline($focusOutlineInnerColor, $focusOutlineOuterColor);\n\t\t}\n\n\t\t&__hiddenInput:checked ~ .cfgFeatureItem__radio {\n\t\t\t@include mixins.cfgRadio($checkButtonCheckedColor);\n\t\t}\n\t\t&__hiddenInput:checked ~ .cfgFeatureItem__checkbox {\n\t\t\t@include mixins.cfgCheckbox($checkButtonCheckedColor);\n\t\t}\n\t}\n\n\t.cfgFeatureItemOptional__titleWrapper,\n\t.cfgFeatureItemOption__titleWrapper {\n\t\tflex: 1 1 auto;\n\t\tmargin-left: 1em;\n\t}\n\n\t.cfgFeatureItemOptional__title,\n\t.cfgFeatureItemOption__title {\n\t\tfont-size: 1.5em;\n\t}\n\n\t.cfgFeatureItemOption__price {\n\t\tfont-weight: 600;\n\t\tfont-size: 0.75em;\n\t\tcolor: $grayTextColor;\n\t}\n\n\t.cfgOptionTree--subLevel .cfgFeatureItem__hr {\n\t\tdisplay: none;\n\t}\n\n\t.cfgFeatureItemOption {\n\t\talign-items: center;\n\t\tdisplay: flex;\n\t}\n\n\t.cfgFeatureItemOptional {\n\t\talign-items: center;\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\tmargin-top: 0.5em;\n\n\t\t&__header {\n\t\t\tfont-size: 1.2em;\n\t\t\tfont-weight: 600;\n\t\t\tmargin: 0 0 0.3em 0;\n\t\t\tpadding: 0;\n\t\t\ttext-transform: uppercase;\n\t\t}\n\t}\n\n\t/* The last themathic break (hr) we move under the next thematic break so it appears as one */\n\t.cfgAdditionalProduct .cfgFeatureItem:last-child .cfgFeatureItem__hr {\n\t\tmargin-bottom: -0.1em;\n\t}\n}\n","/**\n * Web UI Option tree\n */\n\n@use \"mixins\";\n\n@mixin classes {\n\t.cfgOptionTree {\n\t\t@include mixins.cfgRootStyles;\n\n\t\tlist-style: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\n\t\t&--topLevel {\n\t\t\tpadding-left: 1.7em;\n\t\t}\n\n\t\t&--indent {\n\t\t\tmargin-left: 3.2em;\n\t\t}\n\n\t\t&--compThumb {\n\t\t\tmargin-left: 4.2em;\n\t\t}\n\n\t\t@content;\n\t}\n}\n","/**\n * Web UI Product information\n */\n\n@use \"sass:math\";\n@use \"mixins\";\n\n@mixin classes($textColor) {\n\t.cfgProductInfo {\n\t\t@include mixins.cfgRootStyles;\n\n\t\tcolor: $textColor;\n\n\t\tdisplay: flex;\n\n\t\t&__left {\n\t\t\tflex: 1 1 auto;\n\t\t\tmin-width: 0;\n\t\t\toverflow: hidden;\n\t\t}\n\n\t\t&__right {\n\t\t\talign-items: flex-end;\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: column;\n\t\t\tflex: 1 0 auto;\n\t\t\tmargin-left: 1em;\n\t\t\tmax-width: math.div(1, 3);\n\t\t\tmin-width: 0;\n\t\t}\n\n\t\t&__name {\n\t\t\tdisplay: block;\n\t\t\tfont-size: 1.6em;\n\t\t\tfont-weight: 600;\n\t\t\tline-height: 1.33;\n\t\t\tmargin: 0;\n\t\t}\n\n\t\t&__number {\n\t\t\tfont-size: 1.3em;\n\t\t\tfont-weight: 400;\n\t\t\tline-height: 1.38;\n\t\t\tmargin: 0;\n\t\t}\n\n\t\t@content;\n\t}\n}\n","/**\n * Web UI Loading\n */\n\n@use \"mixins\";\n\n@mixin classes(\n\t$textColor,\n\t$spinnerColor1,\n\t$spinnerColor2,\n\t$overlayBackgroundColor,\n\t$overlayingZIndex\n) {\n\t.cfgCenteredLoading {\n\t\t@include mixins.cfgRootStyles;\n\t\talign-items: center;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\theight: 100%;\n\t\tjustify-content: center;\n\t\twidth: 100%;\n\t}\n\n\t.cfgOverlayLoading {\n\t\t@include mixins.cfgRootStyles;\n\n\t\talign-items: center;\n\t\tbackground-color: $overlayBackgroundColor;\n\t\tbottom: 0;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tjustify-content: center;\n\t\tleft: 0;\n\t\tposition: absolute;\n\t\tright: 0;\n\t\ttop: 0;\n\t\tz-index: $overlayingZIndex;\n\n\t\t&--clickThrough {\n\t\t\tbackground-color: transparent;\n\t\t\tpointer-events: none;\n\n\t\t\t.cfgLoadingWithText {\n\t\t\t\tpadding: 2em 2em 1.8em;\n\t\t\t\tborder-radius: 0.8em;\n\t\t\t\tbackground-color: $overlayBackgroundColor;\n\t\t\t\topacity: 0.8;\n\t\t\t\tborder: 0.1em solid $spinnerColor2;\n\t\t\t}\n\t\t}\n\n\t\t&--fullWindow {\n\t\t\tposition: fixed;\n\t\t\tz-index: #{$overlayingZIndex + 1};\n\t\t}\n\t}\n\n\t.cfgLoadingWithText {\n\t\t@include mixins.cfgRootStyles;\n\t\t@include mixins.cfgDefaultFont;\n\n\t\ttext-align: center;\n\n\t\t&__text {\n\t\t\tcolor: $textColor;\n\t\t\tfont-weight: 600;\n\t\t\tmargin-top: 0.5em;\n\t\t\tfont-size: 1.6em;\n\t\t}\n\t}\n\n\t.cfgLoading {\n\t\t@include mixins.cfgRootStyles;\n\n\t\tanimation: rotate 1.1s linear 0s infinite;\n\t\tborder-radius: 100%;\n\t\tborder: 0.5em solid $spinnerColor2;\n\t\tborder-bottom-color: $spinnerColor1;\n\t\tdisplay: inline-block;\n\t\theight: 3em;\n\t\twidth: 3em;\n\n\t\t&--small {\n\t\t\tborder-width: 0.4em;\n\t\t\theight: 2em;\n\t\t\twidth: 2em;\n\t\t}\n\t}\n\n\t@keyframes rotate {\n\t\tfrom {\n\t\t\ttransform: rotate(0deg);\n\t\t}\n\t\tto {\n\t\t\ttransform: rotate(360deg);\n\t\t}\n\t}\n}\n","@use \"mixins\";\n\n// The origins of this SCSS file is here:\n// https://css-tricks.com/sliding-nightmare-understanding-range-input/\n\n$trackHeight: 0.2em !default;\n$thumbDiameter: 2.8em !default;\n\n@mixin track($trackColor) {\n\tbox-sizing: border-box;\n\tborder: none;\n\theight: $trackHeight;\n\tbackground: $trackColor;\n}\n\n@mixin thumb($thumbColor, $thumbShadowColor) {\n\tbox-sizing: border-box;\n\tborder: none;\n\twidth: $thumbDiameter;\n\theight: $thumbDiameter;\n\tborder-radius: 50%;\n\tbackground: $thumbColor;\n\tbox-shadow: 0 0.15em 0.45em 0.05em $thumbShadowColor;\n}\n\n@mixin classes($trackColor, $thumbColor, $thumbShadowColor) {\n\t.cfgSlider {\n\t\t@include mixins.cfgRootStyles;\n\n\t\t&,\n\t\t&::-webkit-slider-thumb {\n\t\t\t-webkit-appearance: none;\n\t\t}\n\n\t\tflex: 1;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\tmin-height: $thumbDiameter;\n\t\tbackground: transparent;\n\t\tfont: inherit;\n\n\t\t&::-webkit-slider-runnable-track {\n\t\t\t@include track($trackColor);\n\t\t}\n\t\t&::-moz-range-track {\n\t\t\t@include track($trackColor);\n\t\t}\n\t\t&::-ms-track {\n\t\t\t@include track($trackColor);\n\t\t}\n\n\t\t&::-webkit-slider-thumb {\n\t\t\tmargin-top: 0.5 * ($trackHeight - $thumbDiameter);\n\t\t\t@include thumb($thumbColor, $thumbShadowColor);\n\t\t}\n\t\t&::-moz-range-thumb {\n\t\t\t@include thumb($thumbColor, $thumbShadowColor);\n\t\t}\n\t\t&::-ms-thumb {\n\t\t\tmargin-top: 0;\n\t\t\t@include thumb($thumbColor, $thumbShadowColor);\n\t\t}\n\n\t\t&::-ms-tooltip {\n\t\t\tdisplay: none;\n\t\t}\n\n\t\t@content;\n\t}\n}\n","@use \"../mixins\";\n\n@mixin classes($colorActive, $colorPassive) {\n\t.cfgCheckmark {\n\t\t/* The distance-units inside the checkmark are px even though everything\n\t\t   else is relative units. The SVG has its own coordinate space. */\n\n\t\t@include mixins.cfgRootStyles;\n\n\t\tdisplay: inline-block;\n\t\twidth: 100%;\n\t\theight: 100%;\n\n\t\t&__container {\n\t\t\ttransition: transform 0.4s;\n\t\t\ttransform: translateY(17px);\n\t\t}\n\n\t\t&__line {\n\t\t\tstroke: $colorActive;\n\t\t\tstroke-linecap: round;\n\t\t\tstroke-width: 12;\n\t\t\ttransform-origin: 50px 50px;\n\t\t\ttransition: transform 0.4s, stroke 0.4s;\n\t\t}\n\n\t\t&__lineLeft {\n\t\t\tstroke: $colorActive;\n\t\t\ttransform: rotate(40deg) translateY(24px) translateX(18px);\n\t\t}\n\n\t\t&__lineRight {\n\t\t\tstroke: $colorActive;\n\t\t\ttransform: rotate(-50deg) translateY(-2px) translateX(-3px);\n\t\t}\n\n\t\t@content;\n\n\t\t&__border {\n\t\t\t@include mixins.cfgCheckbox($colorPassive);\n\t\t\t&--active {\n\t\t\t\t@include mixins.cfgCheckbox($colorActive);\n\t\t\t}\n\t\t}\n\t}\n}\n","@use \"../mixins\";\n\n@mixin classes($activeColor, $passiveColor) {\n\t.cfgChevron {\n\t\t/* The distance-units inside the chevron are px even though everything\n\t\t   else is relative units. The SVG has its own coordinate space. */\n\n\t\t@include mixins.cfgRootStyles;\n\n\t\tdisplay: inline-block;\n\t\twidth: 100%;\n\n\t\t&__container {\n\t\t\ttransition: transform 0.4s;\n\n\t\t\t&--down {\n\t\t\t\ttransform: translateY(13px);\n\t\t\t}\n\n\t\t\t&--up {\n\t\t\t\ttransform: translateY(-13px);\n\t\t\t}\n\t\t}\n\n\t\t&__line {\n\t\t\tstroke-linecap: round;\n\t\t\tstroke-width: 10;\n\t\t\ttransform-origin: 50px 50px;\n\t\t\ttransition: transform 0.4s, stroke 0.4s;\n\t\t}\n\n\t\t&__lineLeft,\n\t\t&__lineRight {\n\t\t\t&--active {\n\t\t\t\tstroke: $activeColor;\n\t\t\t}\n\t\t\t&--passive {\n\t\t\t\tstroke: $passiveColor;\n\t\t\t}\n\t\t}\n\n\t\t&__lineLeft {\n\t\t\t&--down {\n\t\t\t\ttransform: rotate(40deg);\n\t\t\t}\n\t\t\t&--up {\n\t\t\t\ttransform: rotate(-40deg);\n\t\t\t}\n\t\t}\n\t\t&__lineRight {\n\t\t\t&--down {\n\t\t\t\ttransform: rotate(-40deg);\n\t\t\t}\n\n\t\t\t&--up {\n\t\t\t\ttransform: rotate(40deg);\n\t\t\t}\n\t\t}\n\n\t\t@content;\n\t}\n}\n"]}
+{"version":3,"sources":["../../src/scss/_range-view.scss","../../src/scss/web-ui.scss","../../src/scss/_utilities.scss","../../src/scss/_button.scss","../../src/scss/_mixins.scss","../../src/scss/_themed.scss","../../src/scss/_configurator.scss","../../src/scss/_variables.scss","../../src/scss/_expandable.scss","../../src/scss/_hr.scss","../../src/scss/_feature-item.scss","../../src/scss/_option-tree.scss","../../src/scss/_product-information.scss","../../src/scss/_loading.scss","../../src/scss/_slider.scss","../../src/scss/icons/_checkmark.scss","../../src/scss/icons/_chevron.scss"],"names":[],"mappings":"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DdmpBH,Cc9oBE,sBXDD,yBAAA,CAYA,kBH+oBD,CcxpBG,oDXJF,kBAAA,CAEA,YAAA,CACA,aAAA,CACA,YAAA,CACA,sBAAA,CACA,mBAAA,CACA,wBAAA,CAAA,gBAAA,CACA,WHgqBD,CcpqBG,8BXHF,sBAAA,CAYA,kBH2pBD,CezsBC,YZYA,qBAAA,CYNC,oBAAA,CACA,Uf0sBF,CGpsBC,qCAEC,kBHqsBF,CG9rBC,cAVA,qBH2sBD,CG1sBC,uCAEC,kBH2sBF,CejtBE,uBACC,wBfmtBH,CejtBG,6BACC,0BfmtBJ,CehtBG,2BACC,2BfktBJ,Ce9sBE,kBACC,oBAAA,CACA,eAAA,CACA,0BAAA,CACA,mCfgtBH,Ce3sBG,6DACC,Wf6sBJ,Ce3sBG,+DACC,cf6sBJ,CexsBG,4BACC,uBf0sBJ,CensBG,uDACC,wBfwsBJ,CersBG,2BACC,uBfusBJ,CEvuBC,yBCRA,qBAAA,CDRA,oBAAA,CACA,4BAAA,CACA,aE8EC,CF7ED,kBAAA,CACA,yBAAA,CACA,eAAA,CACA,eAAA,CACA,YAAA,CACA,iBF+vBD,CG9vBC,+DAEC,kBH+vBF,CGxvBC,2BAVA,qBHqwBD,CGpwBC,iEAEC,kBHqwBF,CEtwBC,+BCNA,+CH+wBD,CE/vBC,4BCZA,qBH8wBD,CG7wBC,qEAEC,kBH8wBF,CGvwBC,8BAVA,qBHoxBD,CGnxBC,uEAEC,kBHoxBF,CExwBG,mDACC,eF0wBJ,CKlyBC,+BFQA,qBAAA,CAgBA,iIAAA,CErBC,cCNa,CDOb,aDiF4C,CChF5C,WLoyBF,CGhyBC,2EAEC,kBHiyBF,CG1xBC,iCAVA,qBHuyBD,CGtyBC,6EAEC,kBHuyBF,CK1yBC,qCACC,gCAAA,CACA,yBAAA,CACA,iBL4yBF,CK1yBE,8CACC,cL4yBH,CKxyBC,mCACC,eL0yBF,CKvyBC,gCFdA,qBAAA,CEgBC,iBAAA,CACA,YAAA,CACA,wBAAA,CAAA,gBLyyBF,CG1zBC,6EAEC,kBH2zBF,CGpzBC,kCAVA,qBHi0BD,CGh0BC,+EAEC,kBHi0BF,CKhzBE,uCACC,YLkzBH,CK9yBC,sCFzBA,qBAAA,CE2BC,aDkD4C,C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","file":"web-ui.css","sourcesContent":[".cfgRangeView {\n\t&__inputs {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t}\n\n\t&__number-input {\n\t\tfont-size: 1.5em;\n\t\tflex-grow: 1;\n\t\ttext-align: right;\n\t}\n\n\t&__unit-label {\n\t\tfont-size: 1.5em;\n\t\tmargin-left: 0.3em;\n\t}\n\n\t&__slider-input.cfgSlider {\n\t\tmargin-left: 1em;\n\t\tflex-grow: 3;\n\t}\n\n\t&__error {\n\t\tmargin-top: 1em;\n\t\tfont-size: 1.5em;\n\t\tcolor: #b00;\n\t}\n}\n","/**\n* Web UI Styling\n*/\n\n@use \"themed\";\n\n@include themed.themed(themed.$lightTheme);\n\n.cfgDarkTheme {\n\t@include themed.themed(themed.$darkTheme);\n}\n","/**\n * Web UI Utilities\n */\n\n.cfgMl1 {\n\tmargin-left: 1em;\n}\n\n.cfgMt1 {\n\tmargin-top: 1em;\n}\n\n.cfgMb1 {\n\tmargin-bottom: 1em;\n}\n\n.cfgTextOverflow {\n\toverflow: hidden;\n\ttext-overflow: ellipsis;\n\twhite-space: nowrap;\n}\n","/**\n * Web UI Product information\n */\n@use \"mixins\";\n\n@mixin styles($textColor, $borderColor, $focusOutlineInnerColor, $focusOutlineOuterColor) {\n\t@include mixins.cfgRootStyles;\n\tdisplay: inline-block;\n\tbackground-color: transparent;\n\tcolor: $textColor;\n\tborder-radius: 0.3em;\n\tborder: 0.1em solid $borderColor;\n\tfont-size: 1.3em;\n\tfont-weight: 500;\n\toutline: none;\n\tpadding: 0.4em 0.8em;\n\n\t&:focus {\n\t\t@include mixins.focusOutline($focusOutlineInnerColor, $focusOutlineOuterColor);\n\t}\n}\n\n@mixin classes($textColor, $borderColor, $focusOutlineInnerColor, $focusOutlineOuterColor) {\n\t.cfgButton {\n\t\t@include styles($textColor, $borderColor, $focusOutlineInnerColor, $focusOutlineOuterColor);\n\t}\n\n\t.cfgButtonRow {\n\t\t@include mixins.cfgRootStyles;\n\t\t&__button {\n\t\t\t&:nth-child(n + 2) {\n\t\t\t\tmargin-left: 1em;\n\t\t\t}\n\t\t}\n\t}\n}\n","@mixin noButtonLook {\n\tappearance: none;\n\tfont-family: inherit;\n\tfont-size: inherit;\n\tcolor: inherit;\n\tbackground: none;\n\tborder: none;\n\tpadding: 0;\n}\n\n@mixin focusOutline($focusOutlineInnerColor, $focusOutlineOuterColor) {\n\tbox-shadow: 0 0 0 0.075em $focusOutlineInnerColor, 0 0 0 0.2em $focusOutlineOuterColor;\n}\n\n@mixin borderBox {\n\tbox-sizing: border-box;\n\t&:before,\n\t&:after {\n\t\tbox-sizing: inherit;\n\t}\n}\n\n@mixin cfgRootStyles {\n\t@include borderBox;\n\n\t* {\n\t\t@include borderBox;\n\t}\n}\n\n@mixin cfgDefaultFont {\n\tfont-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif,\n\t\t\"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n}\n\n@mixin cfgCheckAndRadio($color) {\n\talign-items: center;\n\tborder: 0.2em solid $color;\n\tdisplay: flex;\n\tflex: 0 0 auto;\n\theight: 2.2em;\n\tjustify-content: center;\n\tpointer-events: none;\n\tuser-select: none;\n\twidth: 2.2em;\n}\n\n@mixin cfgCheckbox($color) {\n\t@include cfgCheckAndRadio($color);\n\tborder-radius: 0.3em;\n}\n\n@mixin cfgRadio($color) {\n\t@include cfgCheckAndRadio($color);\n\tborder-radius: 50%;\n}\n","@use \"sass:map\";\n@use \"sass:color\";\n\n@use \"variables\" as v;\n\n// Components\n@use \"button\";\n\n@use \"configurator\";\n@use \"expandable\";\n@use \"hr\";\n@use \"feature-item\";\n@use \"option-tree\";\n@use \"product-information\";\n@use \"loading\";\n@use \"slider\";\n@use \"range-view\";\n\n// Icons\n@use \"icons/checkmark\";\n@use \"icons/chevron\";\n\n// Utilities\n@use \"utilities\";\n\n/* Colors */\n\n$black: hsl(0, 0%, 0%) !default;\n$white: hsl(0, 0%, 100%) !default;\n$darkGrey: hsl(0, 0%, 15%) !default;\n\n/* Specific colors */\n\n$border: hsl(252, 5%, 79%) !default;\n$borderDark: hsl(0, 0%, 73%) !default;\n$focusOutlineOuter: hsl(0, 0%, 13%) !default;\n$sliderTrack: #666 !default;\n$spinner2: hsla(0, 0%, 0%, 0.15);\n$grayText: hsl(0, 0%, 50%) !default;\n$text: hsl(0, 0%, 20%) !default;\n/* As convention we assume the default theme when naming colors,\n   as attempts at generic naming often leads to confussion */\n$lightTheme: (\n\t\"black\": $black,\n\t\"border\": $border,\n\t\"borderDark\": $borderDark,\n\t\"checkButtonChecked\": $black,\n\t\"checkButtonUnchecked\": $border,\n\t\"chevronActive\": $black,\n\t\"chevronPassive\": $borderDark,\n\t\"divider\": $border,\n\t\"focusOutlineInner\": $white,\n\t\"focusOutlineOuter\": $text,\n\t\"grayText\": $grayText,\n\t\"overlayBackground\": $white,\n\t\"sliderThumb\": $white,\n\t\"sliderThumbShadow\": $sliderTrack,\n\t\"sliderTrack\": $sliderTrack,\n\t\"spinner1\": $black,\n\t\"spinner2\": $spinner2,\n\t\"text\": $text,\n\t\"white\": $white,\n) !default;\n\n@function invertLightness($color) {\n\t@return color.change(\n\t\t$color,\n\t\t$lightness: 100 - color.lightness($color) * 0.8\n\t); // We scale with 80% to have a bit more contrast\n}\n\n@function invertLightnessList($list) {\n\t@each $key, $color in $list {\n\t\t$list: map.set($list, $key, invertLightness($color));\n\t}\n\t@return $list;\n}\n\n$darkTheme: invertLightnessList($lightTheme);\n\n$themes: (\n\t\"light\": $lightTheme,\n\t\"dark\": $darkTheme,\n);\n\n@mixin themed($ct, $baseFontSize: v.$baseFontSize, $overlayingZIndex: v.$overlayingZIndex) {\n\t@include button.classes(\n\t\tmap.get($ct, \"text\"),\n\t\tmap.get($ct, \"borderDark\"),\n\t\tmap.get($ct, \"focusOutlineInner\"),\n\t\tmap.get($ct, \"focusOutlineOuter\")\n\t);\n\t@include configurator.classes($baseFontSize, map.get($ct, \"text\"), map.get($ct, \"divider\"));\n\t@include expandable.classes;\n\t@include hr.classes(map.get($ct, \"divider\"));\n\t@include feature-item.classes(\n\t\tmap.get($ct, \"text\"),\n\t\tmap.get($ct, \"grayText\"),\n\t\tmap.get($ct, \"checkButtonUnchecked\"),\n\t\tmap.get($ct, \"checkButtonChecked\"),\n\t\tmap.get($ct, \"focusOutlineInner\"),\n\t\tmap.get($ct, \"focusOutlineOuter\")\n\t);\n\t@include option-tree.classes;\n\t@include product-information.classes(map.get($ct, \"text\"));\n\t@include loading.classes(\n\t\tmap.get($ct, \"black\"),\n\t\tmap.get($ct, \"spinner1\"),\n\t\tmap.get($ct, \"spinner2\"),\n\t\tmap.get($ct, \"overlayBackground\"),\n\t\t$overlayingZIndex\n\t);\n\n\t@include slider.classes(\n\t\tmap.get($ct, \"sliderTrack\"),\n\t\tmap.get($ct, \"sliderThumb\"),\n\t\tmap.get($ct, \"sliderThumbShadow\")\n\t);\n\t@include checkmark.classes(\n\t\tmap.get($ct, \"checkButtonChecked\"),\n\t\tmap.get($ct, \"checkButtonUnchecked\")\n\t);\n\t@include chevron.classes(map.get($ct, \"chevronActive\"), map.get($ct, \"chevronPassive\"));\n}\n","/**\n * Web UI Configurator\n */\n\n@use \"mixins\";\n\n@mixin classes($fontSize, $textColor, $headerUnderlineColor) {\n\t.cfgConfigurator {\n\t\t@include mixins.cfgRootStyles;\n\t\t@include mixins.cfgDefaultFont;\n\t\tfont-size: $fontSize;\n\t\tcolor: $textColor;\n\t\tmin-width: 0;\n\t}\n\n\t.cfgConfiguratorHeader {\n\t\tborder-bottom: 0.1em solid $headerUnderlineColor;\n\t\tpadding: 1.7em 1.7em 1.9em;\n\t\tposition: relative;\n\n\t\t&__actions {\n\t\t\tmargin-top: 1em;\n\t\t}\n\t}\n\n\t.cfgConfiguratorTree {\n\t\tpadding-top: 1em;\n\t}\n\n\t.cfgCanvasWrapper {\n\t\t@include mixins.cfgRootStyles;\n\t\tposition: relative;\n\t\theight: 50rem;\n\t\tuser-select: none;\n\n\t\t& canvas {\n\t\t\toutline: none;\n\t\t}\n\t}\n\n\t.cfgConfiguratorWrapper {\n\t\t@include mixins.cfgRootStyles;\n\t\tcolor: $textColor;\n\t\theight: 100%;\n\t\twidth: 100%;\n\t}\n\n\t@media screen and (orientation: landscape) {\n\t\t.cfgConfiguratorWrapper {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: row;\n\n\t\t\t& > .cfgConfigurator {\n\t\t\t\tflex: 0 1 40%;\n\t\t\t\theight: 100%;\n\t\t\t}\n\n\t\t\t& .cfgCanvasWrapper {\n\t\t\t\tflex: 0 1 60%;\n\t\t\t\theight: 85vh;\n\t\t\t\toverflow: hidden;\n\t\t\t\tposition: sticky;\n\t\t\t\ttop: 0;\n\t\t\t}\n\t\t}\n\t}\n}\n","/**\n * Web UI Variables\n */\n\t\n$baseFontSize: 10px !default; // We use 10px for easy em conversion\n$overlayingZIndex: 1000 !default;\n","@use \"mixins\";\n\n@mixin classes {\n\t.cfgExpandableHeadingRow {\n\t\t@include mixins.cfgRootStyles;\n\t\t@include mixins.noButtonLook;\n\t\talign-items: stretch;\n\t\tdisplay: flex;\n\t\theight: 3.9em;\n\t\toutline: 0;\n\t\tposition: relative;\n\t\twidth: 100%;\n\n\t\t&--expandable {\n\t\t\tcursor: pointer;\n\t\t}\n\n\t\t&__title {\n\t\t\talign-items: center;\n\t\t\tdisplay: flex;\n\t\t\tflex: 1 1 auto;\n\t\t\tfont-size: 1.5em;\n\t\t\tfont-weight: 500;\n\t\t\tjustify-content: flex-start;\n\t\t}\n\n\t\t&__icon {\n\t\t\talign-items: center;\n\t\t\tdisplay: flex;\n\t\t\tflex: 0 0 5em;\n\t\t\tjustify-content: center;\n\t\t\tpadding: 0 1.5em;\n\t\t}\n\n\t\t@content;\n\t}\n}\n","@use \"mixins\";\n\n@mixin styles($color) {\n\t@include mixins.cfgRootStyles;\n\tborder: 0;\n\tborder-bottom: 0.1em solid $color;\n\tpadding: 0;\n\tmargin: 0;\n}\n\n@mixin classes($color) {\n\t.cfgHr {\n\t\t@include styles($color);\n\t\t@content;\n\t}\n}\n","/**\n * Web UI Feature item\n */\n\n@use \"mixins\";\n\n@mixin classes(\n\t$textColor,\n\t$grayTextColor,\n\t$checkButtonUncheckedColor,\n\t$checkButtonCheckedColor,\n\t$focusOutlineInnerColor,\n\t$focusOutlineOuterColor\n) {\n\t.cfgThumbnailImage {\n\t\tborder-radius: 0.7em;\n\t\tdisplay: inline-block;\n\t\theight: 3em;\n\t\twidth: 3em;\n\t}\n\n\t.cfgThumbnailPlaceholder {\n\t\talign-items: center;\n\t\tdisplay: flex;\n\t\tflex: 0 0 4.2em;\n\t\tjustify-content: flex-start;\n\t}\n\n\t.cfgFeatureItem {\n\t\t@include mixins.cfgRootStyles;\n\n\t\tcolor: $textColor;\n\n\t\t&__dropdown {\n\t\t\t@include mixins.noButtonLook;\n\t\t\talign-items: stretch;\n\t\t\tdisplay: flex;\n\t\t\theight: 3.9em;\n\t\t\toutline: 0;\n\t\t\tposition: relative;\n\t\t\twidth: 100%;\n\t\t\tcursor: pointer;\n\t\t}\n\n\t\t&--optional {\n\t\t\tmargin-top: 1em;\n\t\t}\n\n\t\t&__hiddenInput {\n\t\t\tleft: -99999px;\n\t\t\topacity: 0;\n\t\t\tposition: absolute;\n\t\t\tz-index: -1;\n\t\t}\n\n\t\t&__radio {\n\t\t\t@include mixins.cfgRadio($checkButtonUncheckedColor);\n\t\t}\n\n\t\t&__checkbox {\n\t\t\t@include mixins.cfgCheckbox($checkButtonUncheckedColor);\n\t\t}\n\n\t\t/* The &-syntax brings in the entire path, so the second part of this rule must be explicit */\n\n\t\t&__hiddenInput:focus ~ .cfgFeatureItem__radio,\n\t\t&__hiddenInput:focus ~ .cfgFeatureItem__checkbox {\n\t\t\t@include mixins.focusOutline($focusOutlineInnerColor, $focusOutlineOuterColor);\n\t\t}\n\n\t\t&__hiddenInput:checked ~ .cfgFeatureItem__radio {\n\t\t\t@include mixins.cfgRadio($checkButtonCheckedColor);\n\t\t}\n\t\t&__hiddenInput:checked ~ .cfgFeatureItem__checkbox {\n\t\t\t@include mixins.cfgCheckbox($checkButtonCheckedColor);\n\t\t}\n\t}\n\n\t.cfgFeatureItemOptional__titleWrapper,\n\t.cfgFeatureItemOption__titleWrapper {\n\t\tflex: 1 1 auto;\n\t\tmargin-left: 1em;\n\t}\n\n\t.cfgFeatureItemOptional__title,\n\t.cfgFeatureItemOption__title {\n\t\tfont-size: 1.5em;\n\t}\n\n\t.cfgFeatureItemOption__price {\n\t\tfont-weight: 600;\n\t\tfont-size: 0.75em;\n\t\tcolor: $grayTextColor;\n\t}\n\n\t.cfgOptionTree--subLevel .cfgFeatureItem__hr {\n\t\tdisplay: none;\n\t}\n\n\t.cfgFeatureItemOption {\n\t\talign-items: center;\n\t\tdisplay: flex;\n\t}\n\n\t.cfgFeatureItemOptional {\n\t\talign-items: center;\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\tmargin-top: 0.5em;\n\n\t\t&__header {\n\t\t\tfont-size: 1.2em;\n\t\t\tfont-weight: 600;\n\t\t\tmargin: 0 0 0.3em 0;\n\t\t\tpadding: 0;\n\t\t\ttext-transform: uppercase;\n\t\t}\n\t}\n\n\t/* The last themathic break (hr) we move under the next thematic break so it appears as one */\n\t.cfgAdditionalProduct .cfgFeatureItem:last-child .cfgFeatureItem__hr {\n\t\tmargin-bottom: -0.1em;\n\t}\n}\n","/**\n * Web UI Option tree\n */\n\n@use \"mixins\";\n\n@mixin classes {\n\t.cfgOptionTree {\n\t\t@include mixins.cfgRootStyles;\n\n\t\tlist-style: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\n\t\t&--topLevel {\n\t\t\tpadding-left: 1.7em;\n\t\t}\n\n\t\t&--indent {\n\t\t\tmargin-left: 3.2em;\n\t\t}\n\n\t\t&--compThumb {\n\t\t\tmargin-left: 4.2em;\n\t\t}\n\n\t\t@content;\n\t}\n}\n","/**\n * Web UI Product information\n */\n\n@use \"sass:math\";\n@use \"mixins\";\n\n@mixin classes($textColor) {\n\t.cfgProductInfo {\n\t\t@include mixins.cfgRootStyles;\n\n\t\tcolor: $textColor;\n\n\t\tdisplay: flex;\n\n\t\t&__left {\n\t\t\tflex: 1 1 auto;\n\t\t\tmin-width: 0;\n\t\t\toverflow: hidden;\n\t\t}\n\n\t\t&__right {\n\t\t\talign-items: flex-end;\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: column;\n\t\t\tflex: 1 0 auto;\n\t\t\tmargin-left: 1em;\n\t\t\tmax-width: 0.333333333;\n\t\t\tmin-width: 0;\n\t\t}\n\n\t\t&__name {\n\t\t\tdisplay: block;\n\t\t\tfont-size: 1.6em;\n\t\t\tfont-weight: 600;\n\t\t\tline-height: 1.33;\n\t\t\tmargin: 0;\n\t\t}\n\n\t\t&__number {\n\t\t\tfont-size: 1.3em;\n\t\t\tfont-weight: 400;\n\t\t\tline-height: 1.38;\n\t\t\tmargin: 0;\n\t\t}\n\n\t\t@content;\n\t}\n}\n","/**\n * Web UI Loading\n */\n\n@use \"mixins\";\n\n@mixin classes(\n\t$textColor,\n\t$spinnerColor1,\n\t$spinnerColor2,\n\t$overlayBackgroundColor,\n\t$overlayingZIndex\n) {\n\t.cfgCenteredLoading {\n\t\t@include mixins.cfgRootStyles;\n\t\talign-items: center;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\theight: 100%;\n\t\tjustify-content: center;\n\t\twidth: 100%;\n\t}\n\n\t.cfgOverlayLoading {\n\t\t@include mixins.cfgRootStyles;\n\n\t\talign-items: center;\n\t\tbackground-color: $overlayBackgroundColor;\n\t\tbottom: 0;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tjustify-content: center;\n\t\tleft: 0;\n\t\tposition: absolute;\n\t\tright: 0;\n\t\ttop: 0;\n\t\tz-index: $overlayingZIndex;\n\n\t\t&--clickThrough {\n\t\t\tbackground-color: transparent;\n\t\t\tpointer-events: none;\n\n\t\t\t.cfgLoadingWithText {\n\t\t\t\tpadding: 2em 2em 1.8em;\n\t\t\t\tborder-radius: 0.8em;\n\t\t\t\tbackground-color: $overlayBackgroundColor;\n\t\t\t\topacity: 0.8;\n\t\t\t\tborder: 0.1em solid $spinnerColor2;\n\t\t\t}\n\t\t}\n\n\t\t&--fullWindow {\n\t\t\tposition: fixed;\n\t\t\tz-index: #{$overlayingZIndex + 1};\n\t\t}\n\t}\n\n\t.cfgLoadingWithText {\n\t\t@include mixins.cfgRootStyles;\n\t\t@include mixins.cfgDefaultFont;\n\n\t\ttext-align: center;\n\n\t\t&__text {\n\t\t\tcolor: $textColor;\n\t\t\tfont-weight: 600;\n\t\t\tmargin-top: 0.5em;\n\t\t\tfont-size: 1.6em;\n\t\t}\n\t}\n\n\t.cfgLoading {\n\t\t@include mixins.cfgRootStyles;\n\n\t\tanimation: rotate 1.1s linear 0s infinite;\n\t\tborder-radius: 100%;\n\t\tborder: 0.5em solid $spinnerColor2;\n\t\tborder-bottom-color: $spinnerColor1;\n\t\tdisplay: inline-block;\n\t\theight: 3em;\n\t\twidth: 3em;\n\n\t\t&--small {\n\t\t\tborder-width: 0.4em;\n\t\t\theight: 2em;\n\t\t\twidth: 2em;\n\t\t}\n\t}\n\n\t@keyframes rotate {\n\t\tfrom {\n\t\t\ttransform: rotate(0deg);\n\t\t}\n\t\tto {\n\t\t\ttransform: rotate(360deg);\n\t\t}\n\t}\n}\n","@use \"mixins\";\n\n// The origins of this SCSS file is here:\n// https://css-tricks.com/sliding-nightmare-understanding-range-input/\n\n$trackHeight: 0.2em !default;\n$thumbDiameter: 2.8em !default;\n\n@mixin track($trackColor) {\n\tbox-sizing: border-box;\n\tborder: none;\n\theight: $trackHeight;\n\tbackground: $trackColor;\n}\n\n@mixin thumb($thumbColor, $thumbShadowColor) {\n\tbox-sizing: border-box;\n\tborder: none;\n\twidth: $thumbDiameter;\n\theight: $thumbDiameter;\n\tborder-radius: 50%;\n\tbackground: $thumbColor;\n\tbox-shadow: 0 0.15em 0.45em 0.05em $thumbShadowColor;\n}\n\n@mixin classes($trackColor, $thumbColor, $thumbShadowColor) {\n\t.cfgSlider {\n\t\t@include mixins.cfgRootStyles;\n\n\t\t&,\n\t\t&::-webkit-slider-thumb {\n\t\t\t-webkit-appearance: none;\n\t\t}\n\n\t\tflex: 1;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\tmin-height: $thumbDiameter;\n\t\tbackground: transparent;\n\t\tfont: inherit;\n\n\t\t&::-webkit-slider-runnable-track {\n\t\t\t@include track($trackColor);\n\t\t}\n\t\t&::-moz-range-track {\n\t\t\t@include track($trackColor);\n\t\t}\n\t\t&::-ms-track {\n\t\t\t@include track($trackColor);\n\t\t}\n\n\t\t&::-webkit-slider-thumb {\n\t\t\tmargin-top: 0.5 * ($trackHeight - $thumbDiameter);\n\t\t\t@include thumb($thumbColor, $thumbShadowColor);\n\t\t}\n\t\t&::-moz-range-thumb {\n\t\t\t@include thumb($thumbColor, $thumbShadowColor);\n\t\t}\n\t\t&::-ms-thumb {\n\t\t\tmargin-top: 0;\n\t\t\t@include thumb($thumbColor, $thumbShadowColor);\n\t\t}\n\n\t\t&::-ms-tooltip {\n\t\t\tdisplay: none;\n\t\t}\n\n\t\t@content;\n\t}\n}\n","@use \"../mixins\";\n\n@mixin classes($colorActive, $colorPassive) {\n\t.cfgCheckmark {\n\t\t/* The distance-units inside the checkmark are px even though everything\n\t\t   else is relative units. The SVG has its own coordinate space. */\n\n\t\t@include mixins.cfgRootStyles;\n\n\t\tdisplay: inline-block;\n\t\twidth: 100%;\n\t\theight: 100%;\n\n\t\t&__container {\n\t\t\ttransition: transform 0.4s;\n\t\t\ttransform: translateY(17px);\n\t\t}\n\n\t\t&__line {\n\t\t\tstroke: $colorActive;\n\t\t\tstroke-linecap: round;\n\t\t\tstroke-width: 12;\n\t\t\ttransform-origin: 50px 50px;\n\t\t\ttransition: transform 0.4s, stroke 0.4s;\n\t\t}\n\n\t\t&__lineLeft {\n\t\t\tstroke: $colorActive;\n\t\t\ttransform: rotate(40deg) translateY(24px) translateX(18px);\n\t\t}\n\n\t\t&__lineRight {\n\t\t\tstroke: $colorActive;\n\t\t\ttransform: rotate(-50deg) translateY(-2px) translateX(-3px);\n\t\t}\n\n\t\t@content;\n\n\t\t&__border {\n\t\t\t@include mixins.cfgCheckbox($colorPassive);\n\t\t\t&--active {\n\t\t\t\t@include mixins.cfgCheckbox($colorActive);\n\t\t\t}\n\t\t}\n\t}\n}\n","@use \"../mixins\";\n\n@mixin classes($activeColor, $passiveColor) {\n\t.cfgChevron {\n\t\t/* The distance-units inside the chevron are px even though everything\n\t\t   else is relative units. The SVG has its own coordinate space. */\n\n\t\t@include mixins.cfgRootStyles;\n\n\t\tdisplay: inline-block;\n\t\twidth: 100%;\n\n\t\t&__container {\n\t\t\ttransition: transform 0.4s;\n\n\t\t\t&--down {\n\t\t\t\ttransform: translateY(13px);\n\t\t\t}\n\n\t\t\t&--up {\n\t\t\t\ttransform: translateY(-13px);\n\t\t\t}\n\t\t}\n\n\t\t&__line {\n\t\t\tstroke-linecap: round;\n\t\t\tstroke-width: 10;\n\t\t\ttransform-origin: 50px 50px;\n\t\t\ttransition: transform 0.4s, stroke 0.4s;\n\t\t}\n\n\t\t&__lineLeft,\n\t\t&__lineRight {\n\t\t\t&--active {\n\t\t\t\tstroke: $activeColor;\n\t\t\t}\n\t\t\t&--passive {\n\t\t\t\tstroke: $passiveColor;\n\t\t\t}\n\t\t}\n\n\t\t&__lineLeft {\n\t\t\t&--down {\n\t\t\t\ttransform: rotate(40deg);\n\t\t\t}\n\t\t\t&--up {\n\t\t\t\ttransform: rotate(-40deg);\n\t\t\t}\n\t\t}\n\t\t&__lineRight {\n\t\t\t&--down {\n\t\t\t\ttransform: rotate(-40deg);\n\t\t\t}\n\n\t\t\t&--up {\n\t\t\t\ttransform: rotate(40deg);\n\t\t\t}\n\t\t}\n\n\t\t@content;\n\t}\n}\n"]}

package/dist/scss/_product-information.scss

@@ -25,7 +25,7 @@
 			flex-direction: column;
 			flex: 1 0 auto;
 			margin-left: 1em;
-			max-width: math.div(1, 3);
+			max-width: 0.333333333;
 			min-width: 0;
 		}
 

package/dist/scss/_range-view.scss

@@ -0,0 +1,28 @@
+.cfgRangeView {
+	&__inputs {
+		display: flex;
+		align-items: center;
+	}
+
+	&__number-input {
+		font-size: 1.5em;
+		flex-grow: 1;
+		text-align: right;
+	}
+
+	&__unit-label {
+		font-size: 1.5em;
+		margin-left: 0.3em;
+	}
+
+	&__slider-input.cfgSlider {
+		margin-left: 1em;
+		flex-grow: 3;
+	}
+
+	&__error {
+		margin-top: 1em;
+		font-size: 1.5em;
+		color: #b00;
+	}
+}

package/dist/scss/_themed.scss

@@ -14,6 +14,7 @@
 @use "product-information";
 @use "loading";
 @use "slider";
+@use "range-view";
 
 // Icons
 @use "icons/checkmark";

package/dist/scss/_utilities.scss

@@ -6,6 +6,10 @@
 	margin-left: 1em;
 }
 
+.cfgMt1 {
+	margin-top: 1em;
+}
+
 .cfgMb1 {
 	margin-bottom: 1em;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@configura/web-ui",
-	"version": "1.3.0-alpha.2",
+	"version": "1.3.0-alpha.7",
 	"license": "Apache-2.0",
 	"type": "module",
 	"main": "dist/index.js",
@@ -32,7 +32,7 @@
 		]
 	},
 	"dependencies": {
-		"@configura/web-api": "^1.3.0-alpha.2"
+		"@configura/web-api": "^1.3.0-alpha.7"
 	},
 	"devDependencies": {
 		"@babel/preset-env": "^7.14.4",
@@ -64,5 +64,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "ecc00b624310c03a59c0ac5933e06df92326436d"
+	"gitHead": "1c5c089a31e6662b6da365b7038254e70a1cc8ff"
 }