@colijnit/inphoto 300.1.8 → 301.1.0

package/lib/component/catalog/style/_theme.scss

@@ -1,43 +1,43 @@
-@use '../../../style' as cfg;
-
-@include cfg.export-module('co-catalog-theme') {
-  .co-catalog {
-    font-family: var(--co-inphoto-catalog-font-family);
-    font-size: var(--co-inphoto-catalog-font-size-text);
-
-    .catalog-dialog {
-      background-color: var(--co-inphoto-dialog-background-color);
-      border-left: var(--co-inphoto-catalog-dialog-border-left);
-
-      .catalog-container {
-        .catalog-dialog-wrapper {
-          .back-button {
-            background: none;
-            box-shadow: none;
-            @include cfg.text();
-            @include cfg.default-icon(var(--co-inphoto-icon-size-small), var(--co-inphoto-icon-size-small), var(--co-inphoto-icon-color));
-          }
-
-          .close-button {
-            background: none;
-            box-shadow: none;
-            @include cfg.default-icon(var(--co-inphoto-icon-size-small), var(--co-inphoto-icon-size-small), var(--co-inphoto-icon-color));
-          }
-        }
-
-        .catalog-body {
-          .catalog-tile-wrapper {
-            .catalog-tile {
-              p {
-                font-size: var(--co-inphoto-catalog-font-size-text);
-                font-weight: var(--co-inphoto-catalog-tile-text-font-weight);
-                text-shadow: none;
-                text-transform: capitalize;
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}
+@use '../../../style' as cfg;
+
+@include cfg.export-module('co-catalog-theme') {
+  .co-catalog {
+    font-family: var(--co-inphoto-catalog-font-family);
+    font-size: var(--co-inphoto-catalog-font-size-text);
+
+    .catalog-dialog {
+      background-color: var(--co-inphoto-dialog-background-color);
+      border-left: var(--co-inphoto-catalog-dialog-border-left);
+
+      .catalog-container {
+        .catalog-dialog-wrapper {
+          .back-button {
+            background: none;
+            box-shadow: none;
+            @include cfg.text();
+            @include cfg.default-icon(var(--co-inphoto-icon-size-small), var(--co-inphoto-icon-size-small), var(--co-inphoto-icon-color));
+          }
+
+          .close-button {
+            background: none;
+            box-shadow: none;
+            @include cfg.default-icon(var(--co-inphoto-icon-size-small), var(--co-inphoto-icon-size-small), var(--co-inphoto-icon-color));
+          }
+        }
+
+        .catalog-body {
+          .catalog-tile-wrapper {
+            .catalog-tile {
+              p {
+                font-size: var(--co-inphoto-catalog-font-size-text);
+                font-weight: var(--co-inphoto-catalog-tile-text-font-weight);
+                text-shadow: none;
+                text-transform: capitalize;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/lib/component/configuration-side-bar-menu/style/_layout.scss

@@ -1,33 +1,33 @@
-@use '../../../style' as cfg;
-
-@include cfg.export-module('co-configuration-side-bar-menu-layout') {
-  .co-configuration-side-bar-menu {
-    .configuration-side-bar-menu {
-      position: absolute;
-      top: var(--co-inphoto-configuration-side-bar-menu-position-top);
-      right: var(--co-inphoto-configuration-side-bar-menu-position-right);
-      width: var(--co-inphoto-configuration-side-bar-menu-width);
-
-      .configuration-side-bar-header {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-      }
-
-      .slider-container {
-        width: var(--co-inphoto-configuration-side-bar-menu-full-width);
-
-        input {
-          width: var(--co-inphoto-configuration-side-bar-menu-full-width);
-        }
-      }
-
-      .buttons {
-        display: flex;
-        gap: var(--co-inphoto-configuration-side-bar-menu-buttons-gap);
-        justify-content: space-between;
-        align-items: center;
-      }
-    }
-  }
-}
+@use '../../../style' as cfg;
+
+@include cfg.export-module('co-configuration-side-bar-menu-layout') {
+  .co-configuration-side-bar-menu {
+    .configuration-side-bar-menu {
+      position: absolute;
+      top: var(--co-inphoto-configuration-side-bar-menu-position-top);
+      right: var(--co-inphoto-configuration-side-bar-menu-position-right);
+      width: var(--co-inphoto-configuration-side-bar-menu-width);
+
+      .configuration-side-bar-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
+
+      .slider-container {
+        width: var(--co-inphoto-configuration-side-bar-menu-full-width);
+
+        input {
+          width: var(--co-inphoto-configuration-side-bar-menu-full-width);
+        }
+      }
+
+      .buttons {
+        display: flex;
+        gap: var(--co-inphoto-configuration-side-bar-menu-buttons-gap);
+        justify-content: space-between;
+        align-items: center;
+      }
+    }
+  }
+}

package/lib/component/configuration-side-bar-menu/style/_material-definition.scss

@@ -1,10 +1,10 @@
-.co-configuration-side-bar-menu {
-  --co-inphoto-configuration-side-bar-menu-font-size-text: var(--co-inphoto-font-size-text);
-  --co-inphoto-configuration-side-bar-menu-font-family: var(--co-inphoto-font-family);
-  --co-inphoto-configuration-side-bar-menu-position-top: 10px;
-  --co-inphoto-configuration-side-bar-menu-position-right: 10px;
-  --co-inphoto-configuration-side-bar-menu-width: 30%;
-  --co-inphoto-configuration-side-bar-menu-padding: 15px 25px;
-  --co-inphoto-configuration-side-bar-menu-full-width: 100%;
-  --co-inphoto-configuration-side-bar-menu-buttons-gap: 10px;
-}
+.co-configuration-side-bar-menu {
+  --co-inphoto-configuration-side-bar-menu-font-size-text: var(--co-inphoto-font-size-text);
+  --co-inphoto-configuration-side-bar-menu-font-family: var(--co-inphoto-font-family);
+  --co-inphoto-configuration-side-bar-menu-position-top: 10px;
+  --co-inphoto-configuration-side-bar-menu-position-right: 10px;
+  --co-inphoto-configuration-side-bar-menu-width: 30%;
+  --co-inphoto-configuration-side-bar-menu-padding: 15px 25px;
+  --co-inphoto-configuration-side-bar-menu-full-width: 100%;
+  --co-inphoto-configuration-side-bar-menu-buttons-gap: 10px;
+}

package/lib/component/edit-canvas/style/_layout.scss

@@ -1,85 +1,74 @@
-@use '../../../style' as cfg;
-
-@include cfg.export-module('co-edit-canvas-layout') {
-  .co-edit-canvas {
-    .edit-canvas-container {
-      position: var(--co-inphoto-edit-canvas-position-relative);
-      width: var(--co-inphoto-edit-canvas-full-size);
-      height: var(--co-inphoto-edit-canvas-container-height);
-
-      .canvas-container {
-        position: var(--co-inphoto-edit-canvas-position-relative);
-        width: var(--co-inphoto-edit-canvas-full-size);
-        height: var(--co-inphoto-edit-canvas-full-size);
-        display: flex;
-        justify-content: center;
-        align-items: flex-start;
-
-        .canvas-frame {
-          display: inline-flex;
-          padding: var(--co-inphoto-edit-canvas-frame-padding);
-          margin: var(--co-inphoto-edit-canvas-frame-margin);
-          position: var(--co-inphoto-edit-canvas-position-relative);
-
-          canvas {
-            display: block;
-            max-width: var(--co-inphoto-edit-canvas-full-size);
-            max-height: var(--co-inphoto-edit-canvas-canvas-max-height);
-          }
-        }
-
-        .close-canvas-button, .open-canvas-button {
-          position: var(--co-inphoto-edit-canvas-position-absolute);
-          cursor: pointer;
-        }
-
-        .close-canvas-button {
-          top: var(--co-inphoto-edit-canvas-button-offset);
-          right: var(--co-inphoto-edit-canvas-button-offset);
-        }
-
-        .open-canvas-button {
-          bottom: var(--co-inphoto-edit-canvas-button-offset);
-          right: var(--co-inphoto-edit-canvas-button-offset);
-        }
-
-      }
-
-      .canvas-container.canvas-full-screen {
-        position: var(--co-inphoto-edit-canvas-position-fixed);
-        top: var(--co-inphoto-edit-canvas-zero);
-        left: var(--co-inphoto-edit-canvas-zero);
-        width: var(--co-inphoto-edit-canvas-full-size);
-        height: var(--co-inphoto-edit-canvas-full-size);
-        z-index: var(--co-inphoto-edit-canvas-fullscreen-z-index);
-        overflow: hidden;
-      }
-
-      .segmentation-object-label {
-        position: var(--co-inphoto-edit-canvas-position-absolute);
-        pointer-events: none;
-        transform: var(--co-inphoto-edit-canvas-label-transform);
-        white-space: nowrap;
-        z-index: var(--co-inphoto-edit-canvas-label-z-index);
-      }
-
-      // Zoom
-      .canvas-zoom-control {
-        position: var(--co-inphoto-edit-canvas-position-absolute);
-        display: flex;
-        justify-content: space-around;
-        align-items: center;
-        bottom: var(--co-inphoto-edit-canvas-zoom-control-bottom);
-        left: var(--co-inphoto-edit-canvas-zoom-control-left);
-      }
-
-
-      &.canvas-disabled {
-        cursor: not-allowed;
-        canvas {
-          cursor: not-allowed;
-        }
-      }
-    }
-  }
-}
+@use '../../../style' as cfg;
+
+@include cfg.export-module('co-edit-canvas-layout') {
+  .co-edit-canvas {
+    .edit-canvas-container {
+      position: var(--co-inphoto-edit-canvas-position-relative);
+      width: var(--co-inphoto-edit-canvas-full-size);
+      height: var(--co-inphoto-edit-canvas-container-height);
+
+      .canvas-container {
+        position: var(--co-inphoto-edit-canvas-position-relative);
+        width: var(--co-inphoto-edit-canvas-full-size);
+        height: var(--co-inphoto-edit-canvas-full-size);
+        display: flex;
+        justify-content: center;
+        align-items: flex-start;
+
+        .canvas-frame {
+          display: inline-flex;
+          padding: var(--co-inphoto-edit-canvas-frame-padding);
+          margin: var(--co-inphoto-edit-canvas-frame-margin);
+          position: var(--co-inphoto-edit-canvas-position-relative);
+
+          canvas {
+            display: block;
+            max-width: var(--co-inphoto-edit-canvas-full-size);
+            max-height: var(--co-inphoto-edit-canvas-canvas-max-height);
+          }
+        }
+
+        .close-canvas-button, .open-canvas-button {
+          position: var(--co-inphoto-edit-canvas-position-absolute);
+          cursor: pointer;
+        }
+
+        .close-canvas-button {
+          top: var(--co-inphoto-edit-canvas-button-offset);
+          right: var(--co-inphoto-edit-canvas-button-offset);
+        }
+
+        .open-canvas-button {
+          bottom: var(--co-inphoto-edit-canvas-button-offset);
+          right: var(--co-inphoto-edit-canvas-button-offset);
+        }
+
+      }
+
+      .canvas-container.canvas-full-screen {
+        position: var(--co-inphoto-edit-canvas-position-fixed);
+        top: var(--co-inphoto-edit-canvas-zero);
+        left: var(--co-inphoto-edit-canvas-zero);
+        width: var(--co-inphoto-edit-canvas-full-size);
+        height: var(--co-inphoto-edit-canvas-full-size);
+        z-index: var(--co-inphoto-edit-canvas-fullscreen-z-index);
+        overflow: hidden;
+      }
+
+      .segmentation-object-label {
+        position: var(--co-inphoto-edit-canvas-position-absolute);
+        pointer-events: none;
+        transform: var(--co-inphoto-edit-canvas-label-transform);
+        white-space: nowrap;
+        z-index: var(--co-inphoto-edit-canvas-label-z-index);
+      }
+
+      &.canvas-disabled {
+        cursor: not-allowed;
+        canvas {
+          cursor: not-allowed;
+        }
+      }
+    }
+  }
+}

package/lib/component/edit-canvas/style/_material-definition.scss

@@ -1,25 +1,21 @@
-.co-edit-canvas {
-  --co-inphoto-edit-canvas-font-size-text: var(--co-inphoto-font-size-text);
-  --co-inphoto-edit-canvas-font-family: var(--co-inphoto-font-family);
-  --co-inphoto-edit-canvas-position-relative: relative;
-  --co-inphoto-edit-canvas-position-absolute: absolute;
-  --co-inphoto-edit-canvas-position-fixed: fixed;
-  --co-inphoto-edit-canvas-full-size: 100%;
-  --co-inphoto-edit-canvas-container-height: 100vh;
-  --co-inphoto-edit-canvas-zero: 0;
-  --co-inphoto-edit-canvas-frame-padding: 20px;
-  --co-inphoto-edit-canvas-frame-margin: 20px;
-  --co-inphoto-edit-canvas-canvas-max-height: calc(100vh - 40px);
-  --co-inphoto-edit-canvas-button-offset: 20px;
-  --co-inphoto-edit-canvas-fullscreen-z-index: 1000;
-  --co-inphoto-edit-canvas-label-transform: translate(-50%, calc(-100% - 12px));
-  --co-inphoto-edit-canvas-label-background: rgba(0, 0, 0, 0.75);
-  --co-inphoto-edit-canvas-label-padding: 4px 8px;
-  --co-inphoto-edit-canvas-label-radius: 4px;
-  --co-inphoto-edit-canvas-label-font-size: 12px;
-  --co-inphoto-edit-canvas-label-z-index: 10;
-  --co-inphoto-edit-canvas-zoom-control-bottom: 25px;
-  --co-inphoto-edit-canvas-zoom-control-left: 100px;
-  --co-inphoto-edit-canvas-zoom-control-padding: 8px;
-  --co-inphoto-edit-canvas-zoom-button-height: 40px;
-}
+.co-edit-canvas {
+  --co-inphoto-edit-canvas-font-size-text: var(--co-inphoto-font-size-text);
+  --co-inphoto-edit-canvas-font-family: var(--co-inphoto-font-family);
+  --co-inphoto-edit-canvas-position-relative: relative;
+  --co-inphoto-edit-canvas-position-absolute: absolute;
+  --co-inphoto-edit-canvas-position-fixed: fixed;
+  --co-inphoto-edit-canvas-full-size: 100%;
+  --co-inphoto-edit-canvas-container-height: 100vh;
+  --co-inphoto-edit-canvas-zero: 0;
+  --co-inphoto-edit-canvas-frame-padding: 20px;
+  --co-inphoto-edit-canvas-frame-margin: 20px;
+  --co-inphoto-edit-canvas-canvas-max-height: calc(100vh - 40px);
+  --co-inphoto-edit-canvas-button-offset: 20px;
+  --co-inphoto-edit-canvas-fullscreen-z-index: 1000;
+  --co-inphoto-edit-canvas-label-transform: translate(-50%, calc(-100% - 12px));
+  --co-inphoto-edit-canvas-label-background: rgba(0, 0, 0, 0.75);
+  --co-inphoto-edit-canvas-label-padding: 4px 8px;
+  --co-inphoto-edit-canvas-label-radius: 4px;
+  --co-inphoto-edit-canvas-label-font-size: 12px;
+  --co-inphoto-edit-canvas-label-z-index: 10;
+}

package/lib/component/edit-canvas/style/_theme.scss

@@ -1,61 +1,26 @@
-@use '../../../style' as cfg;
-
-@include cfg.export-module('co-edit-canvas-theme') {
-  .co-edit-canvas {
-    font-family: var(--co-inphoto-edit-canvas-font-family);
-    font-size: var(--co-inphoto-edit-canvas-font-size-text);
-
-    .canvas-container {
-      background: var(--co-inphoto-background-white);
-
-      .canvas-frame {
-        background: var(--co-inphoto-background-white);
-        box-shadow: var(--co-inphoto-container-box-shadow);
-      }
-    }
-
-    .segmentation-object-label {
-      background: var(--co-inphoto-edit-canvas-label-background);
-      color: var(--co-inphoto-color-light);
-      padding: var(--co-inphoto-edit-canvas-label-padding);
-      border-radius: var(--co-inphoto-edit-canvas-label-radius);
-      font-size: var(--co-inphoto-edit-canvas-label-font-size);
-    }
-
-    // Zoom
-    .canvas-zoom-control {
-      padding: var(--co-inphoto-edit-canvas-zoom-control-padding);
-      border-radius: var(--co-inphoto-border-radius);
-      background: var(--co-inphoto-dialog-background-color);
-
-      .zoom-input-wrapper {
-        .co-input-text {
-          @include cfg.text();
-
-        }
-        .co-input-text:not(.no-style) {
-          input {
-            text-align: center;
-            align-self: center;
-            padding: var(--co-inphoto-edit-canvas-zero);
-          }
-        }
-      }
-
-      .co-button {
-        @include cfg.action-button(
-                var(--co-inphoto-button-background),
-                var(--co-inphoto-button-background),
-                var(--co-inphoto-button-color),
-                var(--co-inphoto-icon-size-small),
-                var(--co-inphoto-button-icon-size),
-                var(--co-inphoto-button-icon-color),
-                var(--co-inphoto-button-border),
-                var(--co-inphoto-button-radius),
-                var(--co-inphoto-edit-canvas-zero));
-
-        height: var(--co-inphoto-edit-canvas-zoom-button-height);
-      }
-    }
-  }
-}
+@use '../../../style' as cfg;
+
+@include cfg.export-module('co-edit-canvas-theme') {
+  .co-edit-canvas {
+    font-family: var(--co-inphoto-edit-canvas-font-family);
+    font-size: var(--co-inphoto-edit-canvas-font-size-text);
+
+    .canvas-container {
+      background: var(--co-inphoto-background-white);
+
+      .canvas-frame {
+        background: var(--co-inphoto-background-white);
+        box-shadow: var(--co-inphoto-container-box-shadow);
+      }
+    }
+
+    .segmentation-object-label {
+      background: var(--co-inphoto-edit-canvas-label-background);
+      color: var(--co-inphoto-color-light);
+      padding: var(--co-inphoto-edit-canvas-label-padding);
+      border-radius: var(--co-inphoto-edit-canvas-label-radius);
+      font-size: var(--co-inphoto-edit-canvas-label-font-size);
+    }
+
+  }
+}

package/lib/component/error-dialog/style/_layout.scss

@@ -1,36 +1,36 @@
-@use '../../../style' as cfg;
-
-@include cfg.export-module('co-error-dialog-layout') {
-  .co-error-dialog {
-
-    .error-dialog {
-      position: var(--co-inphoto-error-dialog-position);
-      inset: var(--co-inphoto-error-dialog-inset);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      z-index: var(--co-inphoto-error-dialog-z-index);
-
-      .error-dialog-container {
-        padding: var(--co-inphoto-error-dialog-container-padding);
-        max-width: var(--co-inphoto-error-dialog-container-max-width);
-        width: var(--co-inphoto-error-dialog-container-width);
-
-        .error-dialog-header {
-          display: flex;
-          align-items: center;
-          justify-content: space-between;
-          margin-bottom: var(--co-inphoto-error-dialog-header-margin-bottom);
-
-          h3 {
-            margin: var(--co-inphoto-error-dialog-header-title-margin);
-          }
-
-          .co-button {
-            cursor: pointer;
-          }
-        }
-      }
-    }
-  }
-}
+@use '../../../style' as cfg;
+
+@include cfg.export-module('co-error-dialog-layout') {
+  .co-error-dialog {
+
+    .error-dialog {
+      position: var(--co-inphoto-error-dialog-position);
+      inset: var(--co-inphoto-error-dialog-inset);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      z-index: var(--co-inphoto-error-dialog-z-index);
+
+      .error-dialog-container {
+        padding: var(--co-inphoto-error-dialog-container-padding);
+        max-width: var(--co-inphoto-error-dialog-container-max-width);
+        width: var(--co-inphoto-error-dialog-container-width);
+
+        .error-dialog-header {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          margin-bottom: var(--co-inphoto-error-dialog-header-margin-bottom);
+
+          h3 {
+            margin: var(--co-inphoto-error-dialog-header-title-margin);
+          }
+
+          .co-button {
+            cursor: pointer;
+          }
+        }
+      }
+    }
+  }
+}

package/lib/component/error-dialog/style/_material-definition.scss

@@ -1,12 +1,12 @@
-.co-error-dialog {
-  --co-inphoto-error-dialog-font-size-text: var(--co-inphoto-font-size-text);
-  --co-inphoto-error-dialog-font-family: var(--co-inphoto-font-family);
-  --co-inphoto-error-dialog-position: fixed;
-  --co-inphoto-error-dialog-inset: 0;
-  --co-inphoto-error-dialog-z-index: 120;
-  --co-inphoto-error-dialog-container-padding: 20px;
-  --co-inphoto-error-dialog-container-max-width: 550px;
-  --co-inphoto-error-dialog-container-width: 100%;
-  --co-inphoto-error-dialog-header-margin-bottom: 5px;
-  --co-inphoto-error-dialog-header-title-margin: 0;
-}
+.co-error-dialog {
+  --co-inphoto-error-dialog-font-size-text: var(--co-inphoto-font-size-text);
+  --co-inphoto-error-dialog-font-family: var(--co-inphoto-font-family);
+  --co-inphoto-error-dialog-position: fixed;
+  --co-inphoto-error-dialog-inset: 0;
+  --co-inphoto-error-dialog-z-index: 120;
+  --co-inphoto-error-dialog-container-padding: 20px;
+  --co-inphoto-error-dialog-container-max-width: 550px;
+  --co-inphoto-error-dialog-container-width: 100%;
+  --co-inphoto-error-dialog-header-margin-bottom: 5px;
+  --co-inphoto-error-dialog-header-title-margin: 0;
+}

package/lib/component/error-dialog/style/_theme.scss

@@ -1,17 +1,17 @@
-@use '../../../style' as cfg;
-
-@include cfg.export-module('co-error-dialog-theme') {
-  .co-error-dialog {
-    font-family: var(--co-inphoto-error-dialog-font-family);
-    font-size: var(--co-inphoto-error-dialog-font-size-text);
-
-    .error-dialog {
-      background: var(--co-inphoto-loader-background-dark);
-
-      .error-dialog-container {
-        background: var(--co-inphoto-dialog-background-color);
-        border-radius: var(--co-inphoto-border-radius);
-      }
-    }
-  }
-}
+@use '../../../style' as cfg;
+
+@include cfg.export-module('co-error-dialog-theme') {
+  .co-error-dialog {
+    font-family: var(--co-inphoto-error-dialog-font-family);
+    font-size: var(--co-inphoto-error-dialog-font-size-text);
+
+    .error-dialog {
+      background: var(--co-inphoto-loader-background-dark);
+
+      .error-dialog-container {
+        background: var(--co-inphoto-dialog-background-color);
+        border-radius: var(--co-inphoto-border-radius);
+      }
+    }
+  }
+}

package/lib/component/header/style/_layout.scss

@@ -1,20 +1,20 @@
-@use '../../../style' as cfg;
-
-@include cfg.export-module('co-header-layout') {
-  .co-header {
-    .header-container {
-      display: flex;
-      justify-content: space-between;
-      padding: var(--co-inphoto-header-padding);
-
-      .header-icon {
-        width: var(--co-inphoto-header-icon-size);
-        height: var(--co-inphoto-header-icon-size);
-        display: flex;
-        justify-content: space-around;
-        align-items: center;
-        margin-right: var(--co-inphoto-header-icon-margin-right);
-      }
-    }
-  }
-}
+@use '../../../style' as cfg;
+
+@include cfg.export-module('co-header-layout') {
+  .co-header {
+    .header-container {
+      display: flex;
+      justify-content: space-between;
+      padding: var(--co-inphoto-header-padding);
+
+      .header-icon {
+        width: var(--co-inphoto-header-icon-size);
+        height: var(--co-inphoto-header-icon-size);
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        margin-right: var(--co-inphoto-header-icon-margin-right);
+      }
+    }
+  }
+}

package/lib/component/header/style/_material-definition.scss

@@ -1,8 +1,8 @@
-.co-header {
-  --co-inphoto-header-font-size-text: var(--co-inphoto-font-size-text);
-  --co-inphoto-header-font-family: var(--co-inphoto-font-family);
-  --co-inphoto-header-padding: 25px 0 30px;
-  --co-inphoto-header-icon-size: 50px;
-  --co-inphoto-header-icon-radius: 50%;
-  --co-inphoto-header-icon-margin-right: 15px;
-}
+.co-header {
+  --co-inphoto-header-font-size-text: var(--co-inphoto-font-size-text);
+  --co-inphoto-header-font-family: var(--co-inphoto-font-family);
+  --co-inphoto-header-padding: 25px 0 30px;
+  --co-inphoto-header-icon-size: 50px;
+  --co-inphoto-header-icon-radius: 50%;
+  --co-inphoto-header-icon-margin-right: 15px;
+}