@finqu/cool 1.3.0 → 2.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@finqu/cool",
-  "version": "1.3.0",
+  "version": "2.0.2",
   "description": "Build beautiful, responsive web interfaces. Fast, flexible, and effortlessly customizable.",
   "keywords": [
     "ui",
@@ -10,14 +10,34 @@
   ],
   "license": "ISC",
   "author": "Finqu Oy",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/finqu/cool.git"
+  },
+  "bugs": {
+    "url": "https://github.com/finqu/cool/issues"
+  },
+  "homepage": "https://github.com/finqu/cool#readme",
   "main": "dist/js/cool.bundle.js",
   "module": "dist/js/cool.esm.js",
   "style": "dist/css/cool.css",
+  "exports": {
+    ".": {
+      "import": "./dist/js/cool.esm.js",
+      "require": "./dist/js/cool.bundle.js",
+      "default": "./dist/js/cool.bundle.js"
+    },
+    "./scss/*": "./scss/*",
+    "./dist/*": "./dist/*"
+  },
   "sideEffects": [
-    "dist/css/*.css"
+    "dist/css/*.css",
+    "dist/js/*.js",
+    "js/src/*.js"
   ],
   "files": [
-    "dist/"
+    "dist/",
+    "scss/"
   ],
   "publishConfig": {
     "access": "public"
@@ -32,10 +52,10 @@
     "css-main": "npm-run-all css-compile-main css-prefix-main css-minify-main",
     "css-compile": "sass --style=expanded --embed-sources scss/:dist/css/",
     "css-compile-main": "sass --style=expanded --embed-sources scss/cool.scss:dist/css/cool.css scss/cool-grid.scss:dist/css/cool-grid.css scss/cool-reboot.scss:dist/css/cool-reboot.css",
-    "css-minify": "cleancss -O1 --format breakWith=lf --with-rebase --source-map --source-map-inline-sources --output dist/css/ --batch --batch-suffix '.min' 'dist/css/*.css' '!dist/css/*.min.css'",
-    "css-minify-main": "cleancss -O1 --format breakWith=lf --with-rebase --source-map --source-map-inline-sources --output dist/css/cool.min.css dist/css/cool.css && cleancss -O1 --format breakWith=lf --with-rebase --source-map --source-map-inline-sources --output dist/css/cool-grid.min.css dist/css/cool-grid.css && cleancss -O1 --format breakWith=lf --with-rebase --source-map --source-map-inline-sources --output dist/css/cool-reboot.min.css dist/css/cool-reboot.css",
-    "css-prefix": "postcss --config build/postcss.config.js --replace 'dist/css/*.css' '!dist/css/*.min.css'",
-    "css-prefix-main": "postcss --config build/postcss.config.js --replace dist/css/cool.css dist/css/cool-grid.css dist/css/cool-reboot.css",
+    "css-minify": "node build/css-minify.js",
+    "css-minify-main": "node build/css-minify.js",
+    "css-prefix": "node build/css-prefix.js",
+    "css-prefix-main": "node build/css-prefix.js",
     "js": "npm-run-all clean-js js-compile js-minify",
     "js-main": "npm-run-all js-lint js-compile js-minify-main",
     "js-compile": "npm-run-all --parallel js-compile-standalone js-compile-standalone-esm js-compile-bundle js-compile-plugins",
@@ -44,7 +64,8 @@
     "js-compile-bundle": "rollup --environment BUNDLE:true --config build/rollup.config.mjs --sourcemap",
     "js-compile-plugins": "node build/build-plugins.js",
     "js-compile-plugins-coverage": "cross-env NODE_ENV=test node build/build-plugins.js",
-    "js-lint": "eslint --cache --cache-location .cache/.eslintcache js/src js/tests build/",
+    "js-lint": "eslint --cache --cache-location .cache/.eslintcache js/src build/",
+    "js-fix": "eslint --fix js/src",
     "js-minify": "npm-run-all --parallel js-minify-*",
     "js-minify-main": "npm-run-all js-minify-standalone js-minify-standalone-esm js-minify-bundle",
     "js-minify-standalone": "terser --compress typeofs=false --mangle --comments '/^!/' --source-map \"content=dist/js/cool.js.map,includeSources,url=cool.min.js.map\" --output dist/js/cool.min.js dist/js/cool.js",
@@ -54,11 +75,16 @@
     "dist": "npm-run-all --parallel css js",
     "test": "npm-run-all dist size",
     "prepublishOnly": "npm run dist",
+    "docs": "bash docs/serve.sh",
+    "docs:build": "node docs/_build.js",
+    "docs:fast": "bash docs/serve.sh --no-build",
+    "docs:watch": "bash docs/serve.sh --watch",
     "watch": "npm-run-all --parallel watch-*",
     "watch-css": "nodemon --watch scss/ --ext scss --exec \"npm run css\"",
     "watch-js": "nodemon --watch js/src/ --ext js --exec \"npm run js\"",
     "format": "prettier --write \"scss/**/*.scss\"",
-    "format-check": "prettier --check \"scss/**/*.scss\""
+    "format-check": "prettier --check \"scss/**/*.scss\"",
+    "release": "node scripts/release.js"
   },
   "devDependencies": {
     "@babel/cli": "^7.24.0",
@@ -70,16 +96,14 @@
     "@rollup/plugin-commonjs": "^25.0.0",
     "@rollup/plugin-node-resolve": "^15.2.0",
     "@size-limit/preset-small-lib": "^11.0.0",
-    "autoprefixer": "^10.4.0",
     "babel-plugin-istanbul": "^7.0.0",
-    "clean-css-cli": "^5.6.0",
     "cross-env": "^7.0.0",
     "eslint": "^8.57.0",
+    "jquery": "^3.7.1",
+    "lightningcss": "^1.31.1",
     "nodemon": "^3.1.0",
     "npm-run-all": "^4.1.0",
-    "postcss": "^8.4.0",
-    "postcss-cli": "^11.0.0",
-    "postcss-preset-env": "^9.5.0",
+    "perfect-scrollbar": "^1.5.6",
     "prettier": "^3.7.4",
     "rimraf": "^6.0.1",
     "rollup": "^4.0.0",
@@ -87,10 +111,18 @@
     "size-limit": "^11.0.0",
     "terser": "^5.31.1"
   },
-  "dependencies": {
+  "peerDependencies": {
     "jquery": "^3.7.1",
     "perfect-scrollbar": "^1.5.6"
   },
+  "peerDependenciesMeta": {
+    "jquery": {
+      "optional": true
+    },
+    "perfect-scrollbar": {
+      "optional": true
+    }
+  },
   "size-limit": [
     {
       "path": "dist/js/cool.bundle.js",
@@ -101,4 +133,4 @@
       "limit": "75 KB"
     }
   ]
-}
+}

package/scss/LISENCE

@@ -0,0 +1,15 @@
+ISC License
+
+Copyright (c) 2026, Finqu Oy
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted, provided that the above
+copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
+ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
+OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.

package/scss/_badge.scss

@@ -0,0 +1,134 @@
+@use "variables" as *;
+/* Badge ========================================================================== */
+
+@mixin cool-badge {
+    .badge {
+        font-family: var(--cool-badge-font-family);
+        font-size: var(--cool-badge-font-size);
+        font-weight: var(--cool-badge-font-weight);
+        padding: var(--cool-badge-padding-y) var(--cool-badge-padding-x);
+        line-height: var(--cool-badge-line-height);
+        border-radius: var(--cool-badge-border-radius);
+        border: var(--cool-badge-border, var(--cool-badge-border-width) solid var(--cool-theme-color-primary));
+        background-color: var(--cool-badge-bg, var(--cool-theme-color-primary));
+        color: var(--cool-badge-color, var(--cool-theme-text-color-primary));
+        box-shadow: var(--cool-badge-box-shadow, none);
+        box-sizing: border-box;
+        align-items: center;
+        display: inline-flex;
+        text-align: center;
+        text-decoration: none;
+        touch-action: manipulation;
+        user-select: none;
+        vertical-align: middle;
+        white-space: nowrap;
+        flex-direction: row;
+        position: relative;
+        text-transform: uppercase;
+        width: fit-content;
+        letter-spacing: 0.1px;
+
+        .alert-icon {
+            margin-right: 0.4em;
+
+            .icon {
+                color: var(--cool-badge-icon-color, var(--cool-theme-text-color-primary));
+            }
+        }
+    }
+
+    @each $color, $value in $theme-bg-colors {
+        .badge-#{$color} {
+            --cool-badge-bg: var(--cool-theme-bg-color-#{$color});
+            --cool-badge-border: var(--cool-badge-border-width) solid var(--cool-theme-bg-color-#{$color});
+            --cool-badge-color: var(--cool-theme-foreground-color-#{$color});
+            --cool-badge-box-shadow: 0
+                0
+                0
+                var(--cool-badge-box-shadow-blur)
+                color-mix(in srgb, var(--cool-color-#{$color}) var(--cool-badge-box-shadow-opacity), transparent);
+            --badge-icon-color: var(--cool-theme-foreground-color-#{$color});
+        }
+    }
+
+    @each $color in ("success", "info", "warning", "danger") {
+        .badge-#{$color} {
+            --cool-badge-bg: color-mix(in oklab, var(--cool-theme-color-#{$color}) 25%, var(--cool-body-surface-bg));
+            --cool-badge-border: var(--cool-badge-border-width)
+                solid
+                color-mix(in oklab, var(--cool-theme-color-#{$color}) 25%, var(--cool-body-surface-bg));
+        }
+    }
+
+    @each $color, $value in $theme-colors {
+        .badge-outline-#{$color} {
+            --cool-badge-bg: transparent;
+            --cool-badge-border: var(--cool-badge-border-width) solid var(--cool-theme-bg-color-#{$color});
+            --cool-badge-color: var(--cool-theme-color-#{$color});
+            --cool-badge-box-shadow: 0
+                0
+                0
+                var(--cool-badge-box-shadow-blur)
+                color-mix(in srgb, var(--cool-theme-color-#{$color}) var(--cool-badge-box-shadow-opacity), transparent);
+            --badge-icon-color: var(--cool-theme-color-#{$color});
+        }
+    }
+
+    .badge-xs {
+        --cool-badge-font-size: var(--cool-badge-font-size-xs);
+        --cool-badge-font-weight: var(--cool-badge-font-weight-xs);
+        --cool-badge-padding-y: var(--cool-badge-padding-y-xs);
+        --cool-badge-padding-x: var(--cool-badge-padding-x-xs);
+        --cool-badge-line-height: var(--cool-badge-line-height-xs);
+        --cool-badge-border-radius: var(--cool-badge-border-radius-xs);
+    }
+
+    .badge-sm {
+        --cool-badge-font-size: var(--cool-badge-font-size-sm);
+        --cool-badge-font-weight: var(--cool-badge-font-weight-sm);
+        --cool-badge-padding-y: var(--cool-badge-padding-y-sm);
+        --cool-badge-padding-x: var(--cool-badge-padding-x-sm);
+        --cool-badge-line-height: var(--cool-badge-line-height-sm);
+        --cool-badge-border-radius: var(--cool-badge-border-radius-sm);
+    }
+
+    .badge-btn {
+        --cool-badge-padding-y: calc(var(--cool-btn-padding-y) - 1px);
+        --cool-badge-padding-x: var(--cool-btn-padding-x);
+        --cool-badge-font-size: var(--cool-btn-font-size);
+        --cool-badge-line-height: var(--cool-btn-line-height);
+        --cool-badge-border-radius: var(--cool-btn-border-radius);
+    }
+
+    .badge-btn-xs {
+        --cool-badge-padding-y: calc(var(--cool-btn-padding-y-xs) - 1px);
+        --cool-badge-padding-x: var(--cool-btn-padding-x-xs);
+        --cool-badge-font-size: var(--cool-btn-font-size-xs);
+        --cool-badge-line-height: var(--cool-btn-line-height-xs);
+        --cool-badge-border-radius: var(--cool-btn-border-radius-xs);
+    }
+
+    .badge-btn-sm {
+        --cool-badge-padding-y: calc(var(--cool-btn-padding-y-sm) - 1px);
+        --cool-badge-padding-x: var(--cool-btn-padding-x-sm);
+        --cool-badge-font-size: var(--cool-btn-font-size-sm);
+        --cool-badge-line-height: var(--cool-btn-line-height-sm);
+        --cool-badge-border-radius: var(--cool-btn-border-radius-sm);
+    }
+
+    .badge-btn-lg {
+        --cool-badge-padding-y: calc(var(--cool-btn-padding-y-lg) - 1px);
+        --cool-badge-padding-x: var(--cool-btn-padding-x-lg);
+        --cool-badge-font-size: var(--cool-btn-font-size-lg);
+        --cool-badge-line-height: var(--cool-btn-line-height-lg);
+        --cool-badge-border-radius: var(--cool-btn-border-radius-lg);
+    }
+}
+
+@if $cool-use-component-layer {
+    @layer components {
+        @include cool-badge;
+    }
+} @else {
+    @include cool-badge;
+}

package/scss/_button-group.scss

@@ -0,0 +1,80 @@
+@use "variables" as *;
+/* Button Groups ========================================================================== */
+
+@mixin cool-button-group {
+    .btn-group {
+        position: relative;
+        display: inline-flex;
+        vertical-align: middle;
+
+        > .btn {
+            position: relative;
+            flex: 1 1 auto;
+            margin: 0;
+
+            &:hover,
+            &:focus,
+            &:active,
+            &.active {
+                z-index: 1;
+            }
+        }
+    }
+
+    .btn-group {
+        > .btn:not(:last-child):not(.dropdown-toggle),
+        > .btn-group:not(:last-child) > .btn {
+            border-top-right-radius: 0;
+            border-bottom-right-radius: 0;
+            margin-right: -1px;
+        }
+
+        > .btn:not(:first-child),
+        > .btn-group:not(:first-child) > .btn {
+            border-top-left-radius: 0;
+            border-bottom-left-radius: 0;
+        }
+    }
+
+    .btn-group-sm > .btn {
+        font-size: var(--cool-btn-font-size-sm);
+        padding: var(--cool-btn-padding-y-sm) var(--cool-btn-padding-x-sm);
+        border-radius: var(--cool-btn-border-radius-sm);
+    }
+
+    .btn-group-lg > .btn {
+        font-size: var(--cool-btn-font-size-lg);
+        padding: var(--cool-btn-padding-y-lg) var(--cool-btn-padding-x-lg);
+        border-radius: var(--cool-btn-border-radius-lg);
+    }
+
+    .btn-group-toggle {
+        > .btn,
+        > .btn-group > .btn {
+            margin-bottom: 0;
+
+            &.active {
+                --cool-btn-bg: var(--cool-theme-color-primary);
+                --cool-btn-color: var(--cool-theme-foreground-color-primary);
+                --cool-btn-border-color: var(--cool-theme-color-primary);
+                --cool-btn-hover-bg: color-mix(in oklab, var(--cool-theme-color-primary) 80%, transparent);
+                z-index: 3;
+            }
+
+            input[type="radio"],
+            input[type="checkbox"] {
+                position: absolute;
+                clip: rect(0, 0, 0, 0);
+                pointer-events: none;
+            }
+        }
+    }
+}
+
+@if $cool-use-component-layer {
+    @layer components {
+        @include cool-button-group;
+    }
+} @else {
+    @include cool-button-group;
+}

package/scss/_buttons.scss

@@ -0,0 +1,304 @@
+@use "variables" as *;
+/* Buttons ========================================================================== */
+
+@mixin cool-buttons {
+    .btn {
+        display: var(--cool-btn-display, inline-flex);
+        font-family: var(--cool-btn-font-family);
+        font-weight: var(--cool-btn-font-weight);
+        font-size: var(--cool-btn-font-size);
+        line-height: var(--cool-btn-line-height);
+        color: var(--cool-btn-color, var(--cool-body-color));
+        background-color: var(--cool-btn-bg, transparent);
+        border-width: var(--cool-btn-border-width);
+        border-style: solid;
+        border-color: var(--cool-btn-border-color, transparent);
+        border-radius: var(--cool-btn-border-radius);
+        cursor: var(--cool-btn-cursor);
+        padding: var(--cool-btn-padding-y) var(--cool-btn-padding-x);
+        transition: var(--cool-btn-transition);
+        width: var(--cool-btn-width, auto);
+        height: var(--cool-btn-height, auto);
+        text-align: var(--cool-btn-text-align, center);
+        justify-content: var(--cool-btn-text-align, center);
+        text-transform: var(--cool-btn-text-transform, none);
+        text-decoration: var(--cool-btn-text-decoration, none);
+        align-items: center;
+        touch-action: manipulation;
+        user-select: none;
+        vertical-align: middle;
+        white-space: nowrap;
+        box-sizing: border-box;
+        position: relative;
+        margin: 0;
+        outline: 0;
+
+        > span + .icon {
+            margin-left: var(--cool-icon-spacer);
+        }
+
+        &:has(.icon + *) > .icon {
+            margin-right: var(--cool-icon-spacer);
+        }
+
+        .icon,
+        .image,
+        span {
+            pointer-events: none;
+        }
+
+        &:hover,
+        &.hover,
+        &:focus,
+        &.focus {
+            color: var(--cool-btn-hover-color, var(--cool-btn-color, var(--cool-body-color)));
+            background-color: var(--cool-btn-hover-bg, var(--cool-btn-bg, transparent));
+            border-color: var(--cool-btn-hover-border-color, var(--cool-btn-border-color, transparent));
+            text-decoration: var(--cool-btn-hover-text-decoration, none);
+        }
+
+        &:active,
+        &.active {
+            color: var(--cool-btn-active-color, var(--cool-btn-hover-color, var(--cool-btn-color)));
+            background-color: var(--cool-btn-active-bg, var(--cool-btn-hover-bg, var(--cool-btn-bg, transparent)));
+            border-color: var(
+                --cool-btn-active-border-color,
+                var(--cool-btn-hover-border-color, var(--cool-btn-border-color, transparent))
+            );
+            text-decoration: var(--cool-btn-hover-text-decoration, none);
+        }
+
+        &:disabled,
+        &.disabled {
+            color: var(--cool-btn-disabled-color, var(--cool-btn-color, currentColor));
+            opacity: 0.65;
+            pointer-events: none;
+            text-decoration: none;
+
+            &:hover {
+                color: var(--cool-btn-disabled-color, var(--cool-btn-color, currentColor));
+            }
+        }
+
+        &.text-left,
+        &.text-start {
+            --cool-btn-text-align: left;
+        }
+
+        &.text-center {
+            --cool-btn-text-align: center;
+        }
+
+        &.text-right,
+        &.text-end {
+            --cool-btn-text-align: left;
+        }
+    }
+
+    .btn-primary {
+        --cool-btn-bg: var(--cool-theme-color-primary);
+        --cool-btn-color: var(--cool-theme-foreground-color-primary);
+        --cool-btn-border-color: var(--cool-theme-color-primary);
+        --cool-btn-hover-bg: color-mix(in oklab, var(--cool-theme-color-primary) 80%, transparent);
+    }
+
+    .btn-secondary {
+        --cool-btn-bg: var(--cool-theme-color-secondary);
+        --cool-btn-color: var(--cool-theme-foreground-color-secondary);
+        --cool-btn-border-color: var(--cool-theme-color-secondary);
+        --cool-btn-hover-bg: color-mix(in oklab, var(--cool-theme-color-secondary) 80%, transparent);
+    }
+
+    .btn-brand {
+        --cool-btn-bg: var(--cool-theme-color-brand);
+        --cool-btn-color: var(--cool-theme-foreground-color-brand);
+        --cool-btn-border-color: var(--cool-theme-color-brand);
+        --cool-btn-hover-bg: color-mix(in oklab, var(--cool-theme-color-brand) 80%, transparent);
+        --cool-btn-font-weight: var(--cool-font-weight-bold);
+    }
+
+    .btn-outline-primary {
+        --cool-btn-bg: color-mix(in oklab, var(--cool-theme-color-primary) 3%, transparent);
+        --cool-btn-color: var(--cool-theme-color-primary);
+        --cool-btn-border-color: var(--cool-theme-color-primary);
+        --cool-btn-hover-bg: color-mix(in oklab, var(--cool-theme-color-primary) 80%, transparent);
+        --cool-btn-hover-color: var(--cool-theme-foreground-color-primary);
+    }
+
+    .btn-outline-secondary {
+        --cool-btn-bg: color-mix(in oklab, var(--cool-theme-color-secondary) 7%, transparent);
+        --cool-btn-color: var(--cool-theme-foreground-color-secondary);
+        --cool-btn-border-color: var(--cool-theme-color-secondary);
+        --cool-btn-hover-bg: color-mix(in oklab, var(--cool-theme-color-secondary) 80%, transparent);
+        --cool-btn-hover-color: var(--cool-theme-foreground-color-secondary);
+    }
+
+    .btn-remove {
+        --cool-btn-bg: var(--cool-theme-color-secondary);
+        --cool-btn-color: var(--cool-theme-foreground-color-secondary);
+        --cool-btn-border-color: var(--cool-theme-color-secondary);
+        --cool-btn-hover-bg: color-mix(in oklab, var(--cool-theme-color-danger) 80%, transparent);
+        --cool-btn-hover-color: var(--cool-theme-foreground-color-danger);
+        --cool-btn-hover-border-color: color-mix(in oklab, var(--cool-theme-color-danger) 80%, transparent);
+    }
+
+    .btn-action {
+        --cool-btn-bg: var(--cool-theme-color-success);
+        --cool-btn-color: var(--cool-theme-foreground-color-success);
+        --cool-btn-border-color: var(--cool-theme-color-success);
+        --cool-btn-hover-bg: color-mix(in oklab, var(--cool-theme-color-success) 80%, transparent);
+        --cool-btn-hover-border-color: color-mix(in oklab, var(--cool-theme-color-success) 80%, transparent);
+        --cool-btn-font-weight: 600;
+
+        &:hover {
+            transform: translateY(-1px);
+        }
+
+        &:active {
+            transform: translateY(0);
+        }
+    }
+
+    .btn-link {
+        --cool-btn-bg: transparent;
+        --cool-btn-color: var(--cool-link-color);
+        --cool-btn-font-family: inherit;
+        --cool-btn-font-size: inherit;
+        --cool-btn-font-weight: var(--cool-link-font-weight);
+        --cool-btn-line-height: inherit;
+        --cool-btn-padding-y: 0;
+        --cool-btn-padding-x: 0;
+        --cool-btn-text-align: left;
+        --cool-btn-display: inline-flex;
+        --cool-btn-hover-bg: transparent;
+        --cool-btn-hover-color: var(--cool-link-hover-color);
+        --cool-btn-disabled-color: var(--cool-link-disabled-color);
+        --cool-btn-border-width: 0;
+        --cool-btn-text-decoration: none;
+        --cool-btn-hover-text-decoration: var(--cool-link-hover-text-decoration);
+    }
+
+    .btn-text {
+        --cool-btn-padding-y: 0;
+        --cool-btn-padding-x: 0;
+        --cool-btn-font-family: inherit;
+        --cool-btn-font-size: inherit;
+        --cool-btn-line-height: inherit;
+        --cool-btn-bg: transparent;
+        --cool-btn-color: var(--cool-body-color);
+        --cool-btn-text-align: left;
+        --cool-btn-display: inline;
+        --cool-btn-border-width: 0;
+    }
+
+    .btn-block {
+        width: 100%;
+        margin-top: 0;
+
+        + .btn-block {
+            margin-top: var(--cool-spacing-1);
+        }
+    }
+
+    .btn-icon {
+        --cool-btn-width: var(--cool-btn-icon-width);
+        --cool-btn-height: var(--cool-btn-icon-height);
+        --cool-btn-padding-y: 0;
+        --cool-btn-padding-x: 0;
+        --cool-btn-line-height: 0;
+        --cool-btn-text-align: center;
+        flex-shrink: 0;
+
+        @supports (aspect-ratio: 1) {
+            aspect-ratio: 1;
+        }
+
+        &.btn-sm {
+            --cool-btn-width: var(--cool-btn-icon-width-sm);
+            --cool-btn-height: var(--cool-btn-icon-height-sm);
+        }
+
+        &.btn-lg {
+            --cool-btn-width: var(--cool-btn-icon-width-lg);
+            --cool-btn-height: var(--cool-btn-icon-height-lg);
+        }
+
+        &:not(.btn-primary):not(.btn-secondary):not(.btn-brand):not(.btn-outline-primary):not(
+                .btn-outline-secondary
+            ):not(.btn-remove):not(.btn-action):not(.btn-link):not(.btn-text) {
+            --cool-btn-color: var(--cool-icon-color);
+            --cool-btn-hover-color: var(--cool-theme-color-dark);
+            --cool-link-disabled-color: var(--cool-icon-color);
+            --cool-btn-border-radius: 50%;
+
+            &:hover:not(.disabled):not([disabled]):not(.disable-hover) {
+                background-color: transparent;
+
+                &:before {
+                    transform: scale3d(1, 1, 1);
+                    opacity: 1;
+                }
+            }
+
+            &:not(.disabled):not([disabled]):not(.disable-hover) {
+                background-color: transparent;
+                transition:
+                    opacity 0.5s ease,
+                    scale 0.5s ease;
+
+                &:before {
+                    position: absolute;
+                    left: 0;
+                    top: 0;
+                    width: 100%;
+                    height: 100%;
+                    content: "";
+                    transform: scale3d(0, 0, 0);
+                    transition: all;
+                    transition-duration: 250ms;
+                    background-color: rgba(0, 0, 0, 0.1);
+                    border-radius: 50%;
+                    z-index: 0;
+                    opacity: 0;
+                }
+            }
+        }
+
+        > .icon {
+            vertical-align: middle;
+            margin: 0;
+        }
+    }
+
+    .btn-xs {
+        --cool-btn-padding-y: var(--cool-btn-padding-y-xs);
+        --cool-btn-padding-x: var(--cool-btn-padding-x-xs);
+        --cool-btn-font-size: var(--cool-btn-font-size-xs);
+        --cool-btn-line-height: var(--cool-btn-line-height-xs);
+        --cool-btn-border-radius: var(--cool-btn-border-radius-xs);
+    }
+
+    .btn-sm {
+        --cool-btn-padding-y: var(--cool-btn-padding-y-sm);
+        --cool-btn-padding-x: var(--cool-btn-padding-x-sm);
+        --cool-btn-font-size: var(--cool-btn-font-size-sm);
+        --cool-btn-line-height: var(--cool-btn-line-height-sm);
+        --cool-btn-border-radius: var(--cool-btn-border-radius-sm);
+    }
+
+    .btn-lg {
+        --cool-btn-padding-y: var(--cool-btn-padding-y-lg);
+        --cool-btn-padding-x: var(--cool-btn-padding-x-lg);
+        --cool-btn-font-size: var(--cool-btn-font-size-lg);
+        --cool-btn-line-height: var(--cool-btn-line-height-lg);
+        --cool-btn-border-radius: var(--cool-btn-border-radius-lg);
+    }
+}
+
+@if $cool-use-component-layer {
+    @layer components {
+        @include cool-buttons;
+    }
+} @else {
+    @include cool-buttons;
+}