diff --git a/.vscode/settings.json b/.vscode/settings.json
index 25fa6215..7f725afc 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,3 +1,18 @@
 {
-  "typescript.tsdk": "node_modules/typescript/lib"
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "workbench.colorCustomizations": {
+    "activityBar.activeBackground": "#3d6546",
+    "activityBar.background": "#3d6546",
+    "activityBar.foreground": "#e7e7e7",
+    "activityBar.inactiveForeground": "#e7e7e799",
+    "activityBarBadge.background": "#9288b7",
+    "activityBarBadge.foreground": "#15202b",
+    "sash.hoverBorder": "#3d6546",
+    "statusBar.background": "#2a4530",
+    "statusBar.foreground": "#e7e7e7",
+    "statusBarItem.hoverBackground": "#3d6546",
+    "statusBarItem.remoteBackground": "#2a4530",
+    "statusBarItem.remoteForeground": "#e7e7e7"
+  },
+  "peacock.color": "#2a4530"
 }
diff --git a/projects/angular-split/src/lib/component/split.component.scss b/projects/angular-split/src/lib/component/split.component.css
similarity index 95%
rename from projects/angular-split/src/lib/component/split.component.scss
rename to projects/angular-split/src/lib/component/split.component.css
index 9948cea5..36ce960e 100644
--- a/projects/angular-split/src/lib/component/split.component.scss
+++ b/projects/angular-split/src/lib/component/split.component.css
@@ -1,4 +1,4 @@
-:host {
+as-split {
   display: flex;
   flex-wrap: nowrap;
   justify-content: flex-start;
@@ -58,7 +58,9 @@
     & > .as-split-gutter {
       flex-direction: row;
       cursor: col-resize;
-      height: 100%; // <- Fix safari bug about gutter height when direction is horizontal.
+      height: 100%;
+
+      /* <- Fix safari bug about gutter height when direction is horizontal. */
 
       & > .as-split-gutter-icon {
         background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==');
diff --git a/projects/angular-split/src/lib/component/split.component.ts b/projects/angular-split/src/lib/component/split.component.ts
index bddfa206..435ca344 100644
--- a/projects/angular-split/src/lib/component/split.component.ts
+++ b/projects/angular-split/src/lib/component/split.component.ts
@@ -83,7 +83,7 @@ import { SplitGutterDirective } from '../gutter/split-gutter.directive'
   selector: 'as-split',
   exportAs: 'asSplit',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  styleUrls: [`./split.component.scss`],
+  styleUrls: [`./split.component.css`],
   template: ` <ng-content></ng-content>
     <ng-template
       ngFor
@@ -137,7 +137,7 @@ import { SplitGutterDirective } from '../gutter/split-gutter.directive'
         </ng-template>
       </div>
     </ng-template>`,
-  encapsulation: ViewEncapsulation.Emulated,
+  encapsulation: ViewEncapsulation.None,
 })
 export class SplitComponent implements AfterViewInit, OnDestroy {
   @ContentChild(SplitGutterDirective) customGutter: SplitGutterDirective
diff --git a/src/styles.scss b/src/styles.scss
index e2388d38..f983e8c4 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -50,3 +50,11 @@ split-area > p {
 code {
   color: #bb7a00;
 }
+
+:where(as-split) {
+  --as-split-padding: 1rem;
+  --as-split-margin-top-bottom: 0.25rem;
+  --as-split-margin-left-right: 0.25rem;
+  --as-split-whatever_we_need:  
+;
+}