diff --git a/css/leptonChrome.css b/css/leptonChrome.css
index f43b6f5..68a234f 100644
--- a/css/leptonChrome.css
+++ b/css/leptonChrome.css
@@ -4690,13 +4690,25 @@
 }
 /** Clipped tabs - Show close button at pinned tab ****************************/
 @supports -moz-bool-pref("userChrome.tab.close_button_at_pinned") {
+  #tabbrowser-tabs {
+    --uc-close-button-size: 24px;
+    --uc-close-button-padding: 6px;
+    --uc-close-button-margin: calc((var(--uc-close-button-size) - 16px) / -2);
+  }
+
+  #tabbrowser-tabs[closebuttons="activetab"] {
+    --uc-close-button-size: 20px;
+    --uc-close-button-padding: 4px;
+  }
+
   .tabbrowser-tab[pinned][visuallyselected]:not([style*="transform: translateX"]):hover:not([busy]) .tab-close-button {
     display: -moz-box !important;
     -moz-box-ordinal-group: 0 !important;
     /* Looks like hover */
-    width: 24px !important;
-    height: 24px !important;
-    margin-inline: -1px !important;
+    width: var(--uc-close-button-size) !important;
+    height: var(--uc-close-button-size) !important;
+    padding: var(--uc-close-button-padding) !important;
+    margin-inline: var(--uc-close-button-margin) !important;
   }
   .tabbrowser-tab[pinned][visuallyselected]:not([style*="transform: translateX"]):hover:not([busy]) .tab-icon-stack {
     width: 0 !important;
@@ -4711,9 +4723,10 @@
       display: -moz-box !important;
       -moz-box-ordinal-group: 0 !important;
       /* Looks like hover */
-      width: 24px !important;
-      height: 24px !important;
-      margin-inline: -1px !important;
+      width: var(--uc-close-button-size) !important;
+      height: var(--uc-close-button-size) !important;
+      padding: var(--uc-close-button-padding) !important;
+      margin-inline: var(--uc-close-button-margin) !important;
     }
     .tabbrowser-tab[pinned][visuallyselected]:not([busy]) .tab-icon-stack {
       width: 0 !important;
@@ -4729,9 +4742,10 @@
       display: -moz-box !important;
       -moz-box-ordinal-group: 0 !important;
       /* Looks like hover */
-      width: 24px !important;
-      height: 24px !important;
-      margin-inline: -1px !important;
+      width: var(--uc-close-button-size) !important;
+      height: var(--uc-close-button-size) !important;
+      padding: var(--uc-close-button-padding) !important;
+      margin-inline: var(--uc-close-button-margin) !important;
     }
     .tabbrowser-tab[pinned]:not([style*="transform: translateX"]):hover:not([busy]) .tab-icon-stack {
       width: 0 !important;
diff --git a/src/tabbar/clipped_tab/_pinned_close_button.scss b/src/tabbar/clipped_tab/_pinned_close_button.scss
new file mode 100644
index 0000000..fd091b5
--- /dev/null
+++ b/src/tabbar/clipped_tab/_pinned_close_button.scss
@@ -0,0 +1,51 @@
+#tabbrowser-tabs {
+  --uc-close-button-size: 24px;
+  --uc-close-button-padding: 6px;
+  --uc-close-button-margin: calc((var(--uc-close-button-size) - 16px) / -2);
+}
+#tabbrowser-tabs[closebuttons="activetab"] {
+  --uc-close-button-size: 20px;
+  --uc-close-button-padding: 4px;
+}
+
+@mixin pinnedCloseButtonShow($prefix: "") {
+  #{$prefix}:not([busy]) .tab-close-button {
+    display: -moz-box !important;
+    -moz-box-ordinal-group: 0 !important;
+
+    /* Looks like hover */
+    width: var(--uc-close-button-size) !important;
+    height: var(--uc-close-button-size) !important;
+    padding: var(--uc-close-button-padding) !important;
+    margin-inline: var(--uc-close-button-margin) !important;
+  }
+}
+@mixin pinnedIconStackLayout($prefix: "") {
+  #{$prefix}:not([busy]) .tab-icon-stack {
+    width: 0 !important;
+    position: absolute;
+    bottom: 8px;
+  }
+}
+@mixin pinnedIconHide($prefix: "") {
+  #{$prefix} .tab-icon-image {
+    display: none !important;
+  }
+}
+
+.tabbrowser-tab[pinned] {
+  @include pinnedCloseButtonShow("&[visuallyselected]:not([style*='transform: translateX']):hover");
+  @include pinnedIconStackLayout("&[visuallyselected]:not([style*='transform: translateX']):hover");
+  @include pinnedIconHide("&[visuallyselected]:not([style*='transform: translateX']):hover");
+
+  @include Option("userChrome.tab.close_button_at_pinned.always") {
+    @include pinnedCloseButtonShow("&[visuallyselected]");
+    @include pinnedIconStackLayout("&[visuallyselected]");
+    @include pinnedIconHide("&[visuallyselected]");
+  }
+  @include Option("userChrome.tab.close_button_at_pinned.background") {
+    @include pinnedCloseButtonShow("&:not([style*='transform: translateX']):hover");
+    @include pinnedIconStackLayout("&:not([style*='transform: translateX']):hover");
+    @include pinnedIconHide("&:not([style*='transform: translateX']):hover");
+  }
+}