@esri/solutions-components 0.7.7 → 0.7.8

package/dist/collection/components/public-notification/public-notification.css

@@ -27,7 +27,7 @@
   border-width: 0px;
   border-bottom-width: 1px;
   border-style: solid;
-  border-color: var(--calcite-ui-border-3);
+  border-color: var(--calcite-color-border-3);
 }
 
 .action-bar-size {
@@ -88,9 +88,9 @@
 
 .info-blue {
   /* This would be better but not the right color in light theme */
-  /* color: var(--calcite-ui-info); */
+  /* color: var(--calcite-color-info); */
 
-  /* This is --calcite-ui-info value for dark theme*/
+  /* This is --calcite-color-info value for dark theme*/
   color: #00A0FF;
 }
 
@@ -116,7 +116,7 @@
 }
 
 .border-bottom {
-  border-bottom: 1px solid var(--calcite-ui-border-2);
+  border-bottom: 1px solid var(--calcite-color-border-2);
 }
 
 .padding-start-1-2 {
@@ -124,7 +124,7 @@
 }
 
 .list-border {
-  border: 1px solid var(--calcite-ui-border-2);
+  border: 1px solid var(--calcite-color-border-2);
 }
 
 .margin-sides-1 {
@@ -161,7 +161,7 @@
 }
 
 .main-background {
-  background-color: var(--calcite-ui-foreground-2);
+  background-color: var(--calcite-color-foreground-2);
 }
 
 .position-right {
@@ -179,7 +179,7 @@
 }
 
 .list-label {
-  color: var(--calcite-ui-text-1);
+  color: var(--calcite-color-text-1);
 }
 
 .list-label,
@@ -193,7 +193,7 @@
 
 .list-description {
   margin-block-start: 0.125rem;
-  color: var(--calcite-ui-text-3);
+  color: var(--calcite-color-text-3);
 }
 
 .img-container {
@@ -208,9 +208,9 @@
 .background-override {
   height: 100%;
   width: 100%;
-  --calcite-ui-foreground-3: var(--calcite-ui-brand);
-  --calcite-ui-foreground-2: var(--calcite-ui-brand-hover);
-  --calcite-ui-text-1: var(--calcite-ui-text-inverse)
+  --calcite-color-foreground-3: var(--calcite-color-brand);
+  --calcite-color-foreground-2: var(--calcite-color-brand-hover);
+  --calcite-color-text-1: var(--calcite-color-text-inverse)
 }
 
 .word-wrap-anywhere {

package/dist/collection/components/public-notification/public-notification.js

@@ -498,7 +498,7 @@ export class PublicNotification {
     _getExportPage() {
         const hasSelections = this._hasSelections(this.showRefineSelection);
         const displayDuplicatesClass = this._numDuplicates > 0 ? "display-block" : "display-none";
-        return (h("calcite-panel", null, h("div", null, this._getLabel(this._translations.export, false), hasSelections ? (h("div", null, this._getNotice(this._translations.exportTip, "padding-sides-1"), this._getLabel(this._translations.exportListsLabel), this._getExportSelectionLists(), h("div", { class: "padding-sides-1 " + displayDuplicatesClass }, h("div", { class: "display-flex" }, h("calcite-label", { layout: "inline" }, h("calcite-checkbox", { ref: (el) => { this._removeDuplicates = el; } }), h("div", { class: "display-flex" }, this._translations.removeDuplicate, h("div", { class: "info-message padding-start-1-2" }, h("calcite-input-message", { class: "info-blue margin-top-0", scale: "m" }, ` ${this._translations.numDuplicates.replace("{{n}}", this._numDuplicates.toString())}`)))), h("calcite-icon", { class: "padding-start-1-2 icon", icon: "question", id: "remove-duplicates-icon", scale: "s" })), h("calcite-popover", { closable: true, label: "", referenceElement: "remove-duplicates-icon" }, h("span", { class: "tooltip-message" }, this._translations.duplicatesTip))), h("div", { class: "border-bottom" }), h("div", { class: "padding-top-sides-1" }, h("calcite-segmented-control", { class: "w-100", onCalciteSegmentedControlChange: (evt) => this._exportTypeChange(evt) }, h("calcite-segmented-control-item", { checked: this._exportType === EExportType.PDF, class: "w-50 end-border", value: EExportType.PDF }, h("span", { class: "font-weight-500" }, this._translations.pdf)), h("calcite-segmented-control-item", { checked: this._exportType === EExportType.CSV, class: "w-50", value: EExportType.CSV }, h("span", { class: "font-weight-500" }, this._translations.csv)))), h("div", { class: "padding-bottom-1" }, this._getExportOptions()), h("div", { class: "padding-1 display-flex" }, h("calcite-button", { disabled: !this._downloadActive, loading: this._fetchingData, onClick: () => void this._export(), width: "full" }, h("span", { class: "font-weight-500" }, this._translations.export))))) : (this._getNotice(this._translations.downloadNoLists, "padding-sides-1 padding-bottom-1")))));
+        return (h("calcite-panel", null, h("div", null, this._getLabel(this._translations.export, false), hasSelections ? (h("div", null, this._getNotice(this._translations.exportTip, "padding-sides-1"), this._getLabel(this._translations.exportListsLabel), this._getExportSelectionLists(), h("div", { class: "padding-sides-1 " + displayDuplicatesClass }, h("div", { class: "display-flex" }, h("calcite-label", { layout: "inline" }, h("calcite-checkbox", { ref: (el) => { this._removeDuplicates = el; } }), h("div", { class: "display-flex" }, this._translations.removeDuplicate, h("div", { class: "info-message padding-start-1-2" }, h("calcite-input-message", { class: "info-blue margin-top-0", scale: "m" }, ` ${this._translations.numDuplicates.replace("{{n}}", this._numDuplicates.toString())}`)))), h("calcite-icon", { class: "padding-start-1-2 icon", icon: "question", id: "remove-duplicates-icon", scale: "s" })), h("calcite-popover", { closable: true, label: "", referenceElement: "remove-duplicates-icon" }, h("span", { class: "tooltip-message" }, this._translations.duplicatesTip))), h("div", { class: "border-bottom" }), h("div", { class: "padding-top-sides-1" }, h("calcite-segmented-control", { class: "w-100", onCalciteSegmentedControlChange: (evt) => this._exportTypeChange(evt) }, h("calcite-segmented-control-item", { checked: this._exportType === EExportType.PDF, class: "w-50 end-border", value: EExportType.PDF }, h("span", { class: "font-weight-500" }, this._translations.pdf)), h("calcite-segmented-control-item", { checked: this._exportType === EExportType.CSV, class: "w-50", value: EExportType.CSV }, h("span", { class: "font-weight-500" }, this._translations.csv)))), h("div", { class: "padding-bottom-1" }, this._getExportOptions()), h("div", { class: "padding-1 display-flex" }, h("calcite-button", { disabled: !this._downloadActive || this._fetchingData, loading: this._fetchingData, onClick: () => void this._export(), width: "full" }, h("span", { class: "font-weight-500" }, this._translations.export))))) : (this._getNotice(this._translations.downloadNoLists, "padding-sides-1 padding-bottom-1")))));
     }
     /**
      * Store the user selected export type CSV || PDF

package/dist/collection/components/refine-selection/refine-selection.css

@@ -41,7 +41,7 @@ html[dir="rtl"] .main-label {
 }
 
 .border {
-  outline: 1px solid var(--calcite-ui-border-input);
+  outline: 1px solid var(--calcite-color-border-input);
 }
 
 .margin-top-1 {
@@ -60,7 +60,7 @@ html[dir="rtl"] .main-label {
   font-size: 14px;
   font-family: "Avenir Next","Helvetica Neue",Helvetica,Arial,sans-serif;
   line-height: 1.3em;
-  background-color: var(--calcite-ui-foreground-1);
+  background-color: var(--calcite-color-foreground-1);
 }
 
 /* DIV CHILD */

package/dist/collection/components/solution-item-details/solution-item-details.css

@@ -62,152 +62,4 @@ label {
   display: block;
   min-width: -moz-min-content;
   min-width: min-content;
-  box-sizing: border-box;
-  margin-left: 0.75rem;
-  margin-right: 0.75rem;
-  min-width: 0;
-  flex-grow: 0;
-  flex-shrink: 1;
-}
-
-label-group-1-up > .block {
-  flex-basis: calc(100% - 1.5rem);
-  width: calc(100% - 1.5rem);
-}
-
-label-group-2-up > .block {
-  flex-basis: calc(50% - 1.5rem);
-  width: calc(50% - 1.5rem);
-}
-
-label-group-3-up > .block {
-  flex-basis: calc(33.33333% - 1.5rem);
-  width: calc(33.33333% - 1.5rem);
-}
-
-label-group-4-up > .block {
-  flex-basis: calc(25% - 1.5rem);
-  width: calc(25% - 1.5rem);
-}
-
-label-group-5-up > .block {
-  flex-basis: calc(20% - 1.5rem);
-  width: calc(20% - 1.5rem);
-}
-
-label-group-6-up > .block {
-  flex-basis: calc(16.66666% - 1.5rem);
-  width: calc(16.66666% - 1.5rem);
-}
-
-label-group-7-up > .block {
-  flex-basis: calc(14.2857% - 1.5rem);
-  width: calc(14.2857% - 1.5rem);
-}
-
-label-group-8-up > .block {
-  flex-basis: calc(12.5% - 1.5rem);
-  width: calc(12.5% - 1.5rem);
-}
-
-.tablet-block-group-1-up > label {
-    flex-basis: calc(100% - 1.5rem);
-    width: calc(100% - 1.5rem);
-  }
-
-.tablet-block-group-2-up > label {
-    flex-basis: calc(50% - 1.5rem);
-    width: calc(50% - 1.5rem);
-  }
-
-.tablet-block-group-3-up > label {
-    flex-basis: calc(33.33333% - 1.5rem);
-    width: calc(33.33333% - 1.5rem);
-  }
-
-.tablet-block-group-4-up > label {
-    flex-basis: calc(25% - 1.5rem);
-    width: calc(25% - 1.5rem);
-  }
-
-.tablet-block-group-5-up > label {
-    flex-basis: calc(20% - 1.5rem);
-    width: calc(20% - 1.5rem);
-  }
-
-.tablet-block-group-6-up > label {
-    flex-basis: calc(16.66666% - 1.5rem);
-    width: calc(16.66666% - 1.5rem);
-  }
-
-.tablet-block-group-7-up > label {
-    flex-basis: calc(14.2857% - 1.5rem);
-    width: calc(14.2857% - 1.5rem);
-  }
-
-.tablet-block-group-8-up > label {
-    flex-basis: calc(12.5% - 1.5rem);
-    width: calc(12.5% - 1.5rem);
-  }
-
-.phone-block-group-1-up > label {
-    flex-basis: calc(100% - 1.5rem);
-    width: calc(100% - 1.5rem);
-  }
-
-.phone-block-group-2-up > label {
-    flex-basis: calc(50% - 1.5rem);
-    width: calc(50% - 1.5rem);
-  }
-
-.phone-block-group-3-up > label {
-    flex-basis: calc(33.33333% - 1.5rem);
-    width: calc(33.33333% - 1.5rem);
-  }
-
-.phone-block-group-4-up > label {
-    flex-basis: calc(25% - 1.5rem);
-    width: calc(25% - 1.5rem);
-  }
-
-.phone-block-group-5-up > label {
-    flex-basis: calc(20% - 1.5rem);
-    width: calc(20% - 1.5rem);
-  }
-
-.phone-block-group-6-up > label {
-    flex-basis: calc(16.66666% - 1.5rem);
-    width: calc(16.66666% - 1.5rem);
-  }
-
-.phone-block-group-7-up > label {
-    flex-basis: calc(14.2857% - 1.5rem);
-    width: calc(14.2857% - 1.5rem);
-  }
-
-.phone-block-group-8-up > label {
-    flex-basis: calc(12.5% - 1.5rem);
-    width: calc(12.5% - 1.5rem);
-  }
-
-.code-face label {
-  letter-spacing: 0em;
-  font-family: "Consolas", "Andale Mono", "Lucida Console", "Monaco", monospace;
-  font-weight: 400;
-  font-style: normal;
-}
-
-.code-face label b, .code-face label strong {
-  font-weight: 400;
-}
-
-.code-italic label {
-  letter-spacing: 0em;
-  font-family: "Consolas", "Andale Mono", "Lucida Console", "Monaco", monospace;
-  font-weight: 400;
-  font-style: italic;
-}
-
-.code-italic label b, .code-italic label strong {
-  font-weight: 400;
 }

package/dist/collection/components/solution-item-icon/solution-item-icon.css

@@ -17,134 +17,12 @@
   pointer-events: none;
   display: block;
   height: 1rem;
-  box-sizing: border-box;
-  margin-left: 0.75rem;
-  margin-right: 0.75rem;
-  min-width: 0;
-  flex-grow: 0;
-  flex-shrink: 1;
-}
-.item-type-icon-group-1-up > .block {
-  flex-basis: calc(100% - 1.5rem);
-  width: calc(100% - 1.5rem);
-}
-.item-type-icon-group-2-up > .block {
-  flex-basis: calc(50% - 1.5rem);
-  width: calc(50% - 1.5rem);
-}
-.item-type-icon-group-3-up > .block {
-  flex-basis: calc(33.33333% - 1.5rem);
-  width: calc(33.33333% - 1.5rem);
-}
-.item-type-icon-group-4-up > .block {
-  flex-basis: calc(25% - 1.5rem);
-  width: calc(25% - 1.5rem);
-}
-.item-type-icon-group-5-up > .block {
-  flex-basis: calc(20% - 1.5rem);
-  width: calc(20% - 1.5rem);
-}
-.item-type-icon-group-6-up > .block {
-  flex-basis: calc(16.66666% - 1.5rem);
-  width: calc(16.66666% - 1.5rem);
-}
-.item-type-icon-group-7-up > .block {
-  flex-basis: calc(14.2857% - 1.5rem);
-  width: calc(14.2857% - 1.5rem);
-}
-.item-type-icon-group-8-up > .block {
-  flex-basis: calc(12.5% - 1.5rem);
-  width: calc(12.5% - 1.5rem);
-}
-.tablet-block-group-1-up > .item-type-icon {
-    flex-basis: calc(100% - 1.5rem);
-    width: calc(100% - 1.5rem);
-  }
-.tablet-block-group-2-up > .item-type-icon {
-    flex-basis: calc(50% - 1.5rem);
-    width: calc(50% - 1.5rem);
-  }
-.tablet-block-group-3-up > .item-type-icon {
-    flex-basis: calc(33.33333% - 1.5rem);
-    width: calc(33.33333% - 1.5rem);
-  }
-.tablet-block-group-4-up > .item-type-icon {
-    flex-basis: calc(25% - 1.5rem);
-    width: calc(25% - 1.5rem);
-  }
-.tablet-block-group-5-up > .item-type-icon {
-    flex-basis: calc(20% - 1.5rem);
-    width: calc(20% - 1.5rem);
-  }
-.tablet-block-group-6-up > .item-type-icon {
-    flex-basis: calc(16.66666% - 1.5rem);
-    width: calc(16.66666% - 1.5rem);
-  }
-.tablet-block-group-7-up > .item-type-icon {
-    flex-basis: calc(14.2857% - 1.5rem);
-    width: calc(14.2857% - 1.5rem);
-  }
-.tablet-block-group-8-up > .item-type-icon {
-    flex-basis: calc(12.5% - 1.5rem);
-    width: calc(12.5% - 1.5rem);
-  }
-.phone-block-group-1-up > .item-type-icon {
-    flex-basis: calc(100% - 1.5rem);
-    width: calc(100% - 1.5rem);
-  }
-.phone-block-group-2-up > .item-type-icon {
-    flex-basis: calc(50% - 1.5rem);
-    width: calc(50% - 1.5rem);
-  }
-.phone-block-group-3-up > .item-type-icon {
-    flex-basis: calc(33.33333% - 1.5rem);
-    width: calc(33.33333% - 1.5rem);
-  }
-.phone-block-group-4-up > .item-type-icon {
-    flex-basis: calc(25% - 1.5rem);
-    width: calc(25% - 1.5rem);
-  }
-.phone-block-group-5-up > .item-type-icon {
-    flex-basis: calc(20% - 1.5rem);
-    width: calc(20% - 1.5rem);
-  }
-.phone-block-group-6-up > .item-type-icon {
-    flex-basis: calc(16.66666% - 1.5rem);
-    width: calc(16.66666% - 1.5rem);
-  }
-.phone-block-group-7-up > .item-type-icon {
-    flex-basis: calc(14.2857% - 1.5rem);
-    width: calc(14.2857% - 1.5rem);
-  }
-.phone-block-group-8-up > .item-type-icon {
-    flex-basis: calc(12.5% - 1.5rem);
-    width: calc(12.5% - 1.5rem);
-  }
-.code-face .item-type-icon {
-  letter-spacing: 0em;
-  font-family: "Consolas", "Andale Mono", "Lucida Console", "Monaco", monospace;
-  font-weight: 400;
-  font-style: normal;
-}
-.code-face .item-type-icon b, .code-face .item-type-icon strong {
-  font-weight: 400;
-}
-.code-italic .item-type-icon {
-  letter-spacing: 0em;
-  font-family: "Consolas", "Andale Mono", "Lucida Console", "Monaco", monospace;
-  font-weight: 400;
-  font-style: italic;
-}
-.code-italic .item-type-icon b, .code-italic .item-type-icon strong {
-  font-weight: 400;
-}
-.item-type-icon {
   margin-top: 0.15em !important;
   min-width: 16px;
   fill: currentColor;
-  transform: rotate(360deg);
+  transform: rotate(360deg)
 }
 
 .item-type-icon-margin {
-  margin-inline-end: 0.375rem;
+  margin-inline-end: 0.375rem
 }

package/dist/collection/components/solution-item-sharing/solution-item-sharing.css

@@ -14,135 +14,15 @@
 * limitations under the License.
 */
 :host {
-  display: block;
-  box-sizing: border-box;
-  margin-left: 0.75rem;
-  margin-right: 0.75rem;
-  min-width: 0;
-  flex-grow: 0;
-  flex-shrink: 1;
-}
-:host-group-1-up > .block {
-  flex-basis: calc(100% - 1.5rem);
-  width: calc(100% - 1.5rem);
-}
-:host-group-2-up > .block {
-  flex-basis: calc(50% - 1.5rem);
-  width: calc(50% - 1.5rem);
-}
-:host-group-3-up > .block {
-  flex-basis: calc(33.33333% - 1.5rem);
-  width: calc(33.33333% - 1.5rem);
-}
-:host-group-4-up > .block {
-  flex-basis: calc(25% - 1.5rem);
-  width: calc(25% - 1.5rem);
-}
-:host-group-5-up > .block {
-  flex-basis: calc(20% - 1.5rem);
-  width: calc(20% - 1.5rem);
-}
-:host-group-6-up > .block {
-  flex-basis: calc(16.66666% - 1.5rem);
-  width: calc(16.66666% - 1.5rem);
-}
-:host-group-7-up > .block {
-  flex-basis: calc(14.2857% - 1.5rem);
-  width: calc(14.2857% - 1.5rem);
-}
-:host-group-8-up > .block {
-  flex-basis: calc(12.5% - 1.5rem);
-  width: calc(12.5% - 1.5rem);
-}
-.tablet-block-group-1-up > :host {
-    flex-basis: calc(100% - 1.5rem);
-    width: calc(100% - 1.5rem);
-  }
-.tablet-block-group-2-up > :host {
-    flex-basis: calc(50% - 1.5rem);
-    width: calc(50% - 1.5rem);
-  }
-.tablet-block-group-3-up > :host {
-    flex-basis: calc(33.33333% - 1.5rem);
-    width: calc(33.33333% - 1.5rem);
-  }
-.tablet-block-group-4-up > :host {
-    flex-basis: calc(25% - 1.5rem);
-    width: calc(25% - 1.5rem);
-  }
-.tablet-block-group-5-up > :host {
-    flex-basis: calc(20% - 1.5rem);
-    width: calc(20% - 1.5rem);
-  }
-.tablet-block-group-6-up > :host {
-    flex-basis: calc(16.66666% - 1.5rem);
-    width: calc(16.66666% - 1.5rem);
-  }
-.tablet-block-group-7-up > :host {
-    flex-basis: calc(14.2857% - 1.5rem);
-    width: calc(14.2857% - 1.5rem);
-  }
-.tablet-block-group-8-up > :host {
-    flex-basis: calc(12.5% - 1.5rem);
-    width: calc(12.5% - 1.5rem);
-  }
-.phone-block-group-1-up > :host {
-    flex-basis: calc(100% - 1.5rem);
-    width: calc(100% - 1.5rem);
-  }
-.phone-block-group-2-up > :host {
-    flex-basis: calc(50% - 1.5rem);
-    width: calc(50% - 1.5rem);
-  }
-.phone-block-group-3-up > :host {
-    flex-basis: calc(33.33333% - 1.5rem);
-    width: calc(33.33333% - 1.5rem);
-  }
-.phone-block-group-4-up > :host {
-    flex-basis: calc(25% - 1.5rem);
-    width: calc(25% - 1.5rem);
-  }
-.phone-block-group-5-up > :host {
-    flex-basis: calc(20% - 1.5rem);
-    width: calc(20% - 1.5rem);
-  }
-.phone-block-group-6-up > :host {
-    flex-basis: calc(16.66666% - 1.5rem);
-    width: calc(16.66666% - 1.5rem);
-  }
-.phone-block-group-7-up > :host {
-    flex-basis: calc(14.2857% - 1.5rem);
-    width: calc(14.2857% - 1.5rem);
-  }
-.phone-block-group-8-up > :host {
-    flex-basis: calc(12.5% - 1.5rem);
-    width: calc(12.5% - 1.5rem);
-  }
-.code-face :host {
-  letter-spacing: 0em;
-  font-family: "Consolas", "Andale Mono", "Lucida Console", "Monaco", monospace;
-  font-weight: 400;
-  font-style: normal;
-}
-.code-face :host b, .code-face :host strong {
-  font-weight: 400;
-}
-.code-italic :host {
-  letter-spacing: 0em;
-  font-family: "Consolas", "Andale Mono", "Lucida Console", "Monaco", monospace;
-  font-weight: 400;
-  font-style: italic;
-}
-.code-italic :host b, .code-italic :host strong {
-  font-weight: 400;
+    display: block
 }
 
 .container-border {
-  padding: 1rem;
+    padding: 1rem
 }
 
 .icon-text {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap
 }

package/dist/collection/components/solution-organization-variables/solution-organization-variables.css

@@ -14,136 +14,16 @@
 * limitations under the License.
 */
 :host {
-  display: block;
-  box-sizing: border-box;
-  margin-left: 0.75rem;
-  margin-right: 0.75rem;
-  min-width: 0;
-  flex-grow: 0;
-  flex-shrink: 1;
-}
-:host-group-1-up > .block {
-  flex-basis: calc(100% - 1.5rem);
-  width: calc(100% - 1.5rem);
-}
-:host-group-2-up > .block {
-  flex-basis: calc(50% - 1.5rem);
-  width: calc(50% - 1.5rem);
-}
-:host-group-3-up > .block {
-  flex-basis: calc(33.33333% - 1.5rem);
-  width: calc(33.33333% - 1.5rem);
-}
-:host-group-4-up > .block {
-  flex-basis: calc(25% - 1.5rem);
-  width: calc(25% - 1.5rem);
-}
-:host-group-5-up > .block {
-  flex-basis: calc(20% - 1.5rem);
-  width: calc(20% - 1.5rem);
-}
-:host-group-6-up > .block {
-  flex-basis: calc(16.66666% - 1.5rem);
-  width: calc(16.66666% - 1.5rem);
-}
-:host-group-7-up > .block {
-  flex-basis: calc(14.2857% - 1.5rem);
-  width: calc(14.2857% - 1.5rem);
-}
-:host-group-8-up > .block {
-  flex-basis: calc(12.5% - 1.5rem);
-  width: calc(12.5% - 1.5rem);
-}
-.tablet-block-group-1-up > :host {
-    flex-basis: calc(100% - 1.5rem);
-    width: calc(100% - 1.5rem);
-  }
-.tablet-block-group-2-up > :host {
-    flex-basis: calc(50% - 1.5rem);
-    width: calc(50% - 1.5rem);
-  }
-.tablet-block-group-3-up > :host {
-    flex-basis: calc(33.33333% - 1.5rem);
-    width: calc(33.33333% - 1.5rem);
-  }
-.tablet-block-group-4-up > :host {
-    flex-basis: calc(25% - 1.5rem);
-    width: calc(25% - 1.5rem);
-  }
-.tablet-block-group-5-up > :host {
-    flex-basis: calc(20% - 1.5rem);
-    width: calc(20% - 1.5rem);
-  }
-.tablet-block-group-6-up > :host {
-    flex-basis: calc(16.66666% - 1.5rem);
-    width: calc(16.66666% - 1.5rem);
-  }
-.tablet-block-group-7-up > :host {
-    flex-basis: calc(14.2857% - 1.5rem);
-    width: calc(14.2857% - 1.5rem);
-  }
-.tablet-block-group-8-up > :host {
-    flex-basis: calc(12.5% - 1.5rem);
-    width: calc(12.5% - 1.5rem);
-  }
-.phone-block-group-1-up > :host {
-    flex-basis: calc(100% - 1.5rem);
-    width: calc(100% - 1.5rem);
-  }
-.phone-block-group-2-up > :host {
-    flex-basis: calc(50% - 1.5rem);
-    width: calc(50% - 1.5rem);
-  }
-.phone-block-group-3-up > :host {
-    flex-basis: calc(33.33333% - 1.5rem);
-    width: calc(33.33333% - 1.5rem);
-  }
-.phone-block-group-4-up > :host {
-    flex-basis: calc(25% - 1.5rem);
-    width: calc(25% - 1.5rem);
-  }
-.phone-block-group-5-up > :host {
-    flex-basis: calc(20% - 1.5rem);
-    width: calc(20% - 1.5rem);
-  }
-.phone-block-group-6-up > :host {
-    flex-basis: calc(16.66666% - 1.5rem);
-    width: calc(16.66666% - 1.5rem);
-  }
-.phone-block-group-7-up > :host {
-    flex-basis: calc(14.2857% - 1.5rem);
-    width: calc(14.2857% - 1.5rem);
-  }
-.phone-block-group-8-up > :host {
-    flex-basis: calc(12.5% - 1.5rem);
-    width: calc(12.5% - 1.5rem);
-  }
-.code-face :host {
-  letter-spacing: 0em;
-  font-family: "Consolas", "Andale Mono", "Lucida Console", "Monaco", monospace;
-  font-weight: 400;
-  font-style: normal;
-}
-.code-face :host b, .code-face :host strong {
-  font-weight: 400;
-}
-.code-italic :host {
-  letter-spacing: 0em;
-  font-family: "Consolas", "Andale Mono", "Lucida Console", "Monaco", monospace;
-  font-weight: 400;
-  font-style: italic;
-}
-.code-italic :host b, .code-italic :host strong {
-  font-weight: 400;
+    display: block
 }
 
 .container-border {
-  overflow-y: auto;
+    overflow-y: auto
 }
 
 .org-var-header {
-  margin-left: 0px;
-  margin-right: 0px;
-  margin-top: 0px;
-  margin-bottom: 1rem;
+    margin-left: 0px;
+    margin-right: 0px;
+    margin-top: 0px;
+    margin-bottom: 1rem
 }