sakana-element 2.4.2 → 2.5.0

package/dist/theme/Radio.css

@@ -1,492 +1 @@
-/* Radio Variables */
-.px-radio {
-  --px-radio-size: 18px;
-  --px-radio-checked-color: var(--px-color-primary);
-  --px-radio-checked-border-color: var(--px-color-primary-dark);
-  --px-radio-border-color: var(--px-border-color);
-  --px-radio-bg-color: var(--px-fill-color-blank);
-  --px-radio-shadow-color: var(--px-shadow-color);
-
-  /* 3D bevel — sunken look (unchecked) */
-  --px-radio-inset-highlight: inset -2px -2px 0 0 rgba(255, 255, 255, 0.2);
-  --px-radio-inset-shadow: inset 2px 2px 0 0 rgba(0, 0, 0, 0.1);
-}
-/* Base Radio Styles */
-.px-radio {
-  display: inline-flex;
-  align-items: center;
-  font-size: var(--px-font-size-base);
-  font-family: var(--px-font-family);
-  line-height: 1;
-  cursor: pointer;
-  user-select: none;
-  white-space: nowrap;
-}
-/* Disabled state */
-.px-radio.is-disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-}
-.px-radio.is-disabled .px-radio__inner {
-      cursor: not-allowed;
-}
-/* Checked state — raised bevel */
-.px-radio.is-checked {
-    --px-radio-inset-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.2);
-    --px-radio-inset-shadow: inset -2px -2px 0 0 rgba(0, 0, 0, 0.1);
-}
-.px-radio.is-checked .px-radio__inner::before {
-        background: var(--px-radio-checked-border-color);
-}
-.px-radio.is-checked .px-radio__inner::after {
-        background: var(--px-radio-checked-color);
-}
-.px-radio.is-checked .px-radio__inner .px-radio__dot {
-        opacity: 1;
-}
-.px-radio.is-checked .px-radio__input {
-      filter: drop-shadow(
-        var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-radio-checked-border-color)
-      );
-}
-/* Hover feedback */
-.px-radio:hover:not(.is-disabled) {
-    --px-radio-inset-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.35);
-}
-/* Active/pressed feedback */
-.px-radio:active:not(.is-disabled) {
-    --px-radio-inset-highlight: inset -2px -2px 0 0 rgba(255, 255, 255, 0.2);
-    --px-radio-inset-shadow: inset 2px 2px 0 0 rgba(0, 0, 0, 0.15);
-}
-/* Size variants */
-.px-radio--large {
-  --px-radio-size: 22px;
-  font-size: var(--px-font-size-base);
-}
-.px-radio--large .px-radio__dot {
-    width: 8px;
-    height: 8px;
-}
-.px-radio--small {
-  --px-radio-size: 14px;
-  font-size: var(--px-font-size-small);
-}
-.px-radio--small .px-radio__input {
-    filter: drop-shadow(2px 2px 0px var(--px-radio-shadow-color));
-}
-.px-radio--small .px-radio__dot {
-    width: 4px;
-    height: 4px;
-}
-.px-radio--small.is-checked .px-radio__input {
-    filter: drop-shadow(2px 2px 0px var(--px-radio-checked-border-color));
-}
-/* Hidden native input */
-.px-radio__original {
-  position: absolute;
-  width: 0;
-  height: 0;
-  opacity: 0;
-  margin: 0;
-  outline: none;
-}
-.px-radio__original:focus-visible ~ .px-radio__inner {
-    outline: 2px dashed var(--px-radio-checked-color);
-    outline-offset: 2px;
-}
-/* Input wrapper */
-.px-radio__input {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-
-  /* Pixel shadow via drop-shadow */
-  filter: drop-shadow(
-    var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-radio-shadow-color)
-  );
-}
-/* The pixel-art radio — diamond shape with 2px stepped edges */
-.px-radio__inner {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: var(--px-radio-size);
-  height: var(--px-radio-size);
-  box-sizing: border-box;
-  background: transparent;
-
-  /* Pixel diamond clip-path: 2px staircase steps */
-  --px-radio-pixel-shape: polygon(
-    /* Top point */
-    calc(50% - 2px) 0,
-    calc(50% + 2px) 0,
-    /* Top-right stepped edge */
-    calc(100% - 4px) calc(50% - 4px),
-    calc(100% - 2px) calc(50% - 2px),
-    100% calc(50% - 2px),
-    100% calc(50% + 2px),
-    calc(100% - 2px) calc(50% + 2px),
-    calc(100% - 4px) calc(50% + 4px),
-    /* Bottom point */
-    calc(50% + 2px) 100%,
-    calc(50% - 2px) 100%,
-    /* Bottom-left stepped edge */
-    4px calc(50% + 4px),
-    2px calc(50% + 2px),
-    0 calc(50% + 2px),
-    0 calc(50% - 2px),
-    2px calc(50% - 2px),
-    4px calc(50% - 4px)
-  );
-}
-/* Border layer – pixel diamond */
-.px-radio__inner::before {
-    content: "";
-    position: absolute;
-    inset: 0;
-    background: var(--px-radio-border-color);
-    clip-path: var(--px-radio-pixel-shape);
-    z-index: 0;
-}
-/* Fill layer – pixel diamond with 3D bevel */
-.px-radio__inner::after {
-    content: "";
-    position: absolute;
-    inset: 2px;
-    background: var(--px-radio-bg-color);
-    clip-path: var(--px-radio-pixel-shape);
-    box-shadow:
-      var(--px-radio-inset-highlight),
-      var(--px-radio-inset-shadow);
-    z-index: 0;
-}
-/* Pixel dot indicator — small diamond */
-.px-radio__dot {
-  position: relative;
-  z-index: 1;
-  width: 6px;
-  height: 6px;
-  opacity: 0;
-  background: var(--px-fill-color-blank);
-  /* Simple 4-point diamond at small size */
-  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
-}
-/* Label */
-.px-radio__label {
-  padding-left: 8px;
-  font-family: var(--px-font-family);
-  font-size: inherit;
-  line-height: 1.2;
-  color: var(--px-text-color-primary);
-}
-/* Type variants */
-.px-radio--primary {
-    --px-radio-checked-color: var(--px-color-primary);
-    --px-radio-checked-border-color: var(--px-color-primary-dark);
-}
-.px-radio--primary.is-checked .px-radio__input {
-    filter: drop-shadow(
-      var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-primary-dark)
-    );
-}
-.px-radio--success {
-    --px-radio-checked-color: var(--px-color-success);
-    --px-radio-checked-border-color: var(--px-color-success-dark);
-}
-.px-radio--success.is-checked .px-radio__input {
-    filter: drop-shadow(
-      var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-success-dark)
-    );
-}
-.px-radio--info {
-    --px-radio-checked-color: var(--px-color-info);
-    --px-radio-checked-border-color: var(--px-color-info-dark);
-}
-.px-radio--info.is-checked .px-radio__input {
-    filter: drop-shadow(
-      var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-info-dark)
-    );
-}
-.px-radio--warning {
-    --px-radio-checked-color: var(--px-color-warning);
-    --px-radio-checked-border-color: var(--px-color-warning-dark);
-}
-.px-radio--warning.is-checked .px-radio__input {
-    filter: drop-shadow(
-      var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-warning-dark)
-    );
-}
-.px-radio--danger {
-    --px-radio-checked-color: var(--px-color-danger);
-    --px-radio-checked-border-color: var(--px-color-danger-dark);
-}
-.px-radio--danger.is-checked .px-radio__input {
-    filter: drop-shadow(
-      var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-danger-dark)
-    );
-}
-/* Dark mode bevel adjustment */
-html.dark .px-radio {
-  --px-radio-inset-highlight: inset -2px -2px 0 0 rgba(255, 255, 255, 0.08);
-  --px-radio-inset-shadow: inset 2px 2px 0 0 rgba(0, 0, 0, 0.2);
-}
-html.dark .px-radio.is-checked {
-  --px-radio-inset-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.08);
-  --px-radio-inset-shadow: inset -2px -2px 0 0 rgba(0, 0, 0, 0.2);
-}
-/* Radio Group */
-.px-radio-group {
-  display: inline-flex;
-  flex-wrap: wrap;
-  gap: 16px;
-  align-items: center;
-}
-/* Radio Variables */
-.px-radio {
-  --px-radio-size: 18px;
-  --px-radio-checked-color: var(--px-color-primary);
-  --px-radio-checked-border-color: var(--px-color-primary-dark);
-  --px-radio-border-color: var(--px-border-color);
-  --px-radio-bg-color: var(--px-fill-color-blank);
-  --px-radio-shadow-color: var(--px-shadow-color);
-
-  /* 3D bevel — sunken look (unchecked) */
-  --px-radio-inset-highlight: inset -2px -2px 0 0 rgba(255, 255, 255, 0.2);
-  --px-radio-inset-shadow: inset 2px 2px 0 0 rgba(0, 0, 0, 0.1);
-}
-/* Base Radio Styles */
-.px-radio {
-  display: inline-flex;
-  align-items: center;
-  font-size: var(--px-font-size-base);
-  font-family: var(--px-font-family);
-  line-height: 1;
-  cursor: pointer;
-  user-select: none;
-  white-space: nowrap;
-}
-/* Disabled state */
-.px-radio.is-disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-}
-.px-radio.is-disabled .px-radio__inner {
-      cursor: not-allowed;
-}
-/* Checked state — raised bevel */
-.px-radio.is-checked {
-    --px-radio-inset-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.2);
-    --px-radio-inset-shadow: inset -2px -2px 0 0 rgba(0, 0, 0, 0.1);
-}
-.px-radio.is-checked .px-radio__inner::before {
-        background: var(--px-radio-checked-border-color);
-}
-.px-radio.is-checked .px-radio__inner::after {
-        background: var(--px-radio-checked-color);
-}
-.px-radio.is-checked .px-radio__inner .px-radio__dot {
-        opacity: 1;
-}
-.px-radio.is-checked .px-radio__input {
-      filter: drop-shadow(
-        var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-radio-checked-border-color)
-      );
-}
-/* Hover feedback */
-.px-radio:hover:not(.is-disabled) {
-    --px-radio-inset-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.35);
-}
-/* Active/pressed feedback */
-.px-radio:active:not(.is-disabled) {
-    --px-radio-inset-highlight: inset -2px -2px 0 0 rgba(255, 255, 255, 0.2);
-    --px-radio-inset-shadow: inset 2px 2px 0 0 rgba(0, 0, 0, 0.15);
-}
-/* Size variants */
-.px-radio--large {
-  --px-radio-size: 22px;
-  font-size: var(--px-font-size-base);
-}
-.px-radio--large .px-radio__dot {
-    width: 8px;
-    height: 8px;
-}
-.px-radio--small {
-  --px-radio-size: 14px;
-  font-size: var(--px-font-size-small);
-}
-.px-radio--small .px-radio__input {
-    filter: drop-shadow(2px 2px 0px var(--px-radio-shadow-color));
-}
-.px-radio--small .px-radio__dot {
-    width: 4px;
-    height: 4px;
-}
-.px-radio--small.is-checked .px-radio__input {
-    filter: drop-shadow(2px 2px 0px var(--px-radio-checked-border-color));
-}
-/* Hidden native input */
-.px-radio__original {
-  position: absolute;
-  width: 0;
-  height: 0;
-  opacity: 0;
-  margin: 0;
-  outline: none;
-}
-.px-radio__original:focus-visible ~ .px-radio__inner {
-    outline: 2px dashed var(--px-radio-checked-color);
-    outline-offset: 2px;
-}
-/* Input wrapper */
-.px-radio__input {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-
-  /* Pixel shadow via drop-shadow */
-  filter: drop-shadow(
-    var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-radio-shadow-color)
-  );
-}
-/* The pixel-art radio — diamond shape with 2px stepped edges */
-.px-radio__inner {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: var(--px-radio-size);
-  height: var(--px-radio-size);
-  box-sizing: border-box;
-  background: transparent;
-
-  /* Pixel diamond clip-path: 2px staircase steps */
-  --px-radio-pixel-shape: polygon(
-    /* Top point */
-    calc(50% - 2px) 0,
-    calc(50% + 2px) 0,
-    /* Top-right stepped edge */
-    calc(100% - 4px) calc(50% - 4px),
-    calc(100% - 2px) calc(50% - 2px),
-    100% calc(50% - 2px),
-    100% calc(50% + 2px),
-    calc(100% - 2px) calc(50% + 2px),
-    calc(100% - 4px) calc(50% + 4px),
-    /* Bottom point */
-    calc(50% + 2px) 100%,
-    calc(50% - 2px) 100%,
-    /* Bottom-left stepped edge */
-    4px calc(50% + 4px),
-    2px calc(50% + 2px),
-    0 calc(50% + 2px),
-    0 calc(50% - 2px),
-    2px calc(50% - 2px),
-    4px calc(50% - 4px)
-  );
-}
-/* Border layer – pixel diamond */
-.px-radio__inner::before {
-    content: "";
-    position: absolute;
-    inset: 0;
-    background: var(--px-radio-border-color);
-    clip-path: var(--px-radio-pixel-shape);
-    z-index: 0;
-}
-/* Fill layer – pixel diamond with 3D bevel */
-.px-radio__inner::after {
-    content: "";
-    position: absolute;
-    inset: 2px;
-    background: var(--px-radio-bg-color);
-    clip-path: var(--px-radio-pixel-shape);
-    box-shadow:
-      var(--px-radio-inset-highlight),
-      var(--px-radio-inset-shadow);
-    z-index: 0;
-}
-/* Pixel dot indicator — small diamond */
-.px-radio__dot {
-  position: relative;
-  z-index: 1;
-  width: 6px;
-  height: 6px;
-  opacity: 0;
-  background: var(--px-fill-color-blank);
-  /* Simple 4-point diamond at small size */
-  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
-}
-/* Label */
-.px-radio__label {
-  padding-left: 8px;
-  font-family: var(--px-font-family);
-  font-size: inherit;
-  line-height: 1.2;
-  color: var(--px-text-color-primary);
-}
-/* Type variants */
-.px-radio--primary {
-    --px-radio-checked-color: var(--px-color-primary);
-    --px-radio-checked-border-color: var(--px-color-primary-dark);
-}
-.px-radio--primary.is-checked .px-radio__input {
-    filter: drop-shadow(
-      var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-primary-dark)
-    );
-}
-.px-radio--success {
-    --px-radio-checked-color: var(--px-color-success);
-    --px-radio-checked-border-color: var(--px-color-success-dark);
-}
-.px-radio--success.is-checked .px-radio__input {
-    filter: drop-shadow(
-      var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-success-dark)
-    );
-}
-.px-radio--info {
-    --px-radio-checked-color: var(--px-color-info);
-    --px-radio-checked-border-color: var(--px-color-info-dark);
-}
-.px-radio--info.is-checked .px-radio__input {
-    filter: drop-shadow(
-      var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-info-dark)
-    );
-}
-.px-radio--warning {
-    --px-radio-checked-color: var(--px-color-warning);
-    --px-radio-checked-border-color: var(--px-color-warning-dark);
-}
-.px-radio--warning.is-checked .px-radio__input {
-    filter: drop-shadow(
-      var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-warning-dark)
-    );
-}
-.px-radio--danger {
-    --px-radio-checked-color: var(--px-color-danger);
-    --px-radio-checked-border-color: var(--px-color-danger-dark);
-}
-.px-radio--danger.is-checked .px-radio__input {
-    filter: drop-shadow(
-      var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-danger-dark)
-    );
-}
-/* Dark mode bevel adjustment */
-html.dark .px-radio {
-  --px-radio-inset-highlight: inset -2px -2px 0 0 rgba(255, 255, 255, 0.08);
-  --px-radio-inset-shadow: inset 2px 2px 0 0 rgba(0, 0, 0, 0.2);
-}
-html.dark .px-radio.is-checked {
-  --px-radio-inset-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.08);
-  --px-radio-inset-shadow: inset -2px -2px 0 0 rgba(0, 0, 0, 0.2);
-}
-/* Radio Group */
-.px-radio-group {
-  display: inline-flex;
-  flex-wrap: wrap;
-  gap: 16px;
-  align-items: center;
-}
+.px-radio{--px-radio-size:18px;--px-radio-checked-color:var(--px-color-primary);--px-radio-checked-border-color:var(--px-color-primary-dark);--px-radio-border-color:var(--px-border-color);--px-radio-bg-color:var(--px-fill-color-blank);--px-radio-shadow-color:var(--px-shadow-color);--px-radio-inset-highlight:inset -2px -2px 0 0 #fff3;--px-radio-inset-shadow:inset 2px 2px 0 0 #0000001a;font-size:var(--px-font-size-base);font-family:var(--px-font-family);cursor:pointer;-webkit-user-select:none;user-select:none;white-space:nowrap;align-items:center;line-height:1;display:inline-flex}.px-radio{--px-radio-size:18px;--px-radio-checked-color:var(--px-color-primary);--px-radio-checked-border-color:var(--px-color-primary-dark);--px-radio-border-color:var(--px-border-color);--px-radio-bg-color:var(--px-fill-color-blank);--px-radio-shadow-color:var(--px-shadow-color);--px-radio-inset-highlight:inset -2px -2px 0 0 #fff3;--px-radio-inset-shadow:inset 2px 2px 0 0 #0000001a;font-size:var(--px-font-size-base);font-family:var(--px-font-family);cursor:pointer;-webkit-user-select:none;user-select:none;white-space:nowrap;align-items:center;line-height:1;display:inline-flex}.px-radio.is-disabled{opacity:.5;cursor:not-allowed}.px-radio.is-disabled .px-radio__inner{cursor:not-allowed}.px-radio.is-checked{--px-radio-inset-highlight:inset 2px 2px 0 0 #fff3;--px-radio-inset-shadow:inset -2px -2px 0 0 #0000001a}.px-radio.is-checked .px-radio__inner:before{background:var(--px-radio-checked-border-color)}.px-radio.is-checked .px-radio__inner:after{background:var(--px-radio-checked-color)}.px-radio.is-checked .px-radio__inner .px-radio__dot{opacity:1}.px-radio.is-checked .px-radio__input{filter:drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-radio-checked-border-color))}.px-radio:hover:not(.is-disabled){--px-radio-inset-highlight:inset 2px 2px 0 0 #ffffff59}.px-radio:active:not(.is-disabled){--px-radio-inset-highlight:inset -2px -2px 0 0 #fff3;--px-radio-inset-shadow:inset 2px 2px 0 0 #00000026}.px-radio--large{--px-radio-size:22px;font-size:var(--px-font-size-base)}.px-radio--large .px-radio__dot{width:8px;height:8px}.px-radio--small{--px-radio-size:14px;font-size:var(--px-font-size-small)}.px-radio--small .px-radio__input{filter:drop-shadow(2px 2px 0px var(--px-radio-shadow-color))}.px-radio--small .px-radio__dot{width:4px;height:4px}.px-radio--small.is-checked .px-radio__input{filter:drop-shadow(2px 2px 0px var(--px-radio-checked-border-color))}.px-radio__original{opacity:0;outline:none;width:0;height:0;margin:0;position:absolute}.px-radio__original:focus-visible~.px-radio__inner{outline:2px dashed var(--px-radio-checked-color);outline-offset:2px}.px-radio__input{filter:drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-radio-shadow-color));flex-shrink:0;justify-content:center;align-items:center;display:inline-flex;position:relative}.px-radio__inner{width:var(--px-radio-size);height:var(--px-radio-size);box-sizing:border-box;--px-radio-pixel-shape:polygon( calc(50% - 2px) 0, calc(50% + 2px) 0,  calc(100% - 4px) calc(50% - 4px), calc(100% - 2px) calc(50% - 2px), 100% calc(50% - 2px), 100% calc(50% + 2px), calc(100% - 2px) calc(50% + 2px), calc(100% - 4px) calc(50% + 4px),  calc(50% + 2px) 100%, calc(50% - 2px) 100%,  4px calc(50% + 4px), 2px calc(50% + 2px), 0 calc(50% + 2px), 0 calc(50% - 2px), 2px calc(50% - 2px), 4px calc(50% - 4px));background:0 0;justify-content:center;align-items:center;display:inline-flex;position:relative}.px-radio__inner:before{content:"";background:var(--px-radio-border-color);clip-path:var(--px-radio-pixel-shape);z-index:0;position:absolute;inset:0}.px-radio__inner:after{content:"";background:var(--px-radio-bg-color);clip-path:var(--px-radio-pixel-shape);box-shadow:var(--px-radio-inset-highlight), var(--px-radio-inset-shadow);z-index:0;position:absolute;inset:2px}.px-radio__dot{z-index:1;opacity:0;background:var(--px-fill-color-blank);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);width:6px;height:6px;position:relative}.px-radio__label{font-family:var(--px-font-family);font-size:inherit;color:var(--px-text-color-primary);padding-left:8px;line-height:1.2}.px-radio--primary{--px-radio-checked-color:var(--px-color-primary);--px-radio-checked-border-color:var(--px-color-primary-dark)}.px-radio--primary.is-checked .px-radio__input{filter:drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-primary-dark))}.px-radio--success{--px-radio-checked-color:var(--px-color-success);--px-radio-checked-border-color:var(--px-color-success-dark)}.px-radio--success.is-checked .px-radio__input{filter:drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-success-dark))}.px-radio--info{--px-radio-checked-color:var(--px-color-info);--px-radio-checked-border-color:var(--px-color-info-dark)}.px-radio--info.is-checked .px-radio__input{filter:drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-info-dark))}.px-radio--warning{--px-radio-checked-color:var(--px-color-warning);--px-radio-checked-border-color:var(--px-color-warning-dark)}.px-radio--warning.is-checked .px-radio__input{filter:drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-warning-dark))}.px-radio--danger{--px-radio-checked-color:var(--px-color-danger);--px-radio-checked-border-color:var(--px-color-danger-dark)}.px-radio--danger.is-checked .px-radio__input{filter:drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-danger-dark))}html.dark .px-radio{--px-radio-inset-highlight:inset -2px -2px 0 0 #ffffff14;--px-radio-inset-shadow:inset 2px 2px 0 0 #0003}html.dark .px-radio.is-checked{--px-radio-inset-highlight:inset 2px 2px 0 0 #ffffff14;--px-radio-inset-shadow:inset -2px -2px 0 0 #0003}.px-radio-group{flex-wrap:wrap;align-items:center;gap:16px;display:inline-flex}

package/dist/theme/Resizable.css

@@ -1,95 +1 @@
-/* Resizable Group */
-.px-resizable-group {
-  display: flex;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  box-sizing: border-box;
-}
-.px-resizable-group.is-horizontal {
-  flex-direction: row;
-}
-.px-resizable-group.is-vertical {
-  flex-direction: column;
-}
-/* Resizable Panel */
-.px-resizable-panel {
-  overflow: auto;
-  position: relative;
-  box-sizing: border-box;
-}
-.px-resizable-panel.is-collapsed {
-  overflow: hidden;
-}
-/* Resizable Handle */
-.px-resizable-handle {
-  flex: 0 0 8px;
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  user-select: none;
-  z-index: 1;
-  cursor: col-resize;
-  transition: none;
-  background: var(--px-border-color);
-  box-sizing: border-box;
-
-  /* Pixel border effect via clip-path */
-  clip-path: polygon(
-    0 2px,
-    2px 2px,
-    2px 0,
-    calc(100% - 2px) 0,
-    calc(100% - 2px) 2px,
-    100% 2px,
-    100% calc(100% - 2px),
-    calc(100% - 2px) calc(100% - 2px),
-    calc(100% - 2px) 100%,
-    2px 100%,
-    2px calc(100% - 2px),
-    0 calc(100% - 2px)
-  );
-}
-.px-resizable-handle:hover {
-    background: var(--px-hover-border-color);
-}
-.px-resizable-handle:focus-visible {
-    outline: 2px solid var(--px-color-primary);
-    outline-offset: -2px;
-}
-/* Expanded hit area via ::before pseudo-element (not clipped by clip-path) */
-.px-resizable-handle.has-hit-area::before {
-  content: '';
-  position: absolute;
-  inset: calc(-1 * var(--px-handle-hit-area, 0px));
-  z-index: -1;
-}
-/* Vertical handle */
-.px-resizable-handle.is-vertical {
-  flex: 0 0 8px;
-  cursor: row-resize;
-  clip-path: polygon(
-    2px 0,
-    calc(100% - 2px) 0,
-    calc(100% - 2px) 2px,
-    100% 2px,
-    100% calc(100% - 2px),
-    calc(100% - 2px) calc(100% - 2px),
-    calc(100% - 2px) 100%,
-    2px 100%,
-    2px calc(100% - 2px),
-    0 calc(100% - 2px),
-    0 2px,
-    2px 2px
-  );
-}
-/* Dragging state */
-.px-resizable-handle.is-dragging {
-  background: var(--px-color-primary);
-}
-/* Disabled state */
-.px-resizable-handle.is-disabled {
-  cursor: not-allowed;
-  opacity: 0.5;
-}
+.px-resizable-group{box-sizing:border-box;width:100%;height:100%;display:flex;overflow:hidden}.px-resizable-group.is-horizontal{flex-direction:row}.px-resizable-group.is-vertical{flex-direction:column}.px-resizable-panel{box-sizing:border-box;position:relative;overflow:auto}.px-resizable-panel.is-collapsed{overflow:hidden}.px-resizable-handle{-webkit-user-select:none;user-select:none;z-index:1;cursor:col-resize;background:var(--px-border-color);box-sizing:border-box;clip-path:polygon(0 2px,2px 2px,2px 0,calc(100% - 2px) 0,calc(100% - 2px) 2px,100% 2px,100% calc(100% - 2px),calc(100% - 2px) calc(100% - 2px),calc(100% - 2px) 100%,2px 100%,2px calc(100% - 2px),0 calc(100% - 2px));flex:0 0 8px;justify-content:center;align-items:center;transition:none;display:flex;position:relative}.px-resizable-handle:hover{background:var(--px-hover-border-color)}.px-resizable-handle:focus-visible{outline:2px solid var(--px-color-primary);outline-offset:-2px}.px-resizable-handle.has-hit-area:before{content:"";inset:calc(-1 * var(--px-handle-hit-area,0px));z-index:-1;position:absolute}.px-resizable-handle.is-vertical{cursor:row-resize;clip-path:polygon(2px 0,calc(100% - 2px) 0,calc(100% - 2px) 2px,100% 2px,100% calc(100% - 2px),calc(100% - 2px) calc(100% - 2px),calc(100% - 2px) 100%,2px 100%,2px calc(100% - 2px),0 calc(100% - 2px),0 2px,2px 2px);flex:0 0 8px}.px-resizable-handle.is-dragging{background:var(--px-color-primary)}.px-resizable-handle.is-disabled{cursor:not-allowed;opacity:.5}