@ascentgl/ads-ui 0.0.141 → 0.0.143

package/index.d.ts

@@ -18,6 +18,10 @@ export * from './lib/components/buttons/link-button';
 export * from './lib/components/icon-hover';
 export * from './lib/components/logo/primary-logo';
 export * from './lib/components/logo/ascent-logo';
+export * from './lib/components/logo/scms-logo';
+export * from './lib/components/logo/peak-marketplace-logo';
+export * from './lib/components/logo/peak-essentials-logo';
+export * from './lib/components/logo/peak-order-management-logo';
 export * from './lib/components/progress-indicators/progress-bar';
 export * from './lib/components/progress-indicators/progress-spinner';
 export * from './lib/components/progress-indicators/progress-indicator-spinner';

package/lib/components/logo/peak-essentials-logo/index.d.ts

@@ -0,0 +1 @@
+export * from './public-api';

package/lib/components/logo/peak-essentials-logo/peak-essentials-logo.component.d.ts

@@ -0,0 +1,7 @@
+import { AbstractApplicationLogoComponent } from '../scms-logo/abstract-application-logo.component';
+import * as i0 from "@angular/core";
+export declare class AdsPeakEssentialsLogoComponent extends AbstractApplicationLogoComponent {
+    label: string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AdsPeakEssentialsLogoComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AdsPeakEssentialsLogoComponent, "ads-peak-essentials-logo", never, {}, {}, never, never, false, never>;
+}

package/lib/components/logo/peak-essentials-logo/peak-essentials-logo.module.d.ts

@@ -0,0 +1,9 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./peak-essentials-logo.component";
+import * as i2 from "@angular/common";
+import * as i3 from "../primary-logo/primary-logo.module";
+export declare class AdsPeakEssentialsLogoModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<AdsPeakEssentialsLogoModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<AdsPeakEssentialsLogoModule, [typeof i1.AdsPeakEssentialsLogoComponent], [typeof i2.CommonModule, typeof i3.AdsPrimaryLogoModule], [typeof i1.AdsPeakEssentialsLogoComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<AdsPeakEssentialsLogoModule>;
+}

package/lib/components/logo/peak-essentials-logo/public-api.d.ts

@@ -0,0 +1,2 @@
+export * from './peak-essentials-logo.component';
+export * from './peak-essentials-logo.module';

package/lib/components/logo/peak-marketplace-logo/index.d.ts

@@ -0,0 +1 @@
+export * from './public-api';

package/lib/components/logo/peak-marketplace-logo/peak-marketplace-logo.component.d.ts

@@ -0,0 +1,7 @@
+import { AbstractApplicationLogoComponent } from '../scms-logo/abstract-application-logo.component';
+import * as i0 from "@angular/core";
+export declare class AdsPeakMarketplaceLogoComponent extends AbstractApplicationLogoComponent {
+    label: string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AdsPeakMarketplaceLogoComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AdsPeakMarketplaceLogoComponent, "ads-peak-marketplace-logo", never, {}, {}, never, never, false, never>;
+}

package/lib/components/logo/peak-marketplace-logo/peak-marketplace-logo.module.d.ts

@@ -0,0 +1,9 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./peak-marketplace-logo.component";
+import * as i2 from "@angular/common";
+import * as i3 from "../primary-logo/primary-logo.module";
+export declare class AdsPeakMarketplaceLogoModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<AdsPeakMarketplaceLogoModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<AdsPeakMarketplaceLogoModule, [typeof i1.AdsPeakMarketplaceLogoComponent], [typeof i2.CommonModule, typeof i3.AdsPrimaryLogoModule], [typeof i1.AdsPeakMarketplaceLogoComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<AdsPeakMarketplaceLogoModule>;
+}

package/lib/components/logo/peak-marketplace-logo/public-api.d.ts

@@ -0,0 +1,2 @@
+export * from './peak-marketplace-logo.component';
+export * from './peak-marketplace-logo.module';

package/lib/components/logo/peak-order-management-logo/index.d.ts

@@ -0,0 +1 @@
+export * from './public-api';

package/lib/components/logo/peak-order-management-logo/peak-order-management-logo.component.d.ts

@@ -0,0 +1,7 @@
+import { AbstractApplicationLogoComponent } from '../scms-logo/abstract-application-logo.component';
+import * as i0 from "@angular/core";
+export declare class AdsPeakOrderManagementLogoComponent extends AbstractApplicationLogoComponent {
+    label: string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AdsPeakOrderManagementLogoComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AdsPeakOrderManagementLogoComponent, "ads-peak-order-management-logo", never, {}, {}, never, never, false, never>;
+}

package/lib/components/logo/peak-order-management-logo/peak-order-management-logo.module.d.ts

@@ -0,0 +1,9 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./peak-order-management-logo.component";
+import * as i2 from "@angular/common";
+import * as i3 from "../primary-logo/primary-logo.module";
+export declare class AdsPeakOrderManagementLogoModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<AdsPeakOrderManagementLogoModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<AdsPeakOrderManagementLogoModule, [typeof i1.AdsPeakOrderManagementLogoComponent], [typeof i2.CommonModule, typeof i3.AdsPrimaryLogoModule], [typeof i1.AdsPeakOrderManagementLogoComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<AdsPeakOrderManagementLogoModule>;
+}

package/lib/components/logo/peak-order-management-logo/public-api.d.ts

@@ -0,0 +1,2 @@
+export * from './peak-order-management-logo.component';
+export * from './peak-order-management-logo.module';

package/lib/components/logo/scms-logo/abstract-application-logo.component.d.ts

@@ -0,0 +1,7 @@
+import * as i0 from "@angular/core";
+export declare abstract class AbstractApplicationLogoComponent {
+    /** @ignore */
+    abstract readonly label: string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AbstractApplicationLogoComponent, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<AbstractApplicationLogoComponent, never, never, {}, {}, never, never, true, never>;
+}

package/lib/components/logo/scms-logo/index.d.ts

@@ -0,0 +1 @@
+export * from './public-api';

package/lib/components/logo/scms-logo/public-api.d.ts

@@ -0,0 +1,2 @@
+export * from './scms-logo.component';
+export * from './scms-logo.module';

package/lib/components/logo/scms-logo/scms-logo.component.d.ts

@@ -0,0 +1,7 @@
+import { AbstractApplicationLogoComponent } from './abstract-application-logo.component';
+import * as i0 from "@angular/core";
+export declare class AdsScmsLogoComponent extends AbstractApplicationLogoComponent {
+    label: string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AdsScmsLogoComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AdsScmsLogoComponent, "ads-scms-logo", never, {}, {}, never, never, false, never>;
+}

package/lib/components/logo/scms-logo/scms-logo.module.d.ts

@@ -0,0 +1,9 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./scms-logo.component";
+import * as i2 from "@angular/common";
+import * as i3 from "../ascent-logo/ascent-logo.module";
+export declare class AdsScmsLogoModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<AdsScmsLogoModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<AdsScmsLogoModule, [typeof i1.AdsScmsLogoComponent], [typeof i2.CommonModule, typeof i3.AdsAscentLogoModule], [typeof i1.AdsScmsLogoComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<AdsScmsLogoModule>;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ascentgl/ads-ui",
-  "version": "0.0.141",
+  "version": "0.0.143",
   "peerDependencies": {
     "@ascentgl/ads-icons": ">=0.0.0",
     "@ascentgl/ads-utils": ">=0.0.0",
@@ -76,14 +76,14 @@
       "types": "./src/lib/components/progress-indicators/progress-bar/index.d.ts",
       "default": "./fesm2022/ascentgl-ads-ui-src-lib-components-progress-indicators-progress-bar.mjs"
     },
-    "./src/lib/components/progress-indicators/progress-spinner": {
-      "types": "./src/lib/components/progress-indicators/progress-spinner/index.d.ts",
-      "default": "./fesm2022/ascentgl-ads-ui-src-lib-components-progress-indicators-progress-spinner.mjs"
-    },
     "./src/lib/components/progress-indicators/progress-indicator-spinner": {
       "types": "./src/lib/components/progress-indicators/progress-indicator-spinner/index.d.ts",
       "default": "./fesm2022/ascentgl-ads-ui-src-lib-components-progress-indicators-progress-indicator-spinner.mjs"
     },
+    "./src/lib/components/progress-indicators/progress-spinner": {
+      "types": "./src/lib/components/progress-indicators/progress-spinner/index.d.ts",
+      "default": "./fesm2022/ascentgl-ads-ui-src-lib-components-progress-indicators-progress-spinner.mjs"
+    },
     "./src/lib/components/tags/tag-container": {
       "types": "./src/lib/components/tags/tag-container/index.d.ts",
       "default": "./fesm2022/ascentgl-ads-ui-src-lib-components-tags-tag-container.mjs"

package/src/assets/sass/ads-ui/abstracts/_functions.scss

@@ -1,18 +1,18 @@
-@use 'sass:map';
-@use 'variables' as *;
-
-@function color($key) {
-  @return var(--color- + $key);
-}
-
-@function font-weight($key) {
-  @return map.get($font-weights, $key);
-}
-
-@function font-size($key) {
-  @return map.get($font-sizes, $key);
-}
-
-@function spacing($key) {
-  @return map.get($spacings, $key);
-}
+@use 'sass:map';
+@use 'variables' as *;
+
+@function color($key) {
+  @return var(--color- + $key);
+}
+
+@function font-weight($key) {
+  @return map.get($font-weights, $key);
+}
+
+@function font-size($key) {
+  @return map.get($font-sizes, $key);
+}
+
+@function spacing($key) {
+  @return map.get($spacings, $key);
+}

package/src/assets/sass/ads-ui/abstracts/_mixins.scss

@@ -1,90 +1,90 @@
-// Media Queries
-@use 'functions' as *;
-
-@mixin breakpoint($breakpoint) {
-  @if $breakpoint == xs {
-    @media screen and (min-width: 320px) and (max-width: 480px) {
-      @content;
-    }
-  } @else if $breakpoint == sm {
-    @media screen and (min-width: 481px) and (max-width: 768px) {
-      @content;
-    }
-  } @else if $breakpoint == md {
-    @media screen and (min-width: 769px) and (max-width: 1024px) {
-      @content;
-    }
-  } @else if $breakpoint == lg {
-    @media screen and (min-width: 1025px) and (max-width: 1200px) {
-      @content;
-    }
-  } @else if $breakpoint == xl {
-    @media screen and (min-width: 1201px) {
-      @content;
-    }
-  } @else if $breakpoint == lt-sm {
-    @media screen and (max-width: 480px) {
-      @content;
-    }
-  } @else if $breakpoint == lt-md {
-    @media screen and (max-width: 768px) {
-      @content;
-    }
-  } @else if $breakpoint == lt-lg {
-    @media screen and (max-width: 1024px) {
-      @content;
-    }
-  } @else if $breakpoint == lt-xl {
-    @media screen and (max-width: 1200px) {
-      @content;
-    }
-  } @else if $breakpoint == gt-xs {
-    @media screen and (min-width: 481px) {
-      @content;
-    }
-  } @else if $breakpoint == gt-sm {
-    @media screen and (min-width: 769px) {
-      @content;
-    }
-  } @else if $breakpoint == gt-md {
-    @media screen and (min-width: 1025px) {
-      @content;
-    }
-  } @else if $breakpoint == gt-lg {
-    @media screen and (min-width: 1201px) {
-      @content;
-    }
-  }
-}
-
-@mixin font-size($breakpoint: base) {
-  @if $breakpoint == xs {
-    font-size: 0.75rem;
-  } @else if $breakpoint == sm {
-    font-size: 0.875rem;
-  } @else if $breakpoint == base {
-    font-size: 1rem;
-  } @else if $breakpoint == lg {
-    font-size: 1.125rem;
-  } @else if $breakpoint == xl {
-    font-size: 1.25rem;
-  } @else if $breakpoint == 2xl {
-    font-size: 1.5rem;
-  } @else if $breakpoint == 3xl {
-    font-size: 1.875rem;
-  } @else if $breakpoint == 4xl {
-    font-size: 2.25rem;
-  } @else if $breakpoint == 5xl {
-    font-size: 3rem;
-  } @else if $breakpoint == 6xl {
-    font-size: 4rem;
-  }
-}
-
-@mixin background-color($theme: primary) {
-  background-color: color($theme);
-}
-
-@mixin color($theme: dark) {
-  color: color($theme);
-}
+// Media Queries
+@use 'functions' as *;
+
+@mixin breakpoint($breakpoint) {
+  @if $breakpoint == xs {
+    @media screen and (min-width: 320px) and (max-width: 480px) {
+      @content;
+    }
+  } @else if $breakpoint == sm {
+    @media screen and (min-width: 481px) and (max-width: 768px) {
+      @content;
+    }
+  } @else if $breakpoint == md {
+    @media screen and (min-width: 769px) and (max-width: 1024px) {
+      @content;
+    }
+  } @else if $breakpoint == lg {
+    @media screen and (min-width: 1025px) and (max-width: 1200px) {
+      @content;
+    }
+  } @else if $breakpoint == xl {
+    @media screen and (min-width: 1201px) {
+      @content;
+    }
+  } @else if $breakpoint == lt-sm {
+    @media screen and (max-width: 480px) {
+      @content;
+    }
+  } @else if $breakpoint == lt-md {
+    @media screen and (max-width: 768px) {
+      @content;
+    }
+  } @else if $breakpoint == lt-lg {
+    @media screen and (max-width: 1024px) {
+      @content;
+    }
+  } @else if $breakpoint == lt-xl {
+    @media screen and (max-width: 1200px) {
+      @content;
+    }
+  } @else if $breakpoint == gt-xs {
+    @media screen and (min-width: 481px) {
+      @content;
+    }
+  } @else if $breakpoint == gt-sm {
+    @media screen and (min-width: 769px) {
+      @content;
+    }
+  } @else if $breakpoint == gt-md {
+    @media screen and (min-width: 1025px) {
+      @content;
+    }
+  } @else if $breakpoint == gt-lg {
+    @media screen and (min-width: 1201px) {
+      @content;
+    }
+  }
+}
+
+@mixin font-size($breakpoint: base) {
+  @if $breakpoint == xs {
+    font-size: 0.75rem;
+  } @else if $breakpoint == sm {
+    font-size: 0.875rem;
+  } @else if $breakpoint == base {
+    font-size: 1rem;
+  } @else if $breakpoint == lg {
+    font-size: 1.125rem;
+  } @else if $breakpoint == xl {
+    font-size: 1.25rem;
+  } @else if $breakpoint == 2xl {
+    font-size: 1.5rem;
+  } @else if $breakpoint == 3xl {
+    font-size: 1.875rem;
+  } @else if $breakpoint == 4xl {
+    font-size: 2.25rem;
+  } @else if $breakpoint == 5xl {
+    font-size: 3rem;
+  } @else if $breakpoint == 6xl {
+    font-size: 4rem;
+  }
+}
+
+@mixin background-color($theme: primary) {
+  background-color: color($theme);
+}
+
+@mixin color($theme: dark) {
+  color: color($theme);
+}

package/src/assets/sass/ads-ui/abstracts/_variables.scss

@@ -1,125 +1,125 @@
-$box-shadow: 0 3px 6px 0 rgba(0, 73, 135, 16%);
-
-$colors: (
-  white: #ffffff,
-  muted-30: #fcfdff,
-  muted-50: #f9fbff,
-  muted: #f2f7ff,
-  light-30: #f1f3f9,
-  light-80: #dae0ee,
-  light: #ced6e8,
-  light-opacity-50: rgba(206, 214, 232, 0.5),
-  medium-30: #c6c8d0,
-  medium-50: #b2b6c6,
-  medium: #646c8d,
-  medium-opacity-50: rgba(100, 108, 141, 0.5),
-  dark-10: #666666,
-  dark-30: #5c5c5c,
-  dark-50: #525252,
-  dark-80: #474747,
-  dark-90: #333333,
-  dark: #292929,
-  black: #1e1e1e,
-
-  primary: #041f41,
-  primary-hover: #044986,
-  primary-pressed: #366d9e,
-
-  secondary: #017d93,
-  secondary-hover: #015a6a,
-  secondary-pressed: #013b46,
-  secondary-10: rgba(1, 125, 147, 0.1),
-  link: #0077b3,
-  link-hover: #005885,
-  link-pressed: #002638,
-
-  error: #bb1e1e,
-  error-hover: #ab1c1c,
-  error-pressed: #771313,
-
-  success: #238170,
-  success-hover: #19584c,
-  success-pressed: #10382e,
-
-  logo: #004987,
-);
-
-$colors-dark: (
-  white: #292929,
-  muted-30: #1e1e1e,
-  muted-50: #333333,
-  muted: #474747,
-  light-30: #525252,
-  light-80: #5c5c5c,
-  light: #666666,
-  light-opacity-50: rgba(102, 102, 102, 0.5),
-  medium-30: #fcfdff,
-  medium-50: #f9fbff,
-  medium: #f2f7ff,
-  medium-opacity-50: rgba(242, 247, 255, 0.5),
-  dark-10: #ced6e8,
-  dark-30: #dae0ee,
-  dark-50: #f1f3f9,
-  dark-80: #f2f7ff,
-  dark-90: #f9fbff,
-  dark: #ffffff,
-  black: #fcfdff,
-
-  primary: #66c5d4,
-  primary-hover: #33b1c6,
-  primary-pressed: #009fb8,
-
-  secondary: #cae5e8,
-  secondary-hover: #a2cbcf,
-  secondary-pressed: #99b9bc,
-  secondary-10: rgba(202, 229, 232, 0.1),
-  link: #52c5ff,
-  link-hover: #1fb4ff,
-  link-pressed: #007ab8,
-
-  error: #ff7070,
-  error-hover: #ff2929,
-  error-pressed: #cc0000,
-
-  success: #53d0b9,
-  success-hover: #2ca08b,
-  success-pressed: #248473,
-
-  logo: #ffffff,
-);
-
-$font-weights: (
-  regular: 400,
-  medium: 500,
-  semibold: 600,
-  bold: 700,
-);
-
-$font-sizes: (
-  text-xxs: 0.675rem,
-  text-xs: 0.75rem,
-  text-sm: 0.875rem,
-  text-base: 1rem,
-  text-lg: 1.125rem,
-  text-xl: 1.25rem,
-  text-2xl: 1.5rem,
-  text-3xl: 1.875rem,
-  text-4xl: 2.25rem,
-  text-5xl: 3rem,
-  text-6xl: 4rem,
-);
-
-$spacings: (
-  space-4: 4px,
-  space-8: 8px,
-  space-12: 12px,
-  space-16: 16px,
-  space-24: 24px,
-  space-32: 32px,
-  space-40: 40px,
-  space-48: 48px,
-  space-56: 56px,
-  space-64: 64px,
-  space-72: 72px,
-  space-80: 80px,
-);
+$box-shadow: 0 3px 6px 0 rgba(0, 73, 135, 16%);
+
+$colors: (
+  white: #ffffff,
+  muted-30: #fcfdff,
+  muted-50: #f9fbff,
+  muted: #f2f7ff,
+  light-30: #f1f3f9,
+  light-80: #dae0ee,
+  light: #ced6e8,
+  light-opacity-50: rgba(206, 214, 232, 0.5),
+  medium-30: #c6c8d0,
+  medium-50: #b2b6c6,
+  medium: #646c8d,
+  medium-opacity-50: rgba(100, 108, 141, 0.5),
+  dark-10: #666666,
+  dark-30: #5c5c5c,
+  dark-50: #525252,
+  dark-80: #474747,
+  dark-90: #333333,
+  dark: #292929,
+  black: #1e1e1e,
+
+  primary: #041f41,
+  primary-hover: #044986,
+  primary-pressed: #366d9e,
+
+  secondary: #017d93,
+  secondary-hover: #015a6a,
+  secondary-pressed: #013b46,
+  secondary-10: rgba(1, 125, 147, 0.1),
+  link: #0077b3,
+  link-hover: #005885,
+  link-pressed: #002638,
+
+  error: #bb1e1e,
+  error-hover: #ab1c1c,
+  error-pressed: #771313,
+
+  success: #238170,
+  success-hover: #19584c,
+  success-pressed: #10382e,
+
+  logo: #004987,
+);
+
+$colors-dark: (
+  white: #292929,
+  muted-30: #1e1e1e,
+  muted-50: #333333,
+  muted: #474747,
+  light-30: #525252,
+  light-80: #5c5c5c,
+  light: #666666,
+  light-opacity-50: rgba(102, 102, 102, 0.5),
+  medium-30: #fcfdff,
+  medium-50: #f9fbff,
+  medium: #f2f7ff,
+  medium-opacity-50: rgba(242, 247, 255, 0.5),
+  dark-10: #ced6e8,
+  dark-30: #dae0ee,
+  dark-50: #f1f3f9,
+  dark-80: #f2f7ff,
+  dark-90: #f9fbff,
+  dark: #ffffff,
+  black: #fcfdff,
+
+  primary: #66c5d4,
+  primary-hover: #33b1c6,
+  primary-pressed: #009fb8,
+
+  secondary: #cae5e8,
+  secondary-hover: #a2cbcf,
+  secondary-pressed: #99b9bc,
+  secondary-10: rgba(202, 229, 232, 0.1),
+  link: #52c5ff,
+  link-hover: #1fb4ff,
+  link-pressed: #007ab8,
+
+  error: #ff7070,
+  error-hover: #ff2929,
+  error-pressed: #cc0000,
+
+  success: #53d0b9,
+  success-hover: #2ca08b,
+  success-pressed: #248473,
+
+  logo: #ffffff,
+);
+
+$font-weights: (
+  regular: 400,
+  medium: 500,
+  semibold: 600,
+  bold: 700,
+);
+
+$font-sizes: (
+  text-xxs: 0.675rem,
+  text-xs: 0.75rem,
+  text-sm: 0.875rem,
+  text-base: 1rem,
+  text-lg: 1.125rem,
+  text-xl: 1.25rem,
+  text-2xl: 1.5rem,
+  text-3xl: 1.875rem,
+  text-4xl: 2.25rem,
+  text-5xl: 3rem,
+  text-6xl: 4rem,
+);
+
+$spacings: (
+  space-4: 4px,
+  space-8: 8px,
+  space-12: 12px,
+  space-16: 16px,
+  space-24: 24px,
+  space-32: 32px,
+  space-40: 40px,
+  space-48: 48px,
+  space-56: 56px,
+  space-64: 64px,
+  space-72: 72px,
+  space-80: 80px,
+);

package/src/assets/sass/ads-ui/base/_reset.scss

@@ -1,19 +1,19 @@
-@use '../abstracts/functions' as *;
-
-::-webkit-scrollbar {
-  width: 10px;
-  height: 10px;
-  background-color: transparent;
-}
-
-::-webkit-scrollbar-thumb {
-  width: 10px;
-  background: color(muted);
-  border: 1px solid color(light);
-  border-radius: 100px;
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background: color(medium-30);
-  border-color: color(medium-30);
-}
+@use '../abstracts/functions' as *;
+
+::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+  background-color: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  width: 10px;
+  background: color(muted);
+  border: 1px solid color(light);
+  border-radius: 100px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: color(medium-30);
+  border-color: color(medium-30);
+}