sakana-element 2.4.2 → 2.5.0

package/dist/theme/Checkbox.css

@@ -1,604 +1 @@
-/* Checkbox Variables */
-.px-checkbox {
-  --px-checkbox-size: 18px;
-  --px-checkbox-checked-color: var(--px-color-primary);
-  --px-checkbox-checked-border-color: var(--px-color-primary-dark);
-  --px-checkbox-border-color: var(--px-border-color);
-  --px-checkbox-bg-color: var(--px-fill-color-blank);
-  --px-checkbox-shadow-color: var(--px-shadow-color);
-
-  /* 3D bevel — sunken look (unchecked) */
-  --px-checkbox-inset-highlight: inset -2px -2px 0 0 rgba(255, 255, 255, 0.2);
-  --px-checkbox-inset-shadow: inset 2px 2px 0 0 rgba(0, 0, 0, 0.1);
-}
-/* Base Checkbox Styles */
-.px-checkbox {
-  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-checkbox.is-disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-}
-.px-checkbox.is-disabled .px-checkbox__inner {
-      cursor: not-allowed;
-}
-/* Checked & Indeterminate shared styles */
-.px-checkbox.is-checked .px-checkbox__inner::before, .px-checkbox.is-indeterminate .px-checkbox__inner::before {
-        background: var(--px-checkbox-checked-border-color);
-}
-.px-checkbox.is-checked .px-checkbox__inner::after, .px-checkbox.is-indeterminate .px-checkbox__inner::after {
-        background: var(--px-checkbox-checked-color);
-}
-.px-checkbox.is-checked .px-checkbox__inner .px-checkbox__tick, .px-checkbox.is-indeterminate .px-checkbox__inner .px-checkbox__tick {
-        opacity: 1;
-}
-/* Checked state — raised bevel */
-.px-checkbox.is-checked {
-    --px-checkbox-inset-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.2);
-    --px-checkbox-inset-shadow: inset -2px -2px 0 0 rgba(0, 0, 0, 0.1);
-}
-.px-checkbox.is-checked .px-checkbox__input {
-      filter: drop-shadow(
-        var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-checkbox-checked-border-color)
-      );
-}
-/* Hover feedback */
-.px-checkbox:hover:not(.is-disabled) .px-checkbox__inner::after {
-      --px-checkbox-inset-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.35);
-}
-/* Active/pressed feedback */
-.px-checkbox:active:not(.is-disabled) .px-checkbox__inner::after {
-      --px-checkbox-inset-highlight: inset -2px -2px 0 0 rgba(255, 255, 255, 0.2);
-      --px-checkbox-inset-shadow: inset 2px 2px 0 0 rgba(0, 0, 0, 0.15);
-}
-/* Indeterminate state */
-.px-checkbox.is-indeterminate .px-checkbox__inner .px-checkbox__tick {
-      /* Override checkmark with a pixel-art horizontal dash */
-      clip-path: none;
-      position: absolute;
-      width: 8px;
-      height: 2px;
-      background: var(--px-fill-color-blank);
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-}
-.px-checkbox.is-indeterminate .px-checkbox__input {
-      filter: none;
-}
-/* Size variants */
-.px-checkbox--large {
-  --px-checkbox-size: 22px;
-  font-size: var(--px-font-size-base);
-}
-.px-checkbox--large .px-checkbox__tick {
-    width: 12px;
-    height: 12px;
-}
-.px-checkbox--large.is-indeterminate .px-checkbox__inner .px-checkbox__tick {
-    width: 10px;
-    height: 2px;
-}
-.px-checkbox--small {
-  --px-checkbox-size: 14px;
-  font-size: var(--px-font-size-small);
-}
-.px-checkbox--small .px-checkbox__input {
-    filter: drop-shadow(2px 2px 0px var(--px-checkbox-shadow-color));
-}
-.px-checkbox--small .px-checkbox__tick {
-    width: 8px;
-    height: 8px;
-}
-.px-checkbox--small.is-checked .px-checkbox__input {
-    filter: drop-shadow(2px 2px 0px var(--px-checkbox-checked-border-color));
-}
-.px-checkbox--small.is-indeterminate .px-checkbox__input {
-    filter: none;
-}
-.px-checkbox--small.is-indeterminate .px-checkbox__inner .px-checkbox__tick {
-    width: 6px;
-    height: 2px;
-}
-/* Hidden native input */
-.px-checkbox__original {
-  position: absolute;
-  width: 0;
-  height: 0;
-  opacity: 0;
-  margin: 0;
-  outline: none;
-}
-.px-checkbox__original:focus-visible ~ .px-checkbox__inner {
-    outline: 2px dashed var(--px-checkbox-checked-color);
-    outline-offset: 2px;
-}
-/* Input wrapper */
-.px-checkbox__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-checkbox-shadow-color)
-  );
-}
-/* The pixel-art checkbox box */
-.px-checkbox__inner {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: var(--px-checkbox-size);
-  height: var(--px-checkbox-size);
-  box-sizing: border-box;
-  background: transparent;
-
-  --px-checkbox-pixel-corners: 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)
-  );
-}
-/* Border layer - pixel shape */
-.px-checkbox__inner::before {
-    content: "";
-    position: absolute;
-    inset: 0;
-    background: var(--px-checkbox-border-color);
-    clip-path: var(--px-checkbox-pixel-corners);
-    z-index: 0;
-}
-/* Fill layer - pixel shape with 3D bevel */
-.px-checkbox__inner::after {
-    content: "";
-    position: absolute;
-    inset: 2px;
-    background: var(--px-checkbox-bg-color);
-    clip-path: var(--px-checkbox-pixel-corners);
-    box-shadow:
-      var(--px-checkbox-inset-highlight),
-      var(--px-checkbox-inset-shadow);
-    z-index: 0;
-}
-/* Pixel checkmark */
-.px-checkbox__tick {
-  position: relative;
-  z-index: 1;
-  width: 10px;
-  height: 10px;
-  opacity: 0;
-  /* Pixel staircase checkmark (✓) — stepped 2px increments */
-  clip-path: polygon(
-    /* Left arm descending */
-    10% 40%,
-    10% 60%,
-    20% 60%,
-    20% 70%,
-    30% 70%,
-    30% 80%,
-    /* Bottom vertex */
-    40% 80%,
-    40% 90%,
-    50% 90%,
-    50% 80%,
-    /* Right arm ascending */
-    60% 80%,
-    60% 70%,
-    70% 70%,
-    70% 60%,
-    80% 60%,
-    80% 50%,
-    90% 50%,
-    90% 30%,
-    /* Top of right arm */
-    80% 30%,
-    80% 40%,
-    70% 40%,
-    70% 50%,
-    60% 50%,
-    60% 60%,
-    50% 60%,
-    50% 70%,
-    /* Return along inner edge */
-    40% 70%,
-    40% 60%,
-    30% 60%,
-    30% 50%,
-    20% 50%,
-    20% 40%
-  );
-  background: var(--px-fill-color-blank);
-}
-/* Label */
-.px-checkbox__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-checkbox--primary {
-    --px-checkbox-checked-color: var(--px-color-primary);
-    --px-checkbox-checked-border-color: var(--px-color-primary-dark);
-}
-.px-checkbox--primary.is-checked .px-checkbox__input {
-    filter: drop-shadow(
-      var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-primary-dark)
-    );
-}
-.px-checkbox--success {
-    --px-checkbox-checked-color: var(--px-color-success);
-    --px-checkbox-checked-border-color: var(--px-color-success-dark);
-}
-.px-checkbox--success.is-checked .px-checkbox__input {
-    filter: drop-shadow(
-      var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-success-dark)
-    );
-}
-.px-checkbox--info {
-    --px-checkbox-checked-color: var(--px-color-info);
-    --px-checkbox-checked-border-color: var(--px-color-info-dark);
-}
-.px-checkbox--info.is-checked .px-checkbox__input {
-    filter: drop-shadow(
-      var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-info-dark)
-    );
-}
-.px-checkbox--warning {
-    --px-checkbox-checked-color: var(--px-color-warning);
-    --px-checkbox-checked-border-color: var(--px-color-warning-dark);
-}
-.px-checkbox--warning.is-checked .px-checkbox__input {
-    filter: drop-shadow(
-      var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-warning-dark)
-    );
-}
-.px-checkbox--danger {
-    --px-checkbox-checked-color: var(--px-color-danger);
-    --px-checkbox-checked-border-color: var(--px-color-danger-dark);
-}
-.px-checkbox--danger.is-checked .px-checkbox__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-checkbox {
-  --px-checkbox-inset-highlight: inset -2px -2px 0 0 rgba(255, 255, 255, 0.08);
-  --px-checkbox-inset-shadow: inset 2px 2px 0 0 rgba(0, 0, 0, 0.2);
-}
-html.dark .px-checkbox.is-checked {
-  --px-checkbox-inset-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.08);
-  --px-checkbox-inset-shadow: inset -2px -2px 0 0 rgba(0, 0, 0, 0.2);
-}
-/* Checkbox Group */
-.px-checkbox-group {
-  display: inline-flex;
-  flex-wrap: wrap;
-  gap: 16px;
-  align-items: center;
-}
-/* Checkbox Variables */
-.px-checkbox {
-  --px-checkbox-size: 18px;
-  --px-checkbox-checked-color: var(--px-color-primary);
-  --px-checkbox-checked-border-color: var(--px-color-primary-dark);
-  --px-checkbox-border-color: var(--px-border-color);
-  --px-checkbox-bg-color: var(--px-fill-color-blank);
-  --px-checkbox-shadow-color: var(--px-shadow-color);
-
-  /* 3D bevel — sunken look (unchecked) */
-  --px-checkbox-inset-highlight: inset -2px -2px 0 0 rgba(255, 255, 255, 0.2);
-  --px-checkbox-inset-shadow: inset 2px 2px 0 0 rgba(0, 0, 0, 0.1);
-}
-/* Base Checkbox Styles */
-.px-checkbox {
-  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-checkbox.is-disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-}
-.px-checkbox.is-disabled .px-checkbox__inner {
-      cursor: not-allowed;
-}
-/* Checked & Indeterminate shared styles */
-.px-checkbox.is-checked .px-checkbox__inner::before, .px-checkbox.is-indeterminate .px-checkbox__inner::before {
-        background: var(--px-checkbox-checked-border-color);
-}
-.px-checkbox.is-checked .px-checkbox__inner::after, .px-checkbox.is-indeterminate .px-checkbox__inner::after {
-        background: var(--px-checkbox-checked-color);
-}
-.px-checkbox.is-checked .px-checkbox__inner .px-checkbox__tick, .px-checkbox.is-indeterminate .px-checkbox__inner .px-checkbox__tick {
-        opacity: 1;
-}
-/* Checked state — raised bevel */
-.px-checkbox.is-checked {
-    --px-checkbox-inset-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.2);
-    --px-checkbox-inset-shadow: inset -2px -2px 0 0 rgba(0, 0, 0, 0.1);
-}
-.px-checkbox.is-checked .px-checkbox__input {
-      filter: drop-shadow(
-        var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-checkbox-checked-border-color)
-      );
-}
-/* Hover feedback */
-.px-checkbox:hover:not(.is-disabled) .px-checkbox__inner::after {
-      --px-checkbox-inset-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.35);
-}
-/* Active/pressed feedback */
-.px-checkbox:active:not(.is-disabled) .px-checkbox__inner::after {
-      --px-checkbox-inset-highlight: inset -2px -2px 0 0 rgba(255, 255, 255, 0.2);
-      --px-checkbox-inset-shadow: inset 2px 2px 0 0 rgba(0, 0, 0, 0.15);
-}
-/* Indeterminate state */
-.px-checkbox.is-indeterminate .px-checkbox__inner .px-checkbox__tick {
-      /* Override checkmark with a pixel-art horizontal dash */
-      clip-path: none;
-      position: absolute;
-      width: 8px;
-      height: 2px;
-      background: var(--px-fill-color-blank);
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-}
-.px-checkbox.is-indeterminate .px-checkbox__input {
-      filter: none;
-}
-/* Size variants */
-.px-checkbox--large {
-  --px-checkbox-size: 22px;
-  font-size: var(--px-font-size-base);
-}
-.px-checkbox--large .px-checkbox__tick {
-    width: 12px;
-    height: 12px;
-}
-.px-checkbox--large.is-indeterminate .px-checkbox__inner .px-checkbox__tick {
-    width: 10px;
-    height: 2px;
-}
-.px-checkbox--small {
-  --px-checkbox-size: 14px;
-  font-size: var(--px-font-size-small);
-}
-.px-checkbox--small .px-checkbox__input {
-    filter: drop-shadow(2px 2px 0px var(--px-checkbox-shadow-color));
-}
-.px-checkbox--small .px-checkbox__tick {
-    width: 8px;
-    height: 8px;
-}
-.px-checkbox--small.is-checked .px-checkbox__input {
-    filter: drop-shadow(2px 2px 0px var(--px-checkbox-checked-border-color));
-}
-.px-checkbox--small.is-indeterminate .px-checkbox__input {
-    filter: none;
-}
-.px-checkbox--small.is-indeterminate .px-checkbox__inner .px-checkbox__tick {
-    width: 6px;
-    height: 2px;
-}
-/* Hidden native input */
-.px-checkbox__original {
-  position: absolute;
-  width: 0;
-  height: 0;
-  opacity: 0;
-  margin: 0;
-  outline: none;
-}
-.px-checkbox__original:focus-visible ~ .px-checkbox__inner {
-    outline: 2px dashed var(--px-checkbox-checked-color);
-    outline-offset: 2px;
-}
-/* Input wrapper */
-.px-checkbox__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-checkbox-shadow-color)
-  );
-}
-/* The pixel-art checkbox box */
-.px-checkbox__inner {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: var(--px-checkbox-size);
-  height: var(--px-checkbox-size);
-  box-sizing: border-box;
-  background: transparent;
-
-  --px-checkbox-pixel-corners: 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)
-  );
-}
-/* Border layer - pixel shape */
-.px-checkbox__inner::before {
-    content: "";
-    position: absolute;
-    inset: 0;
-    background: var(--px-checkbox-border-color);
-    clip-path: var(--px-checkbox-pixel-corners);
-    z-index: 0;
-}
-/* Fill layer - pixel shape with 3D bevel */
-.px-checkbox__inner::after {
-    content: "";
-    position: absolute;
-    inset: 2px;
-    background: var(--px-checkbox-bg-color);
-    clip-path: var(--px-checkbox-pixel-corners);
-    box-shadow:
-      var(--px-checkbox-inset-highlight),
-      var(--px-checkbox-inset-shadow);
-    z-index: 0;
-}
-/* Pixel checkmark */
-.px-checkbox__tick {
-  position: relative;
-  z-index: 1;
-  width: 10px;
-  height: 10px;
-  opacity: 0;
-  /* Pixel staircase checkmark (✓) — stepped 2px increments */
-  clip-path: polygon(
-    /* Left arm descending */
-    10% 40%,
-    10% 60%,
-    20% 60%,
-    20% 70%,
-    30% 70%,
-    30% 80%,
-    /* Bottom vertex */
-    40% 80%,
-    40% 90%,
-    50% 90%,
-    50% 80%,
-    /* Right arm ascending */
-    60% 80%,
-    60% 70%,
-    70% 70%,
-    70% 60%,
-    80% 60%,
-    80% 50%,
-    90% 50%,
-    90% 30%,
-    /* Top of right arm */
-    80% 30%,
-    80% 40%,
-    70% 40%,
-    70% 50%,
-    60% 50%,
-    60% 60%,
-    50% 60%,
-    50% 70%,
-    /* Return along inner edge */
-    40% 70%,
-    40% 60%,
-    30% 60%,
-    30% 50%,
-    20% 50%,
-    20% 40%
-  );
-  background: var(--px-fill-color-blank);
-}
-/* Label */
-.px-checkbox__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-checkbox--primary {
-    --px-checkbox-checked-color: var(--px-color-primary);
-    --px-checkbox-checked-border-color: var(--px-color-primary-dark);
-}
-.px-checkbox--primary.is-checked .px-checkbox__input {
-    filter: drop-shadow(
-      var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-primary-dark)
-    );
-}
-.px-checkbox--success {
-    --px-checkbox-checked-color: var(--px-color-success);
-    --px-checkbox-checked-border-color: var(--px-color-success-dark);
-}
-.px-checkbox--success.is-checked .px-checkbox__input {
-    filter: drop-shadow(
-      var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-success-dark)
-    );
-}
-.px-checkbox--info {
-    --px-checkbox-checked-color: var(--px-color-info);
-    --px-checkbox-checked-border-color: var(--px-color-info-dark);
-}
-.px-checkbox--info.is-checked .px-checkbox__input {
-    filter: drop-shadow(
-      var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-info-dark)
-    );
-}
-.px-checkbox--warning {
-    --px-checkbox-checked-color: var(--px-color-warning);
-    --px-checkbox-checked-border-color: var(--px-color-warning-dark);
-}
-.px-checkbox--warning.is-checked .px-checkbox__input {
-    filter: drop-shadow(
-      var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-warning-dark)
-    );
-}
-.px-checkbox--danger {
-    --px-checkbox-checked-color: var(--px-color-danger);
-    --px-checkbox-checked-border-color: var(--px-color-danger-dark);
-}
-.px-checkbox--danger.is-checked .px-checkbox__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-checkbox {
-  --px-checkbox-inset-highlight: inset -2px -2px 0 0 rgba(255, 255, 255, 0.08);
-  --px-checkbox-inset-shadow: inset 2px 2px 0 0 rgba(0, 0, 0, 0.2);
-}
-html.dark .px-checkbox.is-checked {
-  --px-checkbox-inset-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.08);
-  --px-checkbox-inset-shadow: inset -2px -2px 0 0 rgba(0, 0, 0, 0.2);
-}
-/* Checkbox Group */
-.px-checkbox-group {
-  display: inline-flex;
-  flex-wrap: wrap;
-  gap: 16px;
-  align-items: center;
-}
+.px-checkbox{--px-checkbox-size:18px;--px-checkbox-checked-color:var(--px-color-primary);--px-checkbox-checked-border-color:var(--px-color-primary-dark);--px-checkbox-border-color:var(--px-border-color);--px-checkbox-bg-color:var(--px-fill-color-blank);--px-checkbox-shadow-color:var(--px-shadow-color);--px-checkbox-inset-highlight:inset -2px -2px 0 0 #fff3;--px-checkbox-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-checkbox{--px-checkbox-size:18px;--px-checkbox-checked-color:var(--px-color-primary);--px-checkbox-checked-border-color:var(--px-color-primary-dark);--px-checkbox-border-color:var(--px-border-color);--px-checkbox-bg-color:var(--px-fill-color-blank);--px-checkbox-shadow-color:var(--px-shadow-color);--px-checkbox-inset-highlight:inset -2px -2px 0 0 #fff3;--px-checkbox-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-checkbox.is-disabled{opacity:.5;cursor:not-allowed}.px-checkbox.is-disabled .px-checkbox__inner{cursor:not-allowed}.px-checkbox.is-checked .px-checkbox__inner:before,.px-checkbox.is-indeterminate .px-checkbox__inner:before{background:var(--px-checkbox-checked-border-color)}.px-checkbox.is-checked .px-checkbox__inner:after,.px-checkbox.is-indeterminate .px-checkbox__inner:after{background:var(--px-checkbox-checked-color)}.px-checkbox.is-checked .px-checkbox__inner .px-checkbox__tick,.px-checkbox.is-indeterminate .px-checkbox__inner .px-checkbox__tick{opacity:1}.px-checkbox.is-checked{--px-checkbox-inset-highlight:inset 2px 2px 0 0 #fff3;--px-checkbox-inset-shadow:inset -2px -2px 0 0 #0000001a}.px-checkbox.is-checked .px-checkbox__input{filter:drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-checkbox-checked-border-color))}.px-checkbox:hover:not(.is-disabled) .px-checkbox__inner:after{--px-checkbox-inset-highlight:inset 2px 2px 0 0 #ffffff59}.px-checkbox:active:not(.is-disabled) .px-checkbox__inner:after{--px-checkbox-inset-highlight:inset -2px -2px 0 0 #fff3;--px-checkbox-inset-shadow:inset 2px 2px 0 0 #00000026}.px-checkbox.is-indeterminate .px-checkbox__inner .px-checkbox__tick{clip-path:none;background:var(--px-fill-color-blank);width:8px;height:2px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.px-checkbox.is-indeterminate .px-checkbox__input{filter:none}.px-checkbox--large{--px-checkbox-size:22px;font-size:var(--px-font-size-base)}.px-checkbox--large .px-checkbox__tick{width:12px;height:12px}.px-checkbox--large.is-indeterminate .px-checkbox__inner .px-checkbox__tick{width:10px;height:2px}.px-checkbox--small{--px-checkbox-size:14px;font-size:var(--px-font-size-small)}.px-checkbox--small .px-checkbox__input{filter:drop-shadow(2px 2px 0px var(--px-checkbox-shadow-color))}.px-checkbox--small .px-checkbox__tick{width:8px;height:8px}.px-checkbox--small.is-checked .px-checkbox__input{filter:drop-shadow(2px 2px 0px var(--px-checkbox-checked-border-color))}.px-checkbox--small.is-indeterminate .px-checkbox__input{filter:none}.px-checkbox--small.is-indeterminate .px-checkbox__inner .px-checkbox__tick{width:6px;height:2px}.px-checkbox__original{opacity:0;outline:none;width:0;height:0;margin:0;position:absolute}.px-checkbox__original:focus-visible~.px-checkbox__inner{outline:2px dashed var(--px-checkbox-checked-color);outline-offset:2px}.px-checkbox__input{filter:drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-checkbox-shadow-color));flex-shrink:0;justify-content:center;align-items:center;display:inline-flex;position:relative}.px-checkbox__inner{width:var(--px-checkbox-size);height:var(--px-checkbox-size);box-sizing:border-box;--px-checkbox-pixel-corners: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));background:0 0;justify-content:center;align-items:center;display:inline-flex;position:relative}.px-checkbox__inner:before{content:"";background:var(--px-checkbox-border-color);clip-path:var(--px-checkbox-pixel-corners);z-index:0;position:absolute;inset:0}.px-checkbox__inner:after{content:"";background:var(--px-checkbox-bg-color);clip-path:var(--px-checkbox-pixel-corners);box-shadow:var(--px-checkbox-inset-highlight), var(--px-checkbox-inset-shadow);z-index:0;position:absolute;inset:2px}.px-checkbox__tick{z-index:1;opacity:0;clip-path:polygon(10% 40%,10% 60%,20% 60%,20% 70%,30% 70%,30% 80%,40% 80%,40% 90%,50% 90%,50% 80%,60% 80%,60% 70%,70% 70%,70% 60%,80% 60%,80% 50%,90% 50%,90% 30%,80% 30%,80% 40%,70% 40%,70% 50%,60% 50%,60% 60%,50% 60%,50% 70%,40% 70%,40% 60%,30% 60%,30% 50%,20% 50%,20% 40%);background:var(--px-fill-color-blank);width:10px;height:10px;position:relative}.px-checkbox__label{font-family:var(--px-font-family);font-size:inherit;color:var(--px-text-color-primary);padding-left:8px;line-height:1.2}.px-checkbox--primary{--px-checkbox-checked-color:var(--px-color-primary);--px-checkbox-checked-border-color:var(--px-color-primary-dark)}.px-checkbox--primary.is-checked .px-checkbox__input{filter:drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-primary-dark))}.px-checkbox--success{--px-checkbox-checked-color:var(--px-color-success);--px-checkbox-checked-border-color:var(--px-color-success-dark)}.px-checkbox--success.is-checked .px-checkbox__input{filter:drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-success-dark))}.px-checkbox--info{--px-checkbox-checked-color:var(--px-color-info);--px-checkbox-checked-border-color:var(--px-color-info-dark)}.px-checkbox--info.is-checked .px-checkbox__input{filter:drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-info-dark))}.px-checkbox--warning{--px-checkbox-checked-color:var(--px-color-warning);--px-checkbox-checked-border-color:var(--px-color-warning-dark)}.px-checkbox--warning.is-checked .px-checkbox__input{filter:drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-warning-dark))}.px-checkbox--danger{--px-checkbox-checked-color:var(--px-color-danger);--px-checkbox-checked-border-color:var(--px-color-danger-dark)}.px-checkbox--danger.is-checked .px-checkbox__input{filter:drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-danger-dark))}html.dark .px-checkbox{--px-checkbox-inset-highlight:inset -2px -2px 0 0 #ffffff14;--px-checkbox-inset-shadow:inset 2px 2px 0 0 #0003}html.dark .px-checkbox.is-checked{--px-checkbox-inset-highlight:inset 2px 2px 0 0 #ffffff14;--px-checkbox-inset-shadow:inset -2px -2px 0 0 #0003}.px-checkbox-group{flex-wrap:wrap;align-items:center;gap:16px;display:inline-flex}