@commercetools-frontend/experimental-components 0.0.2 → 0.0.3

package/dist/styles.css

@@ -0,0 +1,1322 @@
+/*  imported from search-input.module.css  */
+
+.search-input-module__block___1uM-y {
+  display: inline-flex;
+  flex-direction: row;
+  align-items: flex-start;
+  width: 100%;
+  max-width: 800px;
+}
+
+.search-input-module__container___9u6if {
+  position: relative;
+  flex-grow: 1;
+}
+
+.search-input-module__input-container___mJnyZ {
+  height: var(--spacing-xl);
+}
+
+.search-input-module__input-container___mJnyZ > input {
+  padding-right: calc(var(--spacing-xl) * 2);
+  border-color: var(--color-neutral-60);
+}
+
+.search-input-module__input-container-disabled___23jR8 > input {
+  border-color: var(--color-neutral);
+}
+
+.search-input-module__input-container-hoverable___1xjqn > input:hover {
+  border-color: var(--color-primary);
+}
+
+.search-input-module__input-container-granular___33Pm- {
+  border-color: var(--color-primary);
+  position: relative;
+  right: 6px;
+}
+
+.search-input-module__search-icon-container___cbHQY {
+  background-color: transparent;
+  border-color: transparent;
+  position: absolute;
+  right: 9px;
+  top: 5px;
+}
+
+.search-input-module__clear-icon-container___3RQvu {
+  background-color: transparent;
+  border-color: transparent;
+  position: absolute;
+  right: 36px;
+  top: 8px;
+  z-index: 2;
+}
+
+.search-input-module__clear-icon-container-granular___1mbin {
+  right: 41px;
+}
+
+.search-input-module__search-icon-container-hoverable___1kTwJ {
+  cursor: pointer;
+}
+
+.search-input-module__search-icon-container-granular___3fAsR {
+  right: 15px;
+}
+
+.search-input-module__hidden___z07GX {
+  display: none !important;
+}
+
+.search-input-module__action___1GqGT {
+  flex-shrink: 1;
+  margin-left: var(--spacing-s);
+}
+/*  imported from modal-content-layout.module.css  */
+
+:root {
+  /* save toolbar */
+  --height-save-toolbar: 57px;
+
+  /* additional spacing at the bottom of view that has a save-toolbar */
+  --spacing-bottom-with-save-toolbar: calc(
+    var(--height-save-toolbar) + var(--spacing-m)
+  );
+}
+
+/* Modal */
+
+.modal-content-layout-module__container___m-8MJ {
+  padding: var(--spacing-m) var(--spacing-m) 0;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.modal-content-layout-module__header___3s8J- {
+  position: relative;
+  border-bottom: 2px var(--color-neutral) solid;
+  padding-bottom: var(--spacing-m);
+  margin: 0;
+}
+
+.modal-content-layout-module__subtitle___W3B06 {
+  font-size: 1rem;
+  color: var(--color-solid);
+  margin-top: var(--spacing-s);
+  flex-grow: 1;
+}
+
+.modal-content-layout-module__content___UpG03 {
+  flex: 1;
+  overflow-y: auto;
+  padding: var(--spacing-m) 0;
+}
+
+/*
+ * manually set the margin bottom of the last child in the container. We need
+ * to do this in order to add some more space to the bottom of the scroll
+ * container. Just using a padding-bottom in the .content-container does not
+ * work in firefox unfortunately. It is a reported bug in FF that is not fixed.
+ */
+.modal-content-layout-module__content___UpG03 > :last-child {
+  margin-bottom: var(--spacing-bottom-with-save-toolbar);
+}
+
+.modal-content-layout-module__footer___TCdQU {
+  padding: var(--spacing-m) 0;
+}
+
+.modal-content-layout-module__button-close___2ThEn {
+  float: right;
+  margin-top: calc(var(--spacing-xs) * -1);
+}
+
+.modal-content-layout-module__subheader___61dMZ {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.modal-content-layout-module__controls___2AEk5 {
+  position: absolute;
+  right: 0;
+  bottom: var(--spacing-s);
+}
+/*  imported from required-indicator.module.css  */
+
+.required-indicator-module__colored____YUFm {
+  color: var(--color-warning);
+}
+/*  imported from selectable-field-search-input.module.css  */
+
+.selectable-field-search-input-module__container___z2ltR {
+  width: 100%;
+  position: relative;
+  display: flex;
+  z-index: 3;
+  max-width: 800px;
+}
+
+.selectable-field-search-input-module__search-mode-menu___Od6Le {
+  border-radius: var(--border-radius-6);
+  border: 1px solid var(--color-primary);
+  margin-top: 2px;
+  position: absolute;
+}
+/*  imported from validated-input.module.css  */
+
+.validated-input-module__invalid___380EL {
+  /* this needs !important because react-select has a :focus style that
+    stops the border colour being set unless the element is blurred */
+  border-color: var(--color-error) !important;
+}
+
+.validated-input-module__container___3L2KB {
+  display: inline;
+}
+/*  imported from autocomplete.module.css  */
+
+.autocomplete-module__container___sBqGo {
+  position: relative;
+}
+/*  imported from checkbox-field.module.css  */
+
+/* Custom checkbox */
+
+.checkbox-field-module__custom-check___3uPdz {
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+}
+
+.checkbox-field-module__check-element___3wMNq {
+  background: url('./radio-check-icons.png') 0 0;
+  flex: 0 1 auto;
+  display: block;
+  height: 18px;
+  width: 18px;
+}
+
+.checkbox-field-module__check-text___3M3mq {
+  margin-left: var(--spacing-s);
+  flex: 1 0 auto;
+}
+
+.checkbox-field-module__custom-check___3uPdz:hover .checkbox-field-module__check-element___3wMNq {
+  background-position: -24px 0;
+}
+
+.checkbox-field-module__input-checkbox___F2rLu {
+  display: none;
+}
+
+.checkbox-field-module__input-checkbox___F2rLu:checked ~ .checkbox-field-module__check-element___3wMNq {
+  background-position: -48px 0;
+}
+
+.checkbox-field-module__disabled___1HVC5 {
+  cursor: not-allowed !important;
+}
+
+.checkbox-field-module__custom-check___3uPdz:hover.checkbox-field-module__disabled___1HVC5 .checkbox-field-module__check-element___3wMNq {
+  background-position: 0 0 !important;
+}
+/*  imported from expandable-field.module.css  */
+
+.expandable-field-module__expandable-field___1obGc {
+  /* @TODO: Investigate what this is */
+}
+/*  imported from label-range.module.css  */
+
+.label-range-module__label___3Tb0p {
+  font-size: 0.9rem;
+  font-weight: bold;
+}
+/*  imported from multi-value-search-input.module.css  */
+
+.multi-value-search-input-module__container___2u64d {
+  position: relative;
+}
+
+.multi-value-search-input-module__searchInput___363nj input {
+  border-color: var(--border-color-for-input);
+}
+
+.multi-value-search-input-module__searchInput___363nj input::placeholder {
+  color: var(--font-color-for-input-when-disabled);
+}
+
+.multi-value-search-input-module__submittingTip___2339U {
+  margin-top: var(--spacing-xs);
+  background: var(--background-color-for-input);
+  border: solid 1px var(--border-color-for-input-when-focused);
+  border-radius: var(--border-radius-for-input);
+  position: relative;
+  cursor: default;
+}
+
+.multi-value-search-input-module__submitting-tip-single___1LcNy {
+  padding: var(--spacing-s);
+  color: var(--font-color-for-input-when-disabled);
+}
+
+.multi-value-search-input-module__submitting-tip-content___IyuVb {
+  padding: var(--spacing-s);
+}
+
+.multi-value-search-input-module__submitting-tip-content-separate___3Y_CI {
+  padding-top: var(--spacing-s);
+}
+
+.multi-value-search-input-module__submitting-tip-content-hoverable___2TK6S:hover {
+  background-color: var(--color-neutral-95);
+  border-radius: var(--border-radius-for-input);
+}
+
+.multi-value-search-input-module__submitting-tip-content-separate-hoverable___3VUnV:hover {
+  background-color: var(--color-neutral-95);
+  border-bottom-left-radius: var(--border-radius-for-input);
+  border-bottom-right-radius: var(--border-radius-for-input);
+}
+/*  imported from numeric-format-input.module.css  */
+
+.numeric-format-input-module__invalid___3LcyE {
+  /* this needs !important because react-select has a :focus style that
+    stops the border colour being set unless the element is blurred */
+  border-color: var(--color-error) !important;
+  border: 1px solid;
+}
+
+.numeric-format-input-module__disabled___hb6h4 {
+  cursor: not-allowed;
+}
+/*  imported from throttled-field.module.css  */
+
+.throttled-field-module__size___324jx {
+  width: 100%;
+  height: inherit;
+}
+
+.throttled-field-module__input-text___3zFFp {
+  transition: 0.2s ease;
+  border-radius: 6px;
+  border-style: solid;
+  border-width: 1px;
+  color: var(--color-solid);
+  font-weight: 500;
+  font-size: 1rem;
+  font-family: 'Open Sans', sans-serif !important;
+  padding: 7.5px 10px;
+  outline: none;
+  box-shadow: none;
+  appearance: none;
+}
+
+.throttled-field-module__input-secondary___cFo9e {
+  background-color: var(--color-neutral-95);
+  border-color: var(--color-surface);
+  width: 100%;
+}
+
+.throttled-field-module__input-primary___26G3R {
+  border-color: var(--color-neutral);
+  background-color: var(--color-surface);
+}
+
+.throttled-field-module__textarea___3ZNEs {
+  width: 100%;
+  min-height: 36px;
+  resize: vertical;
+}
+
+.throttled-field-module__textarea-primary___24Wwt {
+  border-color: var(--color-neutral);
+  background-color: var(--color-surface);
+}
+
+.throttled-field-module__textarea-secondary___2rmFG {
+  background-color: var(--color-neutral-95);
+  border-color: var(--color-surface);
+  width: 100%;
+}
+
+.throttled-field-module__invalid___1yZLW {
+  /* this needs !important because react-select has a :focus style that
+    stops the border colour being set unless the element is blurred */
+  border-color: var(--color-error) !important;
+  border: 1px solid;
+}
+
+.throttled-field-module__disabled___qVj79 {
+  cursor: not-allowed;
+  background-color: var(--color-accent-98);
+  color: var(--color-solid);
+  opacity: 1; /* fix for mobile safari */
+}
+
+.throttled-field-module__granular___2LXJf {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  margin-left: 0;
+}
+/*  imported from button-group.module.css  */
+
+.button-group-module__btn-group___1AG0_ {
+  position: relative;
+  display: flex;
+  vertical-align: middle;
+}
+
+.button-group-module__btn-group___1AG0_ button {
+  position: relative;
+  float: left;
+  background: var(--color-surface);
+  box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24);
+}
+
+.button-group-module__btn-group___1AG0_ button + button {
+  border-left: solid 1px var(--color-neutral-90);
+}
+
+.button-group-module__btn-group___1AG0_ > button:first-of-type {
+  z-index: 2;
+}
+
+.button-group-module__btn-group___1AG0_ > button:not(:first-of-type):not(:last-child) {
+  border-radius: 0;
+}
+
+.button-group-module__btn-group___1AG0_ > button:first-of-type:not(:last-child) {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.button-group-module__btn-group___1AG0_ > button:last-child:not(:first-of-type) {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.button-group-module__btn-group___1AG0_ button.button-group-module__active___1wtks,
+.button-group-module__btn-group___1AG0_ button:hover {
+  background: var(--color-neutral-90);
+  opacity: 1;
+}
+
+.button-group-module__btn-group___1AG0_ button.button-group-module__disabled___FERF4 {
+  background: var(--color-neutral-90);
+  color: var(--color-neutral-60);
+}
+
+.button-group-module__btn-group___1AG0_ button i {
+  font-size: 1.538rem;
+}
+
+.button-group-module__icon-container___3Lolb {
+  display: flex;
+}
+/*  imported from button.module.css  */
+
+/* Generic button */
+
+.button-module__button___1OzVf {
+  background: var(--color-neutral);
+  border: none;
+  border-radius: 6px;
+  color: var(--color-solid);
+  cursor: pointer;
+  display: inline-block;
+  font-family: 'Open Sans', sans-serif;
+  font-size: 1rem;
+  padding: 7px 15px;
+  transition: background-color var(--transition-linear-80ms);
+  vertical-align: middle;
+  min-height: 32px;
+}
+
+/* Specific types of buttons */
+
+.button-module__cancel___1-jYL {
+  background: var(--color-surface);
+  border: 1px solid var(--color-neutral);
+}
+
+.button-module__confirm___-W92x {
+  background: var(--color-primary);
+  color: var(--color-surface);
+}
+
+.button-module__save___1-KXp {
+  color: var(--color-surface) !important;
+}
+
+.button-module__add___1fbPS {
+  background: var(--color-surface);
+  border: 1px solid var(--color-neutral);
+  color: var(--color-solid);
+  padding: 5.5px 15px 5.5px 10px;
+}
+
+.button-module__add-url___1e6xE {
+}
+
+.button-module__icon-add___2X7fc {
+  color: var(--color-neutral-60);
+  float: left;
+  font-size: 1rem;
+  margin: 3px 10px 0 0;
+}
+
+.button-module__icon-chain___1pvWT {
+  color: var(--color-neutral-60);
+  float: left;
+  font-size: 1.4rem;
+  margin: 0 10px 0 0;
+}
+
+.button-module__add___1fbPS:hover .button-module__icon-add___2X7fc,
+.button-module__add-url___1e6xE:hover .button-module__icon-chain___1pvWT {
+  color: var(--color-surface);
+}
+
+/* Base of switch buttons */
+
+.button-module__switch___2bt5z {
+  background: var(--color-surface);
+  border: 1px var(--color-neutral) solid;
+  color: var(--color-solid);
+  font-weight: 100;
+  position: relative;
+}
+
+.button-module__switch___2bt5z .button-module__icon___wuw4Z {
+  color: var(--color-neutral-60);
+}
+
+.button-module__switch___2bt5z:disabled {
+  color: var(--color-neutral-60);
+  border-color: var(--color-neutral);
+}
+
+.button-module__switch___2bt5z:hover {
+  color: var(--color-surface);
+  border-color: var(--color-info);
+  background: var(--color-info);
+}
+
+.button-module__switch___2bt5z:hover .button-module__icon___wuw4Z {
+  color: var(--color-surface);
+}
+
+.button-module__switch--active___1s4ZM {
+}
+
+.button-module__switch___2bt5z:disabled {
+  background: transparent;
+  color: var(--color-neutral-60);
+}
+
+.button-module__switch___2bt5z:disabled .button-module__icon___wuw4Z {
+  color: var(--color-neutral-60);
+}
+
+.button-module__switch___2bt5z:disabled,
+.button-module__switch--active___1s4ZM:disabled {
+  opacity: 1; /* exception for disabled switch button */
+  user-select: none;
+  cursor: default;
+}
+
+.button-module__switch--active___1s4ZM:disabled .button-module__icon___wuw4Z,
+.button-module__switch--active___1s4ZM .button-module__icon___wuw4Z {
+  color: var(--color-info);
+}
+
+.button-module__switch--active___1s4ZM:disabled {
+  color: var(--color-info);
+  border-color: var(--color-info);
+}
+
+/* Switch type squared */
+
+.button-module__switch-squared___QnrOG {
+  padding: 4.5px 15px 4.5px 40px;
+}
+
+.button-module__switch-squared--active___2ZbEC {
+}
+
+/* Switch type rounded */
+
+/* When the button has no text but icon */
+
+.button-module__switch-rounded___1CBs_ {
+  padding: 0;
+  border-width: 1px;
+  width: 36px;
+  height: 36px;
+  border-radius: 36px;
+}
+
+.button-module__switch-rounded--active___2Ckga {
+}
+
+.button-module__switch-rounded___1CBs_ .button-module__switch-label___2FAdy {
+  display: none;
+}
+
+/* States */
+
+.button-module__cancel___1-jYL:hover {
+  border-color: var(--color-primary);
+  color: var(--color-primary);
+}
+
+.button-module__confirm___-W92x:hover {
+  background: var(--color-primary-25);
+}
+
+.button-module__add___1fbPS:hover {
+  background: var(--color-primary);
+  border-color: var(--color-primary);
+  color: var(--color-surface);
+}
+
+/* Variations */
+
+.button-module__disabled___2Azpu {
+  pointer-events: none;
+  opacity: 0.5;
+}
+
+.button-module__full___264Zw {
+  width: 100%;
+}
+
+.button-module__alt___Z6PWx {
+  color: var(--color-surface);
+  border-radius: 20px;
+  border: 2px var(--color-surface) solid;
+  padding-left: 30px;
+  padding-right: 30px;
+}
+
+.button-module__confirm-alt___2Zcqz {
+  border-color: transparent;
+}
+
+.button-module__cancel-alt___u5EAw {
+  background: none;
+}
+
+.button-module__save-alt___6iHMF {
+  border-color: transparent;
+}
+
+/* Add Button */
+
+.button-module__add-button___1f093 {
+  min-height: 32px;
+}
+/* imported from file-input.module.css  */
+
+/** Button */
+
+.file-input-module__button___2KypN {
+  display: inline-flex;
+  background-color: var(--color-surface);
+  color: var(--color-solid);
+  font-size: 1rem;
+  align-items: center;
+  transition: background-color var(--transition-linear-80ms);
+  box-shadow: var(--shadow-7);
+  padding: 0 var(--spacing-m);
+  height: var(--big-button-height);
+  border-radius: var(--border-radius-6);
+}
+
+.file-input-module__button___2KypN:hover,
+.file-input-module__button___2KypN:focus {
+  cursor: pointer;
+  box-shadow: var(--shadow-8);
+}
+
+.file-input-module__button___2KypN:active {
+  box-shadow: var(--shadow-9);
+  background-color: var(--color-surface);
+}
+
+.file-input-module__input___3MP4D {
+  visibility: hidden;
+  width: 1px;
+  height: 1px;
+}
+/*  imported from dropdown-indicator.module.css  */
+
+.dropdown-indicator-module__dropdownIndicator___3bkJT {
+  display: flex;
+  align-items: center;
+  margin-left: var(--spacing-s);
+}
+/*  imported from centered-loading-spinner.module.css  */
+
+.centered-loading-spinner-module__loading-container___3_9-h {
+  height: 100%;
+  display: flex;
+  flex-grow: 1;
+  align-items: center;
+  justify-content: center;
+}
+/*  imported from divider.module.css  */
+
+.divider-module__divider___4-vdy {
+  box-sizing: border-box;
+  width: 100%;
+  margin: 0;
+  border: 0;
+  border-top-width: 1px;
+}
+
+.divider-module__divider-solid___3Fs4q {
+  border-style: solid;
+}
+
+.divider-module__divider-dashed___2Em8A {
+  border-style: dashed;
+}
+
+.divider-module__size_s___3aoIW {
+  border-top-color: var(--color-neutral);
+}
+
+.divider-module__size_m___LM34Z {
+  border-top-color: var(--color-neutral-60);
+}
+/*  imported from reference-search.module.css  */
+
+.reference-search-module__container___3-iK3 {
+  width: 100%;
+}
+
+.reference-search-module__container___3-iK3 > div {
+  width: 100%;
+}
+
+.reference-search-module__missing-label___az9AO {
+  color: var(--color-warning);
+  font-size: 0.9rem;
+  margin-left: var(--spacing-xs);
+}
+/*  imported from custom-money-input.module.css  */
+
+.custom-money-input-module__container___1fdO2 {
+  width: 100%;
+}
+/*  imported from tooltip.module.css  */
+
+/* STRUCTURE */
+
+.tooltip-module__container___2R5k4 {
+  box-sizing: content-box;
+  max-height: 150px;
+  opacity: 1;
+  visibility: visible;
+  position: absolute;
+  margin-left: auto;
+  margin-right: auto;
+  cursor: default;
+  pointer-events: none;
+  z-index: 99;
+}
+
+.tooltip-module__box___1V72T {
+  position: relative;
+}
+
+.tooltip-module__body___1hJvc {
+  padding: 6px;
+  border-radius: 5px;
+  min-width: 100px;
+  background-color: var(--color-surface);
+  box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.12), 0 3px 3px 0 rgba(0, 0, 0, 0.24);
+  vertical-align: middle;
+  font-size: 0.857rem;
+}
+
+.tooltip-module__tooltip-body___2_NJI {
+  background: red;
+}
+
+/* STATES */
+
+.tooltip-module__container___2R5k4.tooltip-module__hide___21LcK {
+  opacity: 0.01;
+  visibility: hidden;
+}
+
+/* ARROW */
+
+.tooltip-module__arrow-top-border___3_L66 {
+  border-top: solid 6px transparent;
+}
+
+.tooltip-module__arrow-top-right-border___2yFxP {
+  border-top: solid 6px transparent;
+}
+
+.tooltip-module__arrow-bottom-border___2Grv6 {
+  border-bottom: solid 6px transparent;
+  transform: translateY(-6px);
+}
+
+.tooltip-module__arrow-left-border___27YP5 {
+  border-left: solid 6px transparent;
+}
+
+.tooltip-module__arrow-right-border___3TsGO {
+  border-right: solid 6px transparent;
+}
+
+/* ARROW POSITIONING */
+.tooltip-module__arrow-top___1TMUA,
+.tooltip-module__arrow-top-border___3_L66,
+.tooltip-module__arrow-shadow-top___3vxpn,
+.tooltip-module__arrow-bottom___1BM7o,
+.tooltip-module__arrow-bottom-border___2Grv6 {
+  box-sizing: border-box;
+  height: 6px;
+  width: 12px;
+  margin-left: 30px;
+  margin-right: auto;
+  border-left: solid 6px transparent;
+  border-right: solid 6px transparent;
+  position: absolute;
+}
+
+.tooltip-module__arrow-top-right___2P3cx,
+.tooltip-module__arrow-top-right-border___2yFxP,
+.tooltip-module__arrow-shadow-top-right___1Yj5N {
+  box-sizing: border-box;
+  height: 6px;
+  width: 12px;
+  right: 30px;
+  border-left: solid 6px transparent;
+  border-right: solid 6px transparent;
+  position: absolute;
+}
+
+.tooltip-module__arrow-left____OVQd,
+.tooltip-module__arrow-left-border___27YP5 {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 6px 0 6px 6px;
+  border-color: transparent transparent transparent var(--color-info);
+  position: absolute;
+  right: -5px;
+  top: calc(50% - 6px);
+}
+
+.tooltip-module__arrow-right___3WQ2_,
+.tooltip-module__arrow-right-border___3TsGO {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 6px 6px 6px 0;
+  border-color: transparent var(--color-info) transparent transparent;
+  position: absolute;
+  left: -6px;
+  top: calc(50% - 6px);
+}
+
+.tooltip-module__arrow-top___1TMUA {
+  border-top: solid 6px var(--color-info);
+  transform: translateY(-1.5px);
+}
+
+.tooltip-module__arrow-top-right___2P3cx {
+  border-top: solid 6px var(--color-info);
+  transform: translateY(-1.5px);
+}
+
+.tooltip-module__arrow-bottom___1BM7o {
+  border-bottom: solid 6px var(--color-primary);
+  transform: translateY(-6px);
+}
+
+.tooltip-module__arrow-left____OVQd {
+  border-left: solid 6px var(--color-info);
+  transform: translateX(-2px);
+}
+
+.tooltip-module__arrow-right___3WQ2_ {
+  border-right: solid 6px var(--color-info);
+  transform: translateX(2px);
+}
+
+/* ARROW SHADOW */
+
+.tooltip-module__arrow-shadow-top___3vxpn {
+  border-top: solid 6px rgba(176, 176, 176, 0.25);
+  transform: translate(2px, 2px);
+}
+
+.tooltip-module__arrow-shadow-top-right___1Yj5N {
+  border-top: solid 6px rgba(176, 176, 176, 0.25);
+  transform: translate(2px, 2px);
+}
+
+/* TOOLTIP TYPES */
+
+/* WARNING */
+
+.tooltip-module__container___2R5k4.tooltip-module__warning___1kbUk > .tooltip-module__body___1hJvc {
+  border: solid 1px var(--color-warning);
+  color: var(--color-solid);
+}
+
+.tooltip-module__container___2R5k4.tooltip-module__warning___1kbUk > .tooltip-module__arrow-top-border___3_L66,
+.tooltip-module__container___2R5k4.tooltip-module__warning___1kbUk > .tooltip-module__arrow-top-right-border___2yFxP {
+  border-top-color: var(--color-warning);
+}
+
+.tooltip-module__container___2R5k4.tooltip-module__warning___1kbUk > .tooltip-module__arrow-top___1TMUA,
+.tooltip-module__container___2R5k4.tooltip-module__warning___1kbUk > .tooltip-module__arrow-top-right___2P3cx {
+  border-top-color: var(--color-surface);
+}
+
+.tooltip-module__container___2R5k4.tooltip-module__warning___1kbUk > .tooltip-module__arrow-bottom___1BM7o {
+  border-bottom-color: var(--color-surface);
+}
+
+.tooltip-module__container___2R5k4.tooltip-module__warning___1kbUk > .tooltip-module__arrow-bottom-border___2Grv6 {
+  border-bottom-color: var(--color-warning);
+}
+
+.tooltip-module__container___2R5k4.tooltip-module__warning___1kbUk > .tooltip-module__arrow-left____OVQd {
+  border-left-color: var(--color-surface);
+}
+
+.tooltip-module__container___2R5k4.tooltip-module__warning___1kbUk > .tooltip-module__arrow-left-border___27YP5 {
+  border-left-color: var(--color-warning);
+}
+
+.tooltip-module__container___2R5k4.tooltip-module__warning___1kbUk > .tooltip-module__arrow-right___3WQ2_ {
+  border-right-color: var(--color-surface);
+}
+
+.tooltip-module__container___2R5k4.tooltip-module__warning___1kbUk > .tooltip-module__arrow-right-border___3TsGO {
+  border-right-color: var(--color-warning);
+}
+
+/* INFO */
+
+.tooltip-module__container___2R5k4.tooltip-module__info___1uBMc {
+  max-height: auto;
+  min-width: 100px;
+  white-space: nowrap;
+}
+
+.tooltip-module__container___2R5k4.tooltip-module__info___1uBMc > .tooltip-module__body___1hJvc {
+  background-color: var(--color-surface);
+  border: solid 1px var(--color-primary);
+  color: var(--color-accent);
+  padding: 12px;
+  min-width: 100px;
+}
+
+.tooltip-module__container___2R5k4.tooltip-module__info___1uBMc > .tooltip-module__arrow-left____OVQd {
+  border-left-color: var(--color-surface);
+}
+
+.tooltip-module__container___2R5k4.tooltip-module__info___1uBMc > .tooltip-module__arrow-left-border___27YP5 {
+  border-left-color: var(--color-primary);
+}
+
+.tooltip-module__container___2R5k4.tooltip-module__info___1uBMc > .tooltip-module__arrow-right___3WQ2_ {
+  border-right-color: var(--color-surface);
+}
+
+.tooltip-module__container___2R5k4.tooltip-module__info___1uBMc > .tooltip-module__arrow-right-border___3TsGO {
+  border-right-color: var(--color-primary);
+}
+
+.tooltip-module__container___2R5k4.tooltip-module__info___1uBMc > .tooltip-module__arrow-top___1TMUA,
+.tooltip-module__container___2R5k4.tooltip-module__info___1uBMc > .tooltip-module__arrow-top-right___2P3cx {
+  border-top-color: var(--color-surface);
+}
+
+.tooltip-module__container___2R5k4.tooltip-module__info___1uBMc > .tooltip-module__arrow-top-border___3_L66,
+.tooltip-module__container___2R5k4.tooltip-module__info___1uBMc > .tooltip-module__arrow-top-right-border___2yFxP {
+  border-top-color: var(--color-primary);
+}
+
+/* ERROR */
+
+.tooltip-module__container___2R5k4.tooltip-module__error___-Akny > .tooltip-module__body___1hJvc {
+  background-color: var(--color-warning-95);
+  border: solid 1px var(--color-error);
+  color: var(--color-solid);
+}
+
+.tooltip-module__container___2R5k4.tooltip-module__error___-Akny > .tooltip-module__arrow-top-border___3_L66,
+.tooltip-module__container___2R5k4.tooltip-module__error___-Akny > .tooltip-module__arrow-top-right-border___2yFxP {
+  border-top-color: var(--color-error);
+}
+
+.tooltip-module__container___2R5k4.tooltip-module__error___-Akny > .tooltip-module__arrow-top___1TMUA,
+.tooltip-module__container___2R5k4.tooltip-module__error___-Akny > .tooltip-module__arrow-top-right___2P3cx {
+  border-top-color: var(--color-warning-95);
+}
+
+.tooltip-module__container___2R5k4.tooltip-module__error___-Akny > .tooltip-module__arrow-bottom___1BM7o {
+  border-bottom-color: var(--color-warning-95);
+}
+
+.tooltip-module__container___2R5k4.tooltip-module__error___-Akny > .tooltip-module__arrow-bottom-border___2Grv6 {
+  border-bottom-color: var(--color-error);
+}
+
+/* POSITIONS */
+
+.tooltip-module__container-top___2MQTV {
+  transform: translateY(-100%) translateY(-3px);
+}
+
+.tooltip-module__container-top-right___iR0io {
+  transform: translate(0, calc(-100% - 10px));
+  right: 0;
+}
+
+.tooltip-module__container-bottom___1wDKk {
+  top: calc(100% + 10px);
+}
+
+.tooltip-module__container-left___YePF0 {
+  transform: translateX(-100%) translateX(-10px) translateY(-6px);
+}
+/*  imported from localized-field.module.css  */
+
+:root {
+  --width-locale-modal-selector: 80px;
+
+  /* Left navigation */
+  --width-leftNavigation: 64px;
+}
+
+.localized-field-module__fields___2pYgl {
+  width: 100%;
+  float: none;
+  clear: both;
+}
+
+.localized-field-module__fields___2pYgl::after {
+  clear: both;
+  content: ' ';
+  display: block;
+}
+
+.localized-field-module__input-text___19OTB {
+  transition: all 0.2s ease;
+  width: calc(100% - 90px);
+  margin: 0;
+  min-height: 36px;
+  overflow: hidden;
+}
+
+.localized-field-module__all-locales___3xnTj {
+  transition: 0.2s ease;
+  background: var(--color-neutral-95);
+  border-radius: 6px;
+  border: 1px var(--color-neutral-60) solid;
+  bottom: 0;
+  cursor: pointer;
+  max-width: var(--width-locale-modal-selector);
+  text-align: center;
+  margin-left: var(--spacing-s);
+}
+
+/* States */
+
+.localized-field-module__all-locales___3xnTj:hover {
+  background: var(--color-primary);
+}
+
+.localized-field-module__all-locales___3xnTj:hover .localized-field-module__current-locale___1OAvW,
+.localized-field-module__all-locales___3xnTj:hover .localized-field-module__available-locales___1LL64 {
+  color: var(--color-surface) !important;
+}
+
+.localized-field-module__counter___M4crF {
+  color: var(--color-surface) !important;
+}
+
+.localized-field-module__locale___1f9h9 {
+  background: var(--color-neutral-95);
+  color: var(--color-neutral-60);
+  border: 1px var(--color-neutral-60) solid;
+  border-radius: var(--border-radius-4);
+  display: inline-block;
+  font-size: 0.923rem;
+  margin-left: var(--spacing-s);
+  min-width: 70px;
+  padding: var(--spacing-s);
+  text-align: center;
+  text-transform: uppercase;
+  width: auto;
+  bottom: 0;
+  right: 0;
+}
+
+.localized-field-module__locale-modal___1hp7U {
+  margin: 0 var(--spacing-s);
+  position: relative;
+}
+
+.localized-field-module__text-area___2CkYY ~ .localized-field-module__locale___1f9h9 {
+  bottom: 5px;
+  height: 40px;
+  position: absolute;
+  top: inherit;
+}
+
+.localized-field-module__container___4wHqe {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  align-items: flex-end;
+  width: 100%;
+}
+
+.localized-field-module__container-expandable___LX72x {
+  align-items: flex-start;
+}
+
+.localized-field-module__container___4wHqe > .localized-field-module__left-cell___YWB1o {
+  flex-grow: 1;
+}
+
+.localized-field-module__container___4wHqe > .localized-field-module__left-cell___YWB1o.localized-field-module__set-width___3BitN {
+  flex-grow: 0;
+  width: 50%;
+}
+
+.localized-field-module__container___4wHqe > .localized-field-module__right-cell___1ziDs {
+  flex-grow: 0;
+}
+
+.localized-field-module__current-locale___1OAvW {
+  border-bottom: 1px var(--color-neutral-60) dashed;
+  color: var(--color-neutral-60);
+  display: inline-block;
+  padding: 2px 0;
+  transition: all 0.2s linear;
+  width: 100%;
+}
+
+.localized-field-module__available-locales___1LL64 {
+  color: var(--color-primary-25);
+  display: inline-block;
+  padding: 2px 0;
+  transition: all 0.2s linear;
+  width: 60px;
+}
+
+.localized-field-module__field___193NR {
+  clear: both;
+  position: relative;
+  width: 100%;
+}
+
+.localized-field-module__field___193NR::after {
+  clear: both;
+  content: ' ';
+  display: block;
+}
+
+/* with Modal */
+
+.localized-field-module__container-modal___9rZ1j {
+  margin-top: var(--spacing-m);
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+}
+
+.localized-field-module__expandable-field-modal___4P_Bs {
+  float: left;
+  width: 100%;
+}
+
+.localized-field-module__textarea-modal___2BZTl {
+  width: 100%;
+}
+
+.localized-field-module__edit-modal-form___1JH5t {
+  height: 100%;
+  overflow: auto;
+  padding: 40px;
+  padding-top: 20px;
+  background-color: var(--color-surface);
+}
+
+.localized-field-module__field-modal-search___1pmvd {
+  float: left;
+  width: 100% !important;
+}
+
+.localized-field-module__locale-modal-search___3fdr9 {
+  float: left;
+  width: 100%;
+}
+
+.localized-field-module__input-text___19OTB {
+  transition: 0.2s ease;
+  border-radius: 6px;
+  border-style: solid;
+  border-width: 1px;
+  color: var(--color-solid);
+  font-weight: 500;
+  font-size: 1rem;
+  font-family: 'Open Sans', sans-serif !important;
+  padding: 7.5px 10px;
+  outline: none;
+  box-shadow: none;
+  appearance: none;
+}
+
+.localized-field-module__input___2wG41 {
+  background-color: var(--color-neutral-95);
+  border-color: var(--color-surface);
+  width: 100%;
+}
+
+.localized-field-module__transition-modal-overlay___1Rzbn {
+  display: flex;
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(32, 62, 72, 0.5);
+  z-index: 2000;
+}
+
+.localized-field-module__transition-modal-content___3TZ0q {
+  padding: 0;
+  border-radius: 0;
+  background: var(--color-surface);
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+  outline: none;
+  height: 100%; /* hack for safari */
+  transition: left 150ms ease-out;
+  left: 100%;
+}
+
+.localized-field-module__second-layer___37wlq {
+  /* Needed for showing a bit of
+  the background when there's an overlay */
+  width: calc(100% - var(--width-leftNavigation));
+  margin-left: auto;
+}
+
+.localized-field-module__third-layer___2QOn9 {
+  /* Needed for showing a bit of
+  the background & the first overlay
+  when there's a second layer overlay */
+  width: calc(100% - var(--width-leftNavigation) - var(--width-leftNavigation));
+  margin-left: auto;
+}
+
+.localized-field-module__push-right___KDu9r {
+  float: right;
+}
+
+.localized-field-module__field-modal___28xSG {
+  /* this is here so the unit tests work */
+}
+
+@media screen and (--screen-max-desktop) {
+  .localized-field-module__field-modal___28xSG {
+    width: 80%;
+  }
+}
+
+@media screen and (--screen-min-desktop) {
+  .localized-field-module__field-modal___28xSG {
+    clear: none;
+    float: left;
+    width: 50%;
+  }
+
+  .localized-field-module__field-modal___28xSG:nth-of-type(2n + 1) {
+    clear: both;
+  }
+}
+
+/* Bigger screens */
+
+@media screen and (--screen-min-giantdesktop) {
+  .localized-field-module__field-modal___28xSG {
+    width: 33.33%;
+  }
+
+  .localized-field-module__field-modal___28xSG:nth-of-type(2n + 1),
+  .localized-field-module__field-modal___28xSG:first-of-type {
+    clear: none;
+  }
+
+  .localized-field-module__field-modal___28xSG:nth-of-type(3n + 1) {
+    clear: both;
+  }
+}
+
+.localized-field-module__warning___HguI1 {
+  padding: 6px;
+  border-radius: 5px;
+  min-width: 100px;
+  vertical-align: middle;
+  font-size: 0.857rem;
+  background-color: var(--color-warning-95);
+  border: solid 1px var(--color-warning);
+  box-shadow: none;
+}
+
+.localized-field-module__container-tooltip___2h2P4 {
+  align-self: flex-start;
+}
+/*  imported from button-close.module.css  */
+
+.button-close-module__button-close-container___1uz2S {
+  cursor: pointer;
+}
+/*  imported from set-buttons.module.css  */
+
+.set-buttons-module__topAlign___3AZwc {
+  padding-top: var(--spacing-xs);
+}
+
+.set-buttons-module__gap___38Qr0 {
+  padding: 12px;
+}
+/*  imported from platform-limits-customers-status.module.css  */
+
+.platform-limits-customers-status-module__status___3rXYM {
+  min-width: max-content;
+}
+/*  imported from platform-limits-customers-combined.module.css  */
+
+.platform-limits-customers-combined-module__combined___OszDd {
+  margin-bottom: var(--spacing-s);
+}
+/*  imported from platform-limits-customer-groups-status.module.css  */
+
+.platform-limits-customer-groups-status-module__status___6099G {
+  min-width: max-content;
+}
+/*  imported from platform-limits-customer-groups-combined.module.css  */
+
+.platform-limits-customer-groups-combined-module__combined___WjRoI {
+  margin-bottom: var(--spacing-s);
+}