diff --git a/css/leptonChrome.css b/css/leptonChrome.css
index d937614..afa0cc9 100644
--- a/css/leptonChrome.css
+++ b/css/leptonChrome.css
@@ -4329,28 +4329,6 @@
     margin: unset !important;
   }
 }
-/*= Selected Tab - Photon like contextline ===================================*/
-@supports -moz-bool-pref("userChrome.tab.close_button_at_pinned") {
-  .tabbrowser-tab[pinned][visuallyselected]: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: -4px !important;
-    /* (24px - 16px) / 2 */
-  }
-
-  .tabbrowser-tab[pinned][visuallyselected]:not([busy]) .tab-icon-stack {
-    width: 0 !important;
-    position: absolute;
-    bottom: 8px;
-  }
-
-  .tabbrowser-tab[pinned][visuallyselected] .tab-icon-image {
-    display: none !important;
-  }
-}
 /*= Unselected Tab - Divide line =============================================*/
 /*= Unselected Tab - Dynamic Separator =======================================*/
 @supports -moz-bool-pref("userChrome.tab.dynamic_separtor") {
@@ -4777,6 +4755,75 @@
     /* Redefine from 19px !important, Original: 17px = (width - padding)  */
   }
 }
+/** 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: 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;
+    position: absolute;
+    bottom: 8px;
+  }
+  .tabbrowser-tab[pinned][visuallyselected]:not([style*="transform: translateX"]):hover .tab-icon-image {
+    display: none !important;
+  }
+  @supports -moz-bool-pref("userChrome.tab.close_button_at_pinned.always") {
+    .tabbrowser-tab[pinned][visuallyselected]: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;
+    }
+    .tabbrowser-tab[pinned][visuallyselected]:not([busy]) .tab-icon-stack {
+      width: 0 !important;
+      position: absolute;
+      bottom: 8px;
+    }
+    .tabbrowser-tab[pinned][visuallyselected] .tab-icon-image {
+      display: none !important;
+    }
+  }
+  @supports -moz-bool-pref("userChrome.tab.close_button_at_pinned.background") {
+    .tabbrowser-tab[pinned]:not([style*="transform: translateX"]):hover: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;
+    }
+    .tabbrowser-tab[pinned]:not([style*="transform: translateX"]):hover:not([busy]) .tab-icon-stack {
+      width: 0 !important;
+      position: absolute;
+      bottom: 8px;
+    }
+    .tabbrowser-tab[pinned]:not([style*="transform: translateX"]):hover .tab-icon-image {
+      display: none !important;
+    }
+  }
+}
 /** Clipped tabs - Always show tab icon ***************************************/
 @supports -moz-bool-pref("userChrome.tab.always_show_tab_icon") {
   .tab-icon-image:not([src], [pinned], [crashed], [busy]) {
diff --git a/src/tabbar/_clipped_tab.scss b/src/tabbar/_clipped_tab.scss
index ef4b341..8b237a8 100644
--- a/src/tabbar/_clipped_tab.scss
+++ b/src/tabbar/_clipped_tab.scss
@@ -8,6 +8,11 @@
   @import "clipped_tab/show_close_button_at_hover";
 }
 
+/** Clipped tabs - Show close button at pinned tab ****************************/
+@include Option("userChrome.tab.close_button_at_pinned") {
+  @import "clipped_tab/pinned_close_button";
+}
+
 /** Clipped tabs - Always show tab icon ***************************************/
 @include Option("userChrome.tab.always_show_tab_icon") {
   @import "clipped_tab/always_show_tab_icon";
diff --git a/src/tabbar/_container_tab.scss b/src/tabbar/_container_tab.scss
index dbb8d66..b3a966d 100644
--- a/src/tabbar/_container_tab.scss
+++ b/src/tabbar/_container_tab.scss
@@ -50,6 +50,7 @@
   .tabbrowser-tab[pinned][visuallyselected]:not([busy]):hover .tab-content::before {
     opacity: 0;
   }
+  // Don't hide at userChrome.tab.close_button_at_pinned.background
 }
 
 /* Pinned Tab - Titlechanged Indicator override */
diff --git a/src/tabbar/_selected_tab.scss b/src/tabbar/_selected_tab.scss
index b5b262f..8ef7dd8 100644
--- a/src/tabbar/_selected_tab.scss
+++ b/src/tabbar/_selected_tab.scss
@@ -22,8 +22,3 @@
 @include Option("userChrome.tab.photon_like_contextline") {
   @import "selected_tab/photon_like_contextline";
 }
-
-/*= Selected Tab - Photon like contextline ===================================*/
-@include Option("userChrome.tab.close_button_at_pinned") {
-  @import "selected_tab/pinned_close_button";
-}
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");
+  }
+}
diff --git a/src/tabbar/selected_tab/_pinned_close_button.scss b/src/tabbar/selected_tab/_pinned_close_button.scss
deleted file mode 100644
index e6bde8c..0000000
--- a/src/tabbar/selected_tab/_pinned_close_button.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-.tabbrowser-tab[pinned][visuallyselected]: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: -4px !important; /* (24px - 16px) / 2 */
-}
-.tabbrowser-tab[pinned][visuallyselected]:not([busy]) .tab-icon-stack {
-  width: 0 !important;
-  position: absolute;
-  bottom: 8px;
-}
-.tabbrowser-tab[pinned][visuallyselected] .tab-icon-image {
-  display: none !important;
-}