sakana-element 2.4.2 → 2.5.1

package/dist/theme/Filter.css

@@ -1,598 +1 @@
-/* Filter Container */
-.px-filter {
-  display: inline-flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  align-items: center;
-
-  /* Shared pixel corner clip-path — 2px staircase */
-  --px-filter-clip: 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)
-  );
-}
-/* Reset Button — pixel chip with close icon */
-.px-filter__reset {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 30px;
-  height: 30px;
-  font-size: 14px;
-  color: var(--px-text-color-primary);
-  background: transparent;
-  cursor: pointer;
-  user-select: none;
-  position: relative;
-  transition: transform 0.1s;
-}
-/* Border layer */
-.px-filter__reset::before {
-    content: "";
-    position: absolute;
-    inset: 0;
-    background: var(--px-border-color);
-    clip-path: var(--px-filter-clip);
-    z-index: 0;
-}
-/* Fill layer with 3D bevel */
-.px-filter__reset::after {
-    content: "";
-    position: absolute;
-    inset: 2px;
-    background: var(--px-fill-color-blank);
-    clip-path: var(--px-filter-clip);
-    box-shadow:
-      inset 2px 2px 0 0 rgba(255, 255, 255, 0.2),
-      inset -2px -2px 0 0 rgba(0, 0, 0, 0.1);
-    z-index: 0;
-}
-.px-filter__reset {
-
-  filter: drop-shadow(
-    var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-shadow-color)
-  );
-}
-/* Icon sits above pseudo-elements */
-.px-filter__reset > * {
-    position: relative;
-    z-index: 1;
-}
-.px-filter__reset:hover {
-    transform: translateY(-1px);
-}
-.px-filter__reset:hover::after {
-      box-shadow:
-        inset 2px 2px 0 0 rgba(255, 255, 255, 0.35),
-        inset -2px -2px 0 0 rgba(0, 0, 0, 0.1);
-}
-.px-filter__reset:active {
-    transform: translateY(1px);
-    filter: drop-shadow(2px 2px 0px var(--px-shadow-color));
-}
-.px-filter__reset:active::after {
-      box-shadow:
-        inset -2px -2px 0 0 rgba(255, 255, 255, 0.2),
-        inset 2px 2px 0 0 rgba(0, 0, 0, 0.1);
-}
-/* Filter Item Variables */
-.px-filter-item {
-  --px-filter-item-height: 30px;
-  --px-filter-item-color: var(--px-text-color-primary);
-  --px-filter-item-bg-color: var(--px-fill-color-blank);
-  --px-filter-item-border-color: var(--px-border-color);
-  --px-filter-item-shadow-color: var(--px-shadow-color);
-  --px-filter-item-active-color: var(--px-color-primary);
-  --px-filter-item-active-border-color: var(--px-color-primary-dark);
-  --px-filter-item-inset-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.2);
-  --px-filter-item-inset-shadow: inset -2px -2px 0 0 rgba(0, 0, 0, 0.1);
-}
-/* Base Filter Item Styles — Pixel Chip */
-.px-filter-item {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  height: var(--px-filter-item-height);
-  padding: 0 12px;
-  font-family: var(--px-font-family);
-  font-size: var(--px-font-size-base);
-  line-height: 1;
-  color: var(--px-filter-item-color);
-  background: transparent;
-  cursor: pointer;
-  user-select: none;
-  position: relative;
-  transition: transform 0.1s, width 0.2s, padding 0.2s, opacity 0.15s;
-}
-/* Border layer */
-.px-filter-item::before {
-    content: "";
-    position: absolute;
-    inset: 0;
-    background: var(--px-filter-item-border-color);
-    clip-path: var(--px-filter-clip);
-    z-index: 0;
-}
-/* Fill layer with 3D bevel */
-.px-filter-item::after {
-    content: "";
-    position: absolute;
-    inset: 2px;
-    background: var(--px-filter-item-bg-color);
-    clip-path: var(--px-filter-clip);
-    box-shadow:
-      var(--px-filter-item-inset-highlight),
-      var(--px-filter-item-inset-shadow);
-    z-index: 0;
-}
-.px-filter-item {
-  filter: drop-shadow(
-    var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-filter-item-shadow-color)
-  );
-}
-/* Pixel shadow via filter */
-/* Hover: lift */
-.px-filter-item:hover:not(.is-disabled):not(.is-hidden) {
-    transform: translateY(-1px);
-}
-.px-filter-item:hover:not(.is-disabled):not(.is-hidden)::after {
-      --px-filter-item-inset-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.35);
-}
-/* Active/pressed: push down */
-.px-filter-item:active:not(.is-disabled):not(.is-hidden) {
-    transform: translateY(1px);
-    filter: drop-shadow(2px 2px 0px var(--px-filter-item-shadow-color));
-}
-.px-filter-item:active:not(.is-disabled):not(.is-hidden)::after {
-      --px-filter-item-inset-highlight: inset -2px -2px 0 0 rgba(255, 255, 255, 0.2);
-      --px-filter-item-inset-shadow: inset 2px 2px 0 0 rgba(0, 0, 0, 0.1);
-}
-/* Selected / Active state */
-.px-filter-item.is-active {
-    --px-filter-item-color: var(--px-fill-color-blank);
-}
-.px-filter-item.is-active::before {
-      background: var(--px-filter-item-active-border-color);
-}
-.px-filter-item.is-active::after {
-      background: var(--px-filter-item-active-color);
-}
-.px-filter-item.is-active {
-
-    filter: drop-shadow(
-      var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-filter-item-active-border-color)
-    );
-}
-/* Disabled state */
-.px-filter-item.is-disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-}
-/* Hidden / collapsed state (single-select with active selection) */
-.px-filter-item.is-hidden {
-    width: 0;
-    height: 0;
-    padding: 0;
-    overflow: hidden;
-    opacity: 0;
-    pointer-events: none;
-    filter: none;
-    margin: 0;
-    border: 0;
-}
-.px-filter-item.is-hidden::before,
-    .px-filter-item.is-hidden::after {
-      display: none;
-}
-/* Hidden native input */
-.px-filter-item__original {
-  position: absolute;
-  width: 0;
-  height: 0;
-  opacity: 0;
-  margin: 0;
-  outline: none;
-}
-.px-filter-item__original:focus-visible ~ .px-filter-item__label {
-    outline: 2px dashed var(--px-filter-item-active-color);
-    outline-offset: 2px;
-}
-/* Label */
-.px-filter-item__label {
-  position: relative;
-  z-index: 1;
-  font-family: var(--px-font-family);
-  font-size: inherit;
-  line-height: 1;
-  color: inherit;
-  pointer-events: none;
-}
-/* Size variants */
-.px-filter-item--large {
-  --px-filter-item-height: 36px;
-  padding: 0 16px;
-  font-size: var(--px-font-size-base);
-}
-.px-filter-item--small {
-  --px-filter-item-height: 24px;
-  padding: 0 8px;
-  font-size: var(--px-font-size-small);
-
-  filter: drop-shadow(2px 2px 0px var(--px-filter-item-shadow-color));
-}
-.px-filter-item--small.is-active {
-    filter: drop-shadow(2px 2px 0px var(--px-filter-item-active-border-color));
-}
-/* Reset button size matching */
-.px-filter-item--large ~ .px-filter__reset,
-.px-filter__reset:has(~ .px-filter-item--large) {
-  width: 36px;
-  height: 36px;
-  font-size: 16px;
-}
-.px-filter-item--small ~ .px-filter__reset,
-.px-filter__reset:has(~ .px-filter-item--small) {
-  width: 24px;
-  height: 24px;
-  font-size: 12px;
-}
-/* Type variants */
-.px-filter-item--primary {
-    --px-filter-item-active-color: var(--px-color-primary);
-    --px-filter-item-active-border-color: var(--px-color-primary-dark);
-}
-.px-filter-item--primary.is-active {
-    filter: drop-shadow(
-      var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-primary-dark)
-    );
-}
-.px-filter-item--success {
-    --px-filter-item-active-color: var(--px-color-success);
-    --px-filter-item-active-border-color: var(--px-color-success-dark);
-}
-.px-filter-item--success.is-active {
-    filter: drop-shadow(
-      var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-success-dark)
-    );
-}
-.px-filter-item--info {
-    --px-filter-item-active-color: var(--px-color-info);
-    --px-filter-item-active-border-color: var(--px-color-info-dark);
-}
-.px-filter-item--info.is-active {
-    filter: drop-shadow(
-      var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-info-dark)
-    );
-}
-.px-filter-item--warning {
-    --px-filter-item-active-color: var(--px-color-warning);
-    --px-filter-item-active-border-color: var(--px-color-warning-dark);
-}
-.px-filter-item--warning.is-active {
-    filter: drop-shadow(
-      var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-warning-dark)
-    );
-}
-.px-filter-item--danger {
-    --px-filter-item-active-color: var(--px-color-danger);
-    --px-filter-item-active-border-color: var(--px-color-danger-dark);
-}
-.px-filter-item--danger.is-active {
-    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-filter-item {
-  --px-filter-item-inset-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.08);
-  --px-filter-item-inset-shadow: inset -2px -2px 0 0 rgba(0, 0, 0, 0.2);
-}
-/* Filter Container */
-.px-filter {
-  display: inline-flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  align-items: center;
-
-  /* Shared pixel corner clip-path — 2px staircase */
-  --px-filter-clip: 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)
-  );
-}
-/* Reset Button — pixel chip with close icon */
-.px-filter__reset {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 30px;
-  height: 30px;
-  font-size: 14px;
-  color: var(--px-text-color-primary);
-  background: transparent;
-  cursor: pointer;
-  user-select: none;
-  position: relative;
-  transition: transform 0.1s;
-}
-/* Border layer */
-.px-filter__reset::before {
-    content: "";
-    position: absolute;
-    inset: 0;
-    background: var(--px-border-color);
-    clip-path: var(--px-filter-clip);
-    z-index: 0;
-}
-/* Fill layer with 3D bevel */
-.px-filter__reset::after {
-    content: "";
-    position: absolute;
-    inset: 2px;
-    background: var(--px-fill-color-blank);
-    clip-path: var(--px-filter-clip);
-    box-shadow:
-      inset 2px 2px 0 0 rgba(255, 255, 255, 0.2),
-      inset -2px -2px 0 0 rgba(0, 0, 0, 0.1);
-    z-index: 0;
-}
-.px-filter__reset {
-
-  filter: drop-shadow(
-    var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-shadow-color)
-  );
-}
-/* Icon sits above pseudo-elements */
-.px-filter__reset > * {
-    position: relative;
-    z-index: 1;
-}
-.px-filter__reset:hover {
-    transform: translateY(-1px);
-}
-.px-filter__reset:hover::after {
-      box-shadow:
-        inset 2px 2px 0 0 rgba(255, 255, 255, 0.35),
-        inset -2px -2px 0 0 rgba(0, 0, 0, 0.1);
-}
-.px-filter__reset:active {
-    transform: translateY(1px);
-    filter: drop-shadow(2px 2px 0px var(--px-shadow-color));
-}
-.px-filter__reset:active::after {
-      box-shadow:
-        inset -2px -2px 0 0 rgba(255, 255, 255, 0.2),
-        inset 2px 2px 0 0 rgba(0, 0, 0, 0.1);
-}
-/* Filter Item Variables */
-.px-filter-item {
-  --px-filter-item-height: 30px;
-  --px-filter-item-color: var(--px-text-color-primary);
-  --px-filter-item-bg-color: var(--px-fill-color-blank);
-  --px-filter-item-border-color: var(--px-border-color);
-  --px-filter-item-shadow-color: var(--px-shadow-color);
-  --px-filter-item-active-color: var(--px-color-primary);
-  --px-filter-item-active-border-color: var(--px-color-primary-dark);
-  --px-filter-item-inset-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.2);
-  --px-filter-item-inset-shadow: inset -2px -2px 0 0 rgba(0, 0, 0, 0.1);
-}
-/* Base Filter Item Styles — Pixel Chip */
-.px-filter-item {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  height: var(--px-filter-item-height);
-  padding: 0 12px;
-  font-family: var(--px-font-family);
-  font-size: var(--px-font-size-base);
-  line-height: 1;
-  color: var(--px-filter-item-color);
-  background: transparent;
-  cursor: pointer;
-  user-select: none;
-  position: relative;
-  transition: transform 0.1s, width 0.2s, padding 0.2s, opacity 0.15s;
-}
-/* Border layer */
-.px-filter-item::before {
-    content: "";
-    position: absolute;
-    inset: 0;
-    background: var(--px-filter-item-border-color);
-    clip-path: var(--px-filter-clip);
-    z-index: 0;
-}
-/* Fill layer with 3D bevel */
-.px-filter-item::after {
-    content: "";
-    position: absolute;
-    inset: 2px;
-    background: var(--px-filter-item-bg-color);
-    clip-path: var(--px-filter-clip);
-    box-shadow:
-      var(--px-filter-item-inset-highlight),
-      var(--px-filter-item-inset-shadow);
-    z-index: 0;
-}
-.px-filter-item {
-  filter: drop-shadow(
-    var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-filter-item-shadow-color)
-  );
-}
-/* Pixel shadow via filter */
-/* Hover: lift */
-.px-filter-item:hover:not(.is-disabled):not(.is-hidden) {
-    transform: translateY(-1px);
-}
-.px-filter-item:hover:not(.is-disabled):not(.is-hidden)::after {
-      --px-filter-item-inset-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.35);
-}
-/* Active/pressed: push down */
-.px-filter-item:active:not(.is-disabled):not(.is-hidden) {
-    transform: translateY(1px);
-    filter: drop-shadow(2px 2px 0px var(--px-filter-item-shadow-color));
-}
-.px-filter-item:active:not(.is-disabled):not(.is-hidden)::after {
-      --px-filter-item-inset-highlight: inset -2px -2px 0 0 rgba(255, 255, 255, 0.2);
-      --px-filter-item-inset-shadow: inset 2px 2px 0 0 rgba(0, 0, 0, 0.1);
-}
-/* Selected / Active state */
-.px-filter-item.is-active {
-    --px-filter-item-color: var(--px-fill-color-blank);
-}
-.px-filter-item.is-active::before {
-      background: var(--px-filter-item-active-border-color);
-}
-.px-filter-item.is-active::after {
-      background: var(--px-filter-item-active-color);
-}
-.px-filter-item.is-active {
-
-    filter: drop-shadow(
-      var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-filter-item-active-border-color)
-    );
-}
-/* Disabled state */
-.px-filter-item.is-disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-}
-/* Hidden / collapsed state (single-select with active selection) */
-.px-filter-item.is-hidden {
-    width: 0;
-    height: 0;
-    padding: 0;
-    overflow: hidden;
-    opacity: 0;
-    pointer-events: none;
-    filter: none;
-    margin: 0;
-    border: 0;
-}
-.px-filter-item.is-hidden::before,
-    .px-filter-item.is-hidden::after {
-      display: none;
-}
-/* Hidden native input */
-.px-filter-item__original {
-  position: absolute;
-  width: 0;
-  height: 0;
-  opacity: 0;
-  margin: 0;
-  outline: none;
-}
-.px-filter-item__original:focus-visible ~ .px-filter-item__label {
-    outline: 2px dashed var(--px-filter-item-active-color);
-    outline-offset: 2px;
-}
-/* Label */
-.px-filter-item__label {
-  position: relative;
-  z-index: 1;
-  font-family: var(--px-font-family);
-  font-size: inherit;
-  line-height: 1;
-  color: inherit;
-  pointer-events: none;
-}
-/* Size variants */
-.px-filter-item--large {
-  --px-filter-item-height: 36px;
-  padding: 0 16px;
-  font-size: var(--px-font-size-base);
-}
-.px-filter-item--small {
-  --px-filter-item-height: 24px;
-  padding: 0 8px;
-  font-size: var(--px-font-size-small);
-
-  filter: drop-shadow(2px 2px 0px var(--px-filter-item-shadow-color));
-}
-.px-filter-item--small.is-active {
-    filter: drop-shadow(2px 2px 0px var(--px-filter-item-active-border-color));
-}
-/* Reset button size matching */
-.px-filter-item--large ~ .px-filter__reset,
-.px-filter__reset:has(~ .px-filter-item--large) {
-  width: 36px;
-  height: 36px;
-  font-size: 16px;
-}
-.px-filter-item--small ~ .px-filter__reset,
-.px-filter__reset:has(~ .px-filter-item--small) {
-  width: 24px;
-  height: 24px;
-  font-size: 12px;
-}
-/* Type variants */
-.px-filter-item--primary {
-    --px-filter-item-active-color: var(--px-color-primary);
-    --px-filter-item-active-border-color: var(--px-color-primary-dark);
-}
-.px-filter-item--primary.is-active {
-    filter: drop-shadow(
-      var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-primary-dark)
-    );
-}
-.px-filter-item--success {
-    --px-filter-item-active-color: var(--px-color-success);
-    --px-filter-item-active-border-color: var(--px-color-success-dark);
-}
-.px-filter-item--success.is-active {
-    filter: drop-shadow(
-      var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-success-dark)
-    );
-}
-.px-filter-item--info {
-    --px-filter-item-active-color: var(--px-color-info);
-    --px-filter-item-active-border-color: var(--px-color-info-dark);
-}
-.px-filter-item--info.is-active {
-    filter: drop-shadow(
-      var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-info-dark)
-    );
-}
-.px-filter-item--warning {
-    --px-filter-item-active-color: var(--px-color-warning);
-    --px-filter-item-active-border-color: var(--px-color-warning-dark);
-}
-.px-filter-item--warning.is-active {
-    filter: drop-shadow(
-      var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-warning-dark)
-    );
-}
-.px-filter-item--danger {
-    --px-filter-item-active-color: var(--px-color-danger);
-    --px-filter-item-active-border-color: var(--px-color-danger-dark);
-}
-.px-filter-item--danger.is-active {
-    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-filter-item {
-  --px-filter-item-inset-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.08);
-  --px-filter-item-inset-shadow: inset -2px -2px 0 0 rgba(0, 0, 0, 0.2);
-}
+.px-filter-item{--px-filter-item-height:30px;--px-filter-item-color:var(--px-text-color-primary);--px-filter-item-bg-color:var(--px-fill-color-blank);--px-filter-item-border-color:var(--px-border-color);--px-filter-item-shadow-color:var(--px-shadow-color);--px-filter-item-active-color:var(--px-color-primary);--px-filter-item-active-border-color:var(--px-color-primary-dark);--px-filter-item-inset-highlight:inset 2px 2px 0 0 #fff3;--px-filter-item-inset-shadow:inset -2px -2px 0 0 #0000001a;height:var(--px-filter-item-height);font-family:var(--px-font-family);font-size:var(--px-font-size-base);color:var(--px-filter-item-color);cursor:pointer;-webkit-user-select:none;user-select:none;background:0 0;justify-content:center;align-items:center;padding:0 12px;line-height:1;transition:transform .1s,width .2s,padding .2s,opacity .15s;display:inline-flex;position:relative}.px-filter__reset:has(~.px-filter-item--large){width:36px;height:36px;font-size:16px}.px-filter__reset:has(~.px-filter-item--small){width:24px;height:24px;font-size:12px}.px-filter{--px-filter-clip: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-wrap:wrap;align-items:center;gap:8px;display:inline-flex}.px-filter__reset{width:30px;height:30px;color:var(--px-text-color-primary);cursor:pointer;-webkit-user-select:none;user-select:none;background:0 0;justify-content:center;align-items:center;font-size:14px;transition:transform .1s;display:inline-flex;position:relative}.px-filter__reset:before{content:"";background:var(--px-border-color);clip-path:var(--px-filter-clip);z-index:0;position:absolute;inset:0}.px-filter__reset:after{content:"";background:var(--px-fill-color-blank);clip-path:var(--px-filter-clip);z-index:0;position:absolute;inset:2px;box-shadow:inset 2px 2px #fff3,inset -2px -2px #0000001a}.px-filter__reset{filter:drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-shadow-color))}.px-filter__reset>*{z-index:1;position:relative}.px-filter__reset:hover{transform:translateY(-1px)}.px-filter__reset:hover:after{box-shadow:inset 2px 2px #ffffff59,inset -2px -2px #0000001a}.px-filter__reset:active{filter:drop-shadow(2px 2px 0px var(--px-shadow-color));transform:translateY(1px)}.px-filter__reset:active:after{box-shadow:inset -2px -2px #fff3,inset 2px 2px #0000001a}.px-filter-item{--px-filter-item-height:30px;--px-filter-item-color:var(--px-text-color-primary);--px-filter-item-bg-color:var(--px-fill-color-blank);--px-filter-item-border-color:var(--px-border-color);--px-filter-item-shadow-color:var(--px-shadow-color);--px-filter-item-active-color:var(--px-color-primary);--px-filter-item-active-border-color:var(--px-color-primary-dark);--px-filter-item-inset-highlight:inset 2px 2px 0 0 #fff3;--px-filter-item-inset-shadow:inset -2px -2px 0 0 #0000001a;height:var(--px-filter-item-height);font-family:var(--px-font-family);font-size:var(--px-font-size-base);color:var(--px-filter-item-color);cursor:pointer;-webkit-user-select:none;user-select:none;background:0 0;justify-content:center;align-items:center;padding:0 12px;line-height:1;transition:transform .1s,width .2s,padding .2s,opacity .15s;display:inline-flex;position:relative}.px-filter-item:before{content:"";background:var(--px-filter-item-border-color);clip-path:var(--px-filter-clip);z-index:0;position:absolute;inset:0}.px-filter-item:after{content:"";background:var(--px-filter-item-bg-color);clip-path:var(--px-filter-clip);box-shadow:var(--px-filter-item-inset-highlight), var(--px-filter-item-inset-shadow);z-index:0;position:absolute;inset:2px}.px-filter-item{filter:drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-filter-item-shadow-color))}.px-filter-item:hover:not(.is-disabled):not(.is-hidden){transform:translateY(-1px)}.px-filter-item:hover:not(.is-disabled):not(.is-hidden):after{--px-filter-item-inset-highlight:inset 2px 2px 0 0 #ffffff59}.px-filter-item:active:not(.is-disabled):not(.is-hidden){filter:drop-shadow(2px 2px 0px var(--px-filter-item-shadow-color));transform:translateY(1px)}.px-filter-item:active:not(.is-disabled):not(.is-hidden):after{--px-filter-item-inset-highlight:inset -2px -2px 0 0 #fff3;--px-filter-item-inset-shadow:inset 2px 2px 0 0 #0000001a}.px-filter-item.is-active{--px-filter-item-color:var(--px-fill-color-blank)}.px-filter-item.is-active:before{background:var(--px-filter-item-active-border-color)}.px-filter-item.is-active:after{background:var(--px-filter-item-active-color)}.px-filter-item.is-active{filter:drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-filter-item-active-border-color))}.px-filter-item.is-disabled{opacity:.5;cursor:not-allowed}.px-filter-item.is-hidden{opacity:0;pointer-events:none;filter:none;border:0;width:0;height:0;margin:0;padding:0;overflow:hidden}.px-filter-item.is-hidden:before,.px-filter-item.is-hidden:after{display:none}.px-filter-item__original{opacity:0;outline:none;width:0;height:0;margin:0;position:absolute}.px-filter-item__original:focus-visible~.px-filter-item__label{outline:2px dashed var(--px-filter-item-active-color);outline-offset:2px}.px-filter-item__label{z-index:1;font-family:var(--px-font-family);font-size:inherit;color:inherit;pointer-events:none;line-height:1;position:relative}.px-filter-item--large{--px-filter-item-height:36px;font-size:var(--px-font-size-base);padding:0 16px}.px-filter-item--small{--px-filter-item-height:24px;font-size:var(--px-font-size-small);filter:drop-shadow(2px 2px 0px var(--px-filter-item-shadow-color));padding:0 8px}.px-filter-item--small.is-active{filter:drop-shadow(2px 2px 0px var(--px-filter-item-active-border-color))}.px-filter-item--large~.px-filter__reset{width:36px;height:36px;font-size:16px}.px-filter__reset:has(~.px-filter-item--large){width:36px;height:36px;font-size:16px}.px-filter-item--small~.px-filter__reset{width:24px;height:24px;font-size:12px}.px-filter__reset:has(~.px-filter-item--small){width:24px;height:24px;font-size:12px}.px-filter-item--primary{--px-filter-item-active-color:var(--px-color-primary);--px-filter-item-active-border-color:var(--px-color-primary-dark)}.px-filter-item--primary.is-active{filter:drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-primary-dark))}.px-filter-item--success{--px-filter-item-active-color:var(--px-color-success);--px-filter-item-active-border-color:var(--px-color-success-dark)}.px-filter-item--success.is-active{filter:drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-success-dark))}.px-filter-item--info{--px-filter-item-active-color:var(--px-color-info);--px-filter-item-active-border-color:var(--px-color-info-dark)}.px-filter-item--info.is-active{filter:drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-info-dark))}.px-filter-item--warning{--px-filter-item-active-color:var(--px-color-warning);--px-filter-item-active-border-color:var(--px-color-warning-dark)}.px-filter-item--warning.is-active{filter:drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-warning-dark))}.px-filter-item--danger{--px-filter-item-active-color:var(--px-color-danger);--px-filter-item-active-border-color:var(--px-color-danger-dark)}.px-filter-item--danger.is-active{filter:drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-danger-dark))}html.dark .px-filter-item{--px-filter-item-inset-highlight:inset 2px 2px 0 0 #ffffff14;--px-filter-item-inset-shadow:inset -2px -2px 0 0 #0003}