mypgs 1.1.2 → 1.3.2

package/dist/css/index.css

@@ -2299,11 +2299,7 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
   --pageShell-aside-sticky-bottom: var(--pageShell-gap);
   --pageShell-aside-count: 0;
   --pageShell-gap-count: 0;
-  --pageShell-max-width: calc(
-      var(--pageShell-content-max-width) +
-      var(--pageShell-aside-width-total) +
-      (var(--pageShell-gap) * var(--pageShell-gap-count))
-  );
+  --pageShell-max-width: calc(var(--pageShell-content-max-width) + var(--pageShell-aside-width-total) + (var(--pageShell-gap) * var(--pageShell-gap-count)));
   display: grid;
   grid-template-columns: minmax(0, var(--pageShell-content-max-width));
   grid-template-areas: "content";
@@ -2340,6 +2336,7 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
   grid-area: content;
   width: 100%;
   min-width: 0;
+  padding-block: var(--page-top);
 }
 [pgs~=initP] [pgs~=pageShell] [pgs~=pageShell-asideLeft],
 [pgs~=initP] [pgs~=pageShell] [pgs~=pageShell-asideRight] {
@@ -2349,13 +2346,15 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
   align-items: flex-start;
   isolation: isolate;
   position: sticky;
-  top: var(--pageShell-aside-sticky-top);
+  top: 0;
   width: 100%;
-  max-height: calc(100svh - var(--pageShell-aside-sticky-top) - var(--pageShell-aside-sticky-bottom));
+  max-height: 100svh;
   overflow-y: auto;
   overscroll-behavior: contain;
   scrollbar-gutter: stable;
   scrollbar-width: none;
+  padding-block: var(--page-top);
+  padding-bottom: var(--padding-2);
 }
 [pgs~=initP] [pgs~=pageShell] [pgs~=pageShell-asideLeft]::-webkit-scrollbar,
 [pgs~=initP] [pgs~=pageShell] [pgs~=pageShell-asideRight]::-webkit-scrollbar {
@@ -2415,6 +2414,7 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
   [pgs~=initP] [pgs~=pageShell] [pgs~=pageShell-content] {
     width: 100%;
     max-width: none;
+    padding-block: unset;
   }
   [pgs~=initP] [pgs~=pageShell] [pgs~=pageShell-asideLeft],
   [pgs~=initP] [pgs~=pageShell] [pgs~=pageShell-asideRight] {
@@ -2488,19 +2488,19 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
   outline: var(--button-border);
   border-radius: var(--border-radius-input);
   display: flex;
-  gap: calc(var(--button-size) / 2);
+  gap: calc(var(--button-size) / 1.5);
   align-items: center;
   padding: var(--button-padding);
-  width: max-content;
   height: max-content;
+  width: max-content;
   margin-block: auto;
 }
 [pgs~=initP] [pgs~=button]:has(i) {
   --button-padding-right: calc(var(--button-size) * 2);
-  --button-padding-left: calc(var(--button-size) * 1.4);
+  --button-padding-left: calc(var(--button-size) * 1.5);
 }
 [pgs~=initP] [pgs~=button][pgs-option~=buttonReverse]:has(i) {
-  --button-padding-right: calc(var(--button-size) * 1.4);
+  --button-padding-right: calc(var(--button-size) * 1.5);
   --button-padding-left: calc(var(--button-size) * 2);
 }
 [pgs~=initP] [pgs~=button] {
@@ -2623,19 +2623,19 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
   outline: var(--button-border);
   border-radius: var(--border-radius-input);
   display: flex;
-  gap: calc(var(--button-size) / 2);
+  gap: calc(var(--button-size) / 1.5);
   align-items: center;
   padding: var(--button-padding);
-  width: max-content;
   height: max-content;
+  width: max-content;
   margin-block: auto;
 }
 [pgs~=initP] [pgs~=buttonNohover]:has(i) {
   --button-padding-right: calc(var(--button-size) * 2);
-  --button-padding-left: calc(var(--button-size) * 1.4);
+  --button-padding-left: calc(var(--button-size) * 1.5);
 }
 [pgs~=initP] [pgs~=buttonNohover][pgs-option~=buttonReverse]:has(i) {
-  --button-padding-right: calc(var(--button-size) * 1.4);
+  --button-padding-right: calc(var(--button-size) * 1.5);
   --button-padding-left: calc(var(--button-size) * 2);
 }
 [pgs~=initP] [pgs~=buttonNohover] {
@@ -2715,11 +2715,11 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
   outline: var(--button-border);
   border-radius: var(--border-radius-input);
   display: flex;
-  gap: calc(var(--button-size) / 2);
+  gap: calc(var(--button-size) / 1.5);
   align-items: center;
   padding: var(--button-padding);
-  width: max-content;
   height: max-content;
+  width: max-content;
   margin-block: auto;
   flex: 0 0;
   aspect-ratio: 1;
@@ -2856,19 +2856,19 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
   outline: var(--button-border);
   border-radius: var(--border-radius-input);
   display: flex;
-  gap: calc(var(--button-size) / 2);
+  gap: calc(var(--button-size) / 1.5);
   align-items: center;
   padding: var(--button-padding);
-  width: max-content;
   height: max-content;
+  width: max-content;
   margin-block: auto;
 }
 [pgs~=initP] [pgs~=buttonStrong]:has(i) {
   --button-padding-right: calc(var(--button-size) * 2);
-  --button-padding-left: calc(var(--button-size) * 1.4);
+  --button-padding-left: calc(var(--button-size) * 1.5);
 }
 [pgs~=initP] [pgs~=buttonStrong][pgs-option~=buttonReverse]:has(i) {
-  --button-padding-right: calc(var(--button-size) * 1.4);
+  --button-padding-right: calc(var(--button-size) * 1.5);
   --button-padding-left: calc(var(--button-size) * 2);
 }
 [pgs~=initP] [pgs~=buttonStrong] {
@@ -3014,11 +3014,11 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
   outline: var(--button-border);
   border-radius: var(--border-radius-input);
   display: flex;
-  gap: calc(var(--button-size) / 2);
+  gap: calc(var(--button-size) / 1.5);
   align-items: center;
   padding: var(--button-padding);
-  width: max-content;
   height: max-content;
+  width: max-content;
   margin-block: auto;
   flex: 0 0;
   aspect-ratio: 1;
@@ -3162,19 +3162,19 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
   outline: var(--button-border);
   border-radius: var(--border-radius-input);
   display: flex;
-  gap: calc(var(--button-size) / 2);
+  gap: calc(var(--button-size) / 1.5);
   align-items: center;
   padding: var(--button-padding);
-  width: max-content;
   height: max-content;
+  width: max-content;
   margin-block: auto;
 }
 [pgs~=initP] [pgs~=buttonBig]:has(i) {
   --button-padding-right: calc(var(--button-size) * 2);
-  --button-padding-left: calc(var(--button-size) * 1.4);
+  --button-padding-left: calc(var(--button-size) * 1.5);
 }
 [pgs~=initP] [pgs~=buttonBig][pgs-option~=buttonReverse]:has(i) {
-  --button-padding-right: calc(var(--button-size) * 1.4);
+  --button-padding-right: calc(var(--button-size) * 1.5);
   --button-padding-left: calc(var(--button-size) * 2);
 }
 [pgs~=initP] [pgs~=buttonBig] {
@@ -3316,11 +3316,11 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
   outline: var(--button-border);
   border-radius: var(--border-radius-input);
   display: flex;
-  gap: calc(var(--button-size) / 2);
+  gap: calc(var(--button-size) / 1.5);
   align-items: center;
   padding: var(--button-padding);
-  width: max-content;
   height: max-content;
+  width: max-content;
   margin-block: auto;
   flex: 0 0;
   aspect-ratio: 1;
@@ -3412,16 +3412,12 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
   cursor: not-allowed;
 }
 [pgs~=initP] [pgs~=buttonClose] {
-  --button-background: var(--color-error-background);
-  --button-color: var(--color-error);
+  --button-background: var(--color-primary-soft);
   --button-size: 1rem;
   --button-icon-size: 1.3rem;
   aspect-ratio: 1;
   height: max-content;
 }
-[pgs~=initP] [pgs~=buttonClose] i {
-  color: var(--color-error);
-}
 [pgs~=initP] [pgs~=textarea] {
   align-items: flex-start;
   display: flex;
@@ -3774,19 +3770,19 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
   outline: var(--button-border);
   border-radius: var(--border-radius-input);
   display: flex;
-  gap: calc(var(--button-size) / 2);
+  gap: calc(var(--button-size) / 1.5);
   align-items: center;
   padding: var(--button-padding);
-  width: max-content;
   height: max-content;
+  width: max-content;
   margin-block: auto;
 }
 [pgs~=initP] [pgs~=twoState] label:has(i) {
   --button-padding-right: calc(var(--button-size) * 2);
-  --button-padding-left: calc(var(--button-size) * 1.4);
+  --button-padding-left: calc(var(--button-size) * 1.5);
 }
 [pgs~=initP] [pgs~=twoState] label[pgs-option~=buttonReverse]:has(i) {
-  --button-padding-right: calc(var(--button-size) * 1.4);
+  --button-padding-right: calc(var(--button-size) * 1.5);
   --button-padding-left: calc(var(--button-size) * 2);
 }
 [pgs~=initP] [pgs~=twoState] label {
@@ -4537,19 +4533,19 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
   outline: var(--button-border);
   border-radius: var(--border-radius-input);
   display: flex;
-  gap: calc(var(--button-size) / 2);
+  gap: calc(var(--button-size) / 1.5);
   align-items: center;
   padding: var(--button-padding);
-  width: max-content;
   height: max-content;
+  width: max-content;
   margin-block: auto;
 }
 [pgs~=initP] [pgs~=form] button[type=submit]:has(i) {
   --button-padding-right: calc(var(--button-size) * 2);
-  --button-padding-left: calc(var(--button-size) * 1.4);
+  --button-padding-left: calc(var(--button-size) * 1.5);
 }
 [pgs~=initP] [pgs~=form] button[type=submit][pgs-option~=buttonReverse]:has(i) {
-  --button-padding-right: calc(var(--button-size) * 1.4);
+  --button-padding-right: calc(var(--button-size) * 1.5);
   --button-padding-left: calc(var(--button-size) * 2);
 }
 [pgs~=initP] [pgs~=form] button[type=submit] {
@@ -4756,19 +4752,19 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
   outline: var(--button-border);
   border-radius: var(--border-radius-input);
   display: flex;
-  gap: calc(var(--button-size) / 2);
+  gap: calc(var(--button-size) / 1.5);
   align-items: center;
   padding: var(--button-padding);
-  width: max-content;
   height: max-content;
+  width: max-content;
   margin-block: auto;
 }
 [pgs~=initP] [pgs~=form] input[type=file]::file-selector-button:has(i) {
   --button-padding-right: calc(var(--button-size) * 2);
-  --button-padding-left: calc(var(--button-size) * 1.4);
+  --button-padding-left: calc(var(--button-size) * 1.5);
 }
 [pgs~=initP] [pgs~=form] input[type=file]::file-selector-button[pgs-option~=buttonReverse]:has(i) {
-  --button-padding-right: calc(var(--button-size) * 1.4);
+  --button-padding-right: calc(var(--button-size) * 1.5);
   --button-padding-left: calc(var(--button-size) * 2);
 }
 [pgs~=initP] [pgs~=form] input[type=file]::file-selector-button {
@@ -4887,19 +4883,19 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
   outline: var(--button-border);
   border-radius: var(--border-radius-input);
   display: flex;
-  gap: calc(var(--button-size) / 2);
+  gap: calc(var(--button-size) / 1.5);
   align-items: center;
   padding: var(--button-padding);
-  width: max-content;
   height: max-content;
+  width: max-content;
   margin-block: auto;
 }
 [pgs~=initP] [pgs~=menuHorizontal] > ul > li > a:has(i) {
   --button-padding-right: calc(var(--button-size) * 2);
-  --button-padding-left: calc(var(--button-size) * 1.4);
+  --button-padding-left: calc(var(--button-size) * 1.5);
 }
 [pgs~=initP] [pgs~=menuHorizontal] > ul > li > a[pgs-option~=buttonReverse]:has(i) {
-  --button-padding-right: calc(var(--button-size) * 1.4);
+  --button-padding-right: calc(var(--button-size) * 1.5);
   --button-padding-left: calc(var(--button-size) * 2);
 }
 [pgs~=initP] [pgs~=menuHorizontal] > ul > li > a {
@@ -5078,19 +5074,19 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
   outline: var(--button-border);
   border-radius: var(--border-radius-input);
   display: flex;
-  gap: calc(var(--button-size) / 2);
+  gap: calc(var(--button-size) / 1.5);
   align-items: center;
   padding: var(--button-padding);
-  width: max-content;
   height: max-content;
+  width: max-content;
   margin-block: auto;
 }
 [pgs~=initP] [pgs~=menuHorizontal] li.menu-item-has-children > ul > li > a:has(i) {
   --button-padding-right: calc(var(--button-size) * 2);
-  --button-padding-left: calc(var(--button-size) * 1.4);
+  --button-padding-left: calc(var(--button-size) * 1.5);
 }
 [pgs~=initP] [pgs~=menuHorizontal] li.menu-item-has-children > ul > li > a[pgs-option~=buttonReverse]:has(i) {
-  --button-padding-right: calc(var(--button-size) * 1.4);
+  --button-padding-right: calc(var(--button-size) * 1.5);
   --button-padding-left: calc(var(--button-size) * 2);
 }
 [pgs~=initP] [pgs~=menuHorizontal] li.menu-item-has-children > ul > li > a {
@@ -5276,19 +5272,19 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
   outline: var(--button-border);
   border-radius: var(--border-radius-input);
   display: flex;
-  gap: calc(var(--button-size) / 2);
+  gap: calc(var(--button-size) / 1.5);
   align-items: center;
   padding: var(--button-padding);
-  width: max-content;
   height: max-content;
+  width: max-content;
   margin-block: auto;
 }
 [pgs~=initP] [pgs~=menuHorizontalNotHeader] > ul > li > a:has(i) {
   --button-padding-right: calc(var(--button-size) * 2);
-  --button-padding-left: calc(var(--button-size) * 1.4);
+  --button-padding-left: calc(var(--button-size) * 1.5);
 }
 [pgs~=initP] [pgs~=menuHorizontalNotHeader] > ul > li > a[pgs-option~=buttonReverse]:has(i) {
-  --button-padding-right: calc(var(--button-size) * 1.4);
+  --button-padding-right: calc(var(--button-size) * 1.5);
   --button-padding-left: calc(var(--button-size) * 2);
 }
 [pgs~=initP] [pgs~=menuHorizontalNotHeader] > ul > li > a {
@@ -5461,19 +5457,19 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
   outline: var(--button-border);
   border-radius: var(--border-radius-input);
   display: flex;
-  gap: calc(var(--button-size) / 2);
+  gap: calc(var(--button-size) / 1.5);
   align-items: center;
   padding: var(--button-padding);
-  width: max-content;
   height: max-content;
+  width: max-content;
   margin-block: auto;
 }
 [pgs~=initP] [pgs~=menuHorizontalNotHeader] li.menu-item-has-children > ul > li > a:has(i) {
   --button-padding-right: calc(var(--button-size) * 2);
-  --button-padding-left: calc(var(--button-size) * 1.4);
+  --button-padding-left: calc(var(--button-size) * 1.5);
 }
 [pgs~=initP] [pgs~=menuHorizontalNotHeader] li.menu-item-has-children > ul > li > a[pgs-option~=buttonReverse]:has(i) {
-  --button-padding-right: calc(var(--button-size) * 1.4);
+  --button-padding-right: calc(var(--button-size) * 1.5);
   --button-padding-left: calc(var(--button-size) * 2);
 }
 [pgs~=initP] [pgs~=menuHorizontalNotHeader] li.menu-item-has-children > ul > li > a {
@@ -5659,19 +5655,19 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
   outline: var(--button-border);
   border-radius: var(--border-radius-input);
   display: flex;
-  gap: calc(var(--button-size) / 2);
+  gap: calc(var(--button-size) / 1.5);
   align-items: center;
   padding: var(--button-padding);
-  width: max-content;
   height: max-content;
+  width: max-content;
   margin-block: auto;
 }
 [pgs~=initP] [pgs~=menuVertical] > ul > li > a:has(i) {
   --button-padding-right: calc(var(--button-size) * 2);
-  --button-padding-left: calc(var(--button-size) * 1.4);
+  --button-padding-left: calc(var(--button-size) * 1.5);
 }
 [pgs~=initP] [pgs~=menuVertical] > ul > li > a[pgs-option~=buttonReverse]:has(i) {
-  --button-padding-right: calc(var(--button-size) * 1.4);
+  --button-padding-right: calc(var(--button-size) * 1.5);
   --button-padding-left: calc(var(--button-size) * 2);
 }
 [pgs~=initP] [pgs~=menuVertical] > ul > li > a {
@@ -5862,19 +5858,19 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
   outline: var(--button-border);
   border-radius: var(--border-radius-input);
   display: flex;
-  gap: calc(var(--button-size) / 2);
+  gap: calc(var(--button-size) / 1.5);
   align-items: center;
   padding: var(--button-padding);
-  width: max-content;
   height: max-content;
+  width: max-content;
   margin-block: auto;
 }
 [pgs~=initP] [pgs~=accordion]:not([pgs-state~=open]):has(i) {
   --button-padding-right: calc(var(--button-size) * 2);
-  --button-padding-left: calc(var(--button-size) * 1.4);
+  --button-padding-left: calc(var(--button-size) * 1.5);
 }
 [pgs~=initP] [pgs~=accordion]:not([pgs-state~=open])[pgs-option~=buttonReverse]:has(i) {
-  --button-padding-right: calc(var(--button-size) * 1.4);
+  --button-padding-right: calc(var(--button-size) * 1.5);
   --button-padding-left: calc(var(--button-size) * 2);
 }
 [pgs~=initP] [pgs~=accordion]:not([pgs-state~=open]) {
@@ -6047,19 +6043,19 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
   outline: var(--button-border);
   border-radius: var(--border-radius-input);
   display: flex;
-  gap: calc(var(--button-size) / 2);
+  gap: calc(var(--button-size) / 1.5);
   align-items: center;
   padding: var(--button-padding);
-  width: max-content;
   height: max-content;
+  width: max-content;
   margin-block: auto;
 }
 [pgs~=initP] [pgs~=accordion][pgs-state~=open]:has(i) {
   --button-padding-right: calc(var(--button-size) * 2);
-  --button-padding-left: calc(var(--button-size) * 1.4);
+  --button-padding-left: calc(var(--button-size) * 1.5);
 }
 [pgs~=initP] [pgs~=accordion][pgs-state~=open][pgs-option~=buttonReverse]:has(i) {
-  --button-padding-right: calc(var(--button-size) * 1.4);
+  --button-padding-right: calc(var(--button-size) * 1.5);
   --button-padding-left: calc(var(--button-size) * 2);
 }
 [pgs~=initP] [pgs~=accordion][pgs-state~=open] {
@@ -6171,11 +6167,18 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
   position: relative;
   display: inline-block;
 }
+[pgs~=initP] [pgs~=dropdown][pgs-state~=open] [pgs~=dropdown-content] {
+  transition: opacity 0.3s ease;
+  opacity: 1;
+  pointer-events: auto;
+}
+[pgs~=initP] [pgs~=dropdown][pgs-state~=open] [pgs~=dropdown-content]::backdrop {
+  background: var(--backdrop);
+}
 [pgs~=initP] [pgs~=dropdown] [pgs~=dropdown-content] {
-  visibility: hidden;
+  display: flex;
   opacity: 0;
-  max-height: 0;
-  transition: opacity 200ms ease-in-out, visibility 200ms ease-in-out, max-height 100ms ease-in-out;
+  pointer-events: none;
   transition-behavior: allow-discrete;
   border: none;
   border-radius: calc(var(--border-radius-input) + var(--dropdown-padding));
@@ -6186,10 +6189,11 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
   background: var(--dropdown-background);
   overflow: initial;
   z-index: -1;
+  margin-top: var(--dropdown-offset);
+  padding: var(--dropdown-padding);
   display: flex;
   gap: var(--gap-texts);
   flex-direction: column;
-  height: 0;
 }
 [pgs~=initP] [pgs~=dropdown] [pgs~=dropdown-content]::before {
   content: "";
@@ -6203,17 +6207,6 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
   pointer-events: none;
   z-index: 0;
 }
-[pgs~=initP] [pgs~=dropdown] [pgs~=dropdown-content]:popover-open {
-  margin-top: var(--dropdown-offset);
-  padding: var(--dropdown-padding);
-  visibility: visible;
-  opacity: 1;
-  max-height: max-content;
-  height: unset;
-}
-[pgs~=initP] [pgs~=dropdown] [pgs~=dropdown-content]:popover-open::backdrop {
-  background: var(--backdrop);
-}
 @supports not ((anchor-name: var(--dropdown-anchor)) and (position-anchor: var(--dropdown-anchor)) and (position-area: bottom) and (top: anchor(bottom))) {
   [pgs~=initP] [pgs~=dropdown] [pgs~=dropdown-content] {
     position: fixed;
@@ -6224,9 +6217,6 @@ body [pgs~=bodyImg] img, [pgs~=bodyImg] object, [pgs~=bodyImg] lottie-player {
     max-height: var(--dropdown-fallback-max-height);
     overflow: visible;
   }
-  [pgs~=initP] [pgs~=dropdown] [pgs~=dropdown-content]:popover-open {
-    margin-top: 0;
-  }
 }
 @supports (anchor-name: var(--dropdown-anchor)) and (position-anchor: var(--dropdown-anchor)) and (position-area: bottom) and (top: anchor(bottom)) {
   [pgs~=initP] [pgs~=dropdown] [pgs~=dropdown-button] {
@@ -6742,11 +6732,11 @@ dialog:not(:has(> [pgs~=modal-close])) {
   outline: var(--button-border);
   border-radius: var(--border-radius-input);
   display: flex;
-  gap: calc(var(--button-size) / 2);
+  gap: calc(var(--button-size) / 1.5);
   align-items: center;
   padding: var(--button-padding);
-  width: max-content;
   height: max-content;
+  width: max-content;
   margin-block: auto;
   flex: 0 0;
   aspect-ratio: 1;
@@ -6978,12 +6968,20 @@ body:has(header[data-header-scroll=true]) [pgs~=initP] [pgs~=toast] {
 [pgs~=initP] [pgs~=tooltip][pgs~=dropdown] {
   --dropdown-position-right: center;
   --dropdown-maxwidth: 400px;
+  --dropdown-padding: 15px;
 }
 [pgs~=initP] [pgs~=tooltip][pgs~=dropdown] [pgs~=tooltip-button][pgs~=dropdown-button] {
   --fa-size: .9rem;
 }
 [pgs~=initP] [pgs~=tooltip][pgs~=dropdown] [pgs~=tooltip-content][pgs~=dropdown-content]:popover-open {
-  padding: 15px;
+  position: fixed;
+  position-anchor: unset;
+  position-area: unset;
+  inset: auto;
+  top: var(--dropdown-fallback-top);
+  left: var(--dropdown-fallback-left);
+  right: auto;
+  margin-top: 0;
 }
 [pgs~=initP] [pgs~=searchbar] {
   position: relative;
@@ -7055,7 +7053,7 @@ dialog [pgs~=initP] [pgs~=searchbar] input {
   --logo-height: var(--header-size, 6.0rem);
   --logo-finter: invert(1) hue-rotate(180deg) brightness(1.5);
 }
-[data-darkmode=true] [pgs~=initP] [pgs~=logo][pgs~=logo-darkmode] [pgs~=logo-image] {
+[data-darkmode=true] [pgs~=logo-darkmode] [pgs~=logo-image] {
   filter: var(--logo-finter);
 }