sakana-element 2.4.2 → 2.5.1

package/dist/theme/Input.css

@@ -1,647 +1 @@
-/* Input Variables */
-.px-input {
-  --px-input-text-color: var(--px-text-color-primary);
-  --px-input-border-color: var(--px-border-color);
-  --px-input-hover-border-color: var(--px-hover-border-color);
-  --px-input-focus-border-color: var(--px-hover-border-color);
-  --px-input-bg-color: var(--px-fill-color-blank);
-  --px-input-icon-color: var(--px-text-color-secondary);
-  --px-input-placeholder-color: var(--px-text-color-placeholder);
-  --px-input-clear-hover-color: var(--px-text-color-primary);
-  --px-input-shadow-color: var(--px-shadow-color);
-  --px-input-focus-shadow-color: var(--px-shadow-color-dark);
-
-  /* Inset 3D bevel — sunken field look (reversed from PxButton's raised bevel) */
-  --px-input-inset-shadow: inset 2px 2px 0 0 rgba(0, 0, 0, 0.08);
-  --px-input-inset-highlight: inset -2px -2px 0 0 rgba(255, 255, 255, 0.15);
-}
-/* Base Input Styles */
-.px-input {
-  --px-input-height: 36px;
-  position: relative;
-  font-size: var(--px-font-size-base);
-  font-family: var(--px-font-family);
-  display: inline-flex;
-  width: 100%;
-  line-height: var(--px-input-height);
-  box-sizing: border-box;
-  vertical-align: middle;
-}
-/* Disable native password toggle */
-.px-input input[type="password"] {
-    -webkit-appearance: none;
-}
-.px-input input[type="password"]::-ms-reveal {
-      display: none;
-}
-.px-input input[type="password"]::-ms-clear {
-      display: none;
-}
-/* Disabled state */
-.px-input.is-disabled {
-    cursor: not-allowed;
-}
-.px-input.is-disabled .px-input__wrapper {
-      opacity: 0.6;
-      cursor: not-allowed;
-}
-.px-input.is-disabled .px-input__wrapper::before {
-        background: var(--px-disabled-border-color);
-}
-.px-input.is-disabled .px-input__wrapper::after {
-        background: var(--px-disabled-bg-color);
-}
-.px-input.is-disabled .px-input__inner {
-      color: var(--px-disabled-text-color);
-      -webkit-text-fill-color: var(--px-disabled-text-color);
-      cursor: not-allowed;
-}
-.px-input.is-disabled .px-textarea__inner {
-      background-color: var(--px-disabled-bg-color);
-      border-color: var(--px-disabled-border-color);
-      color: var(--px-disabled-text-color);
-      cursor: not-allowed;
-}
-/* Prepend/Append border adjustments */
-.px-input.is-prepend > .px-input__wrapper::before,
-    .px-input.is-prepend > .px-input__wrapper::after {
-      clip-path: polygon(
-        0 0,
-        calc(100% - 4px) 0,
-        calc(100% - 4px) 2px,
-        calc(100% - 2px) 2px,
-        calc(100% - 2px) 4px,
-        100% 4px,
-        100% calc(100% - 4px),
-        calc(100% - 2px) calc(100% - 4px),
-        calc(100% - 2px) calc(100% - 2px),
-        calc(100% - 4px) calc(100% - 2px),
-        calc(100% - 4px) 100%,
-        0 100%
-      );
-}
-.px-input.is-append > .px-input__wrapper::before,
-    .px-input.is-append > .px-input__wrapper::after {
-      clip-path: polygon(
-        0 4px,
-        2px 4px,
-        2px 2px,
-        4px 2px,
-        4px 0,
-        100% 0,
-        100% 100%,
-        4px 100%,
-        4px calc(100% - 2px),
-        2px calc(100% - 2px),
-        2px calc(100% - 4px),
-        0 calc(100% - 4px)
-      );
-}
-.px-input.is-prepend.is-append > .px-input__wrapper::before,
-    .px-input.is-prepend.is-append > .px-input__wrapper::after {
-      clip-path: none;
-}
-/* Focus state */
-.px-input.is-focus .px-input__wrapper::before {
-      background: var(--px-input-focus-border-color);
-}
-.px-input.is-focus .px-input__wrapper {
-    filter: drop-shadow(4px 4px 0px var(--px-input-focus-shadow-color));
-}
-/* Input Wrapper - Main pixel-style container */
-.px-input__wrapper {
-  display: inline-flex;
-  flex-grow: 1;
-  align-items: center;
-  justify-content: center;
-  padding: 2px 12px;
-  background: transparent;
-  border: none;
-  position: relative;
-  transition: none;
-  height: var(--px-input-height);
-  box-sizing: border-box;
-
-  /* Pixel shadow via drop-shadow */
-  filter: drop-shadow(
-    var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-input-shadow-color)
-  );
-}
-/* Border layer — filled with border color, clipped to pixel shape */
-.px-input__wrapper::before {
-    content: "";
-    position: absolute;
-    inset: 0;
-    background: var(--px-input-border-color);
-    clip-path: polygon(
-      0 4px,
-      2px 4px,
-      2px 2px,
-      4px 2px,
-      4px 0,
-      calc(100% - 4px) 0,
-      calc(100% - 4px) 2px,
-      calc(100% - 2px) 2px,
-      calc(100% - 2px) 4px,
-      100% 4px,
-      100% calc(100% - 4px),
-      calc(100% - 2px) calc(100% - 4px),
-      calc(100% - 2px) calc(100% - 2px),
-      calc(100% - 4px) calc(100% - 2px),
-      calc(100% - 4px) 100%,
-      4px 100%,
-      4px calc(100% - 2px),
-      2px calc(100% - 2px),
-      2px calc(100% - 4px),
-      0 calc(100% - 4px)
-    );
-    z-index: -1;
-}
-/* Fill layer — inset by border width, filled with bg color, with sunken bevel */
-.px-input__wrapper::after {
-    content: "";
-    position: absolute;
-    inset: 2px;
-    background: var(--px-input-bg-color);
-    box-shadow: var(--px-input-inset-shadow), var(--px-input-inset-highlight);
-    clip-path: polygon(
-      0 4px,
-      2px 4px,
-      2px 2px,
-      4px 2px,
-      4px 0,
-      calc(100% - 4px) 0,
-      calc(100% - 4px) 2px,
-      calc(100% - 2px) 2px,
-      calc(100% - 2px) 4px,
-      100% 4px,
-      100% calc(100% - 4px),
-      calc(100% - 2px) calc(100% - 4px),
-      calc(100% - 2px) calc(100% - 2px),
-      calc(100% - 4px) calc(100% - 2px),
-      calc(100% - 4px) 100%,
-      4px 100%,
-      4px calc(100% - 2px),
-      2px calc(100% - 2px),
-      2px calc(100% - 4px),
-      0 calc(100% - 4px)
-    );
-    z-index: -1;
-}
-.px-input__wrapper:hover::before {
-      background: var(--px-input-hover-border-color);
-}
-.px-input__wrapper.is-focus::before {
-      background: var(--px-input-focus-border-color);
-}
-/* Inner input element */
-.px-input__wrapper .px-input__inner {
-    --px-input-inner-height: calc(var(--px-input-height) - 8px);
-    width: 100%;
-    flex-grow: 1;
-    -webkit-appearance: none;
-    color: var(--px-input-text-color);
-    font-size: inherit;
-    font-family: var(--px-font-family);
-    height: var(--px-input-inner-height);
-    line-height: var(--px-input-inner-height);
-    padding: 0;
-    outline: none;
-    border: none;
-    background: none;
-    box-sizing: border-box;
-    -webkit-font-smoothing: none;
-}
-.px-input__wrapper .px-input__inner::placeholder {
-      color: var(--px-input-placeholder-color);
-}
-/* Icon styles */
-.px-input__wrapper .px-icon {
-    height: inherit;
-    line-height: inherit;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    margin-left: 8px;
-    color: var(--px-input-icon-color);
-}
-/* Clear and password icons */
-.px-input__wrapper .px-input__clear,
-  .px-input__wrapper .px-input__password {
-    color: var(--px-input-icon-color);
-    font-size: var(--px-font-size-base);
-    cursor: pointer;
-}
-.px-input__wrapper .px-input__clear:hover, .px-input__wrapper .px-input__password:hover {
-      color: var(--px-input-clear-hover-color);
-}
-/* Size variants */
-.px-input--large {
-  --px-input-height: 44px;
-  font-size: var(--px-font-size-large);
-}
-.px-input--large .px-input__wrapper {
-    padding: 2px 16px;
-}
-.px-input--large .px-input__inner {
-    --px-input-inner-height: calc(var(--px-input-height) - 10px);
-}
-.px-input--small {
-  --px-input-height: 28px;
-  font-size: var(--px-font-size-small);
-}
-.px-input--small .px-input__wrapper {
-    padding: 1px 8px;
-    filter: drop-shadow(2px 2px 0px var(--px-input-shadow-color));
-}
-.px-input--small .px-input__inner {
-    --px-input-inner-height: calc(var(--px-input-height) - 6px);
-}
-/* Color variants */
-.px-input--primary {
-    --px-input-border-color: var(--px-color-primary);
-    --px-input-hover-border-color: var(--px-color-primary-dark);
-    --px-input-focus-border-color: var(--px-color-primary-dark);
-    --px-input-focus-shadow-color: var(--px-color-primary-dark);
-}
-.px-input--primary .px-input__wrapper {
-    filter: drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-primary-dark));
-}
-.px-input--primary.is-focus .px-input__wrapper {
-    filter: drop-shadow(4px 4px 0px var(--px-color-primary-dark));
-}
-/* Textarea color variant */
-.px-input--primary .px-textarea__wrapper {
-    border-color: var(--px-color-primary);
-    filter: drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-primary-dark));
-}
-.px-input--primary .px-textarea__wrapper:hover { border-color: var(--px-color-primary-dark);
-}
-.px-input--primary .px-textarea__wrapper:focus {
-      border-color: var(--px-color-primary-dark);
-      filter: drop-shadow(4px 4px 0px var(--px-color-primary-dark));
-}
-.px-input--success {
-    --px-input-border-color: var(--px-color-success);
-    --px-input-hover-border-color: var(--px-color-success-dark);
-    --px-input-focus-border-color: var(--px-color-success-dark);
-    --px-input-focus-shadow-color: var(--px-color-success-dark);
-}
-.px-input--success .px-input__wrapper {
-    filter: drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-success-dark));
-}
-.px-input--success.is-focus .px-input__wrapper {
-    filter: drop-shadow(4px 4px 0px var(--px-color-success-dark));
-}
-/* Textarea color variant */
-.px-input--success .px-textarea__wrapper {
-    border-color: var(--px-color-success);
-    filter: drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-success-dark));
-}
-.px-input--success .px-textarea__wrapper:hover { border-color: var(--px-color-success-dark);
-}
-.px-input--success .px-textarea__wrapper:focus {
-      border-color: var(--px-color-success-dark);
-      filter: drop-shadow(4px 4px 0px var(--px-color-success-dark));
-}
-.px-input--warning {
-    --px-input-border-color: var(--px-color-warning);
-    --px-input-hover-border-color: var(--px-color-warning-dark);
-    --px-input-focus-border-color: var(--px-color-warning-dark);
-    --px-input-focus-shadow-color: var(--px-color-warning-dark);
-}
-.px-input--warning .px-input__wrapper {
-    filter: drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-warning-dark));
-}
-.px-input--warning.is-focus .px-input__wrapper {
-    filter: drop-shadow(4px 4px 0px var(--px-color-warning-dark));
-}
-/* Textarea color variant */
-.px-input--warning .px-textarea__wrapper {
-    border-color: var(--px-color-warning);
-    filter: drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-warning-dark));
-}
-.px-input--warning .px-textarea__wrapper:hover { border-color: var(--px-color-warning-dark);
-}
-.px-input--warning .px-textarea__wrapper:focus {
-      border-color: var(--px-color-warning-dark);
-      filter: drop-shadow(4px 4px 0px var(--px-color-warning-dark));
-}
-.px-input--info {
-    --px-input-border-color: var(--px-color-info);
-    --px-input-hover-border-color: var(--px-color-info-dark);
-    --px-input-focus-border-color: var(--px-color-info-dark);
-    --px-input-focus-shadow-color: var(--px-color-info-dark);
-}
-.px-input--info .px-input__wrapper {
-    filter: drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-info-dark));
-}
-.px-input--info.is-focus .px-input__wrapper {
-    filter: drop-shadow(4px 4px 0px var(--px-color-info-dark));
-}
-/* Textarea color variant */
-.px-input--info .px-textarea__wrapper {
-    border-color: var(--px-color-info);
-    filter: drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-info-dark));
-}
-.px-input--info .px-textarea__wrapper:hover { border-color: var(--px-color-info-dark);
-}
-.px-input--info .px-textarea__wrapper:focus {
-      border-color: var(--px-color-info-dark);
-      filter: drop-shadow(4px 4px 0px var(--px-color-info-dark));
-}
-.px-input--danger {
-    --px-input-border-color: var(--px-color-danger);
-    --px-input-hover-border-color: var(--px-color-danger-dark);
-    --px-input-focus-border-color: var(--px-color-danger-dark);
-    --px-input-focus-shadow-color: var(--px-color-danger-dark);
-}
-.px-input--danger .px-input__wrapper {
-    filter: drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-danger-dark));
-}
-.px-input--danger.is-focus .px-input__wrapper {
-    filter: drop-shadow(4px 4px 0px var(--px-color-danger-dark));
-}
-/* Textarea color variant */
-.px-input--danger .px-textarea__wrapper {
-    border-color: var(--px-color-danger);
-    filter: drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-danger-dark));
-}
-.px-input--danger .px-textarea__wrapper:hover { border-color: var(--px-color-danger-dark);
-}
-.px-input--danger .px-textarea__wrapper:focus {
-      border-color: var(--px-color-danger-dark);
-      filter: drop-shadow(4px 4px 0px var(--px-color-danger-dark));
-}
-/* Ghost variant — no border/shadow at rest */
-.px-input.is-ghost .px-input__wrapper {
-    filter: none;
-}
-.px-input.is-ghost .px-input__wrapper::before { background: transparent;
-}
-.px-input.is-ghost .px-input__wrapper::after { box-shadow: none;
-}
-.px-input.is-ghost .px-input__wrapper:hover::before { background: var(--px-input-hover-border-color);
-}
-.px-input.is-ghost .px-input__wrapper:hover {
-      filter: drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-input-shadow-color));
-}
-.px-input.is-ghost.is-focus .px-input__wrapper::before { background: var(--px-input-focus-border-color);
-}
-.px-input.is-ghost.is-focus .px-input__wrapper {
-    filter: drop-shadow(4px 4px 0px var(--px-input-focus-shadow-color));
-}
-/* Ghost + Color variants */
-.px-input--primary.is-ghost .px-input__wrapper {
-      filter: none;
-}
-.px-input--primary.is-ghost .px-input__wrapper::before { background: transparent;
-}
-.px-input--primary.is-ghost .px-input__wrapper:hover::before { background: var(--px-color-primary);
-}
-.px-input--primary.is-ghost .px-input__wrapper:hover {
-        filter: drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-primary-dark));
-}
-.px-input--primary.is-ghost.is-focus .px-input__wrapper::before { background: var(--px-color-primary-dark);
-}
-.px-input--primary.is-ghost.is-focus .px-input__wrapper {
-      filter: drop-shadow(4px 4px 0px var(--px-color-primary-dark));
-}
-.px-input--success.is-ghost .px-input__wrapper {
-      filter: none;
-}
-.px-input--success.is-ghost .px-input__wrapper::before { background: transparent;
-}
-.px-input--success.is-ghost .px-input__wrapper:hover::before { background: var(--px-color-success);
-}
-.px-input--success.is-ghost .px-input__wrapper:hover {
-        filter: drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-success-dark));
-}
-.px-input--success.is-ghost.is-focus .px-input__wrapper::before { background: var(--px-color-success-dark);
-}
-.px-input--success.is-ghost.is-focus .px-input__wrapper {
-      filter: drop-shadow(4px 4px 0px var(--px-color-success-dark));
-}
-.px-input--warning.is-ghost .px-input__wrapper {
-      filter: none;
-}
-.px-input--warning.is-ghost .px-input__wrapper::before { background: transparent;
-}
-.px-input--warning.is-ghost .px-input__wrapper:hover::before { background: var(--px-color-warning);
-}
-.px-input--warning.is-ghost .px-input__wrapper:hover {
-        filter: drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-warning-dark));
-}
-.px-input--warning.is-ghost.is-focus .px-input__wrapper::before { background: var(--px-color-warning-dark);
-}
-.px-input--warning.is-ghost.is-focus .px-input__wrapper {
-      filter: drop-shadow(4px 4px 0px var(--px-color-warning-dark));
-}
-.px-input--info.is-ghost .px-input__wrapper {
-      filter: none;
-}
-.px-input--info.is-ghost .px-input__wrapper::before { background: transparent;
-}
-.px-input--info.is-ghost .px-input__wrapper:hover::before { background: var(--px-color-info);
-}
-.px-input--info.is-ghost .px-input__wrapper:hover {
-        filter: drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-info-dark));
-}
-.px-input--info.is-ghost.is-focus .px-input__wrapper::before { background: var(--px-color-info-dark);
-}
-.px-input--info.is-ghost.is-focus .px-input__wrapper {
-      filter: drop-shadow(4px 4px 0px var(--px-color-info-dark));
-}
-.px-input--danger.is-ghost .px-input__wrapper {
-      filter: none;
-}
-.px-input--danger.is-ghost .px-input__wrapper::before { background: transparent;
-}
-.px-input--danger.is-ghost .px-input__wrapper:hover::before { background: var(--px-color-danger);
-}
-.px-input--danger.is-ghost .px-input__wrapper:hover {
-        filter: drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-danger-dark));
-}
-.px-input--danger.is-ghost.is-focus .px-input__wrapper::before { background: var(--px-color-danger-dark);
-}
-.px-input--danger.is-ghost.is-focus .px-input__wrapper {
-      filter: drop-shadow(4px 4px 0px var(--px-color-danger-dark));
-}
-/* Prefix and Suffix */
-.px-input__prefix,
-.px-input__suffix {
-  display: inline-flex;
-  align-items: center;
-  white-space: nowrap;
-  flex-shrink: 0;
-  flex-wrap: nowrap;
-  height: 100%;
-  text-align: center;
-  color: var(--px-input-icon-color);
-  transition: none;
-}
-.px-input__prefix > :first-child {
-    margin-left: 0 !important;
-}
-.px-input__prefix > :last-child {
-    margin-right: 8px !important;
-}
-.px-input__suffix > :first-child {
-    margin-left: 8px !important;
-}
-.px-input__suffix > :last-child {
-    margin-right: 0 !important;
-}
-/* Prepend and Append - Pixel style */
-.px-input__prepend,
-.px-input__append {
-  background: transparent;
-  color: var(--px-text-color-secondary);
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 100%;
-  height: var(--px-input-height);
-  padding: 0 16px;
-  white-space: nowrap;
-  border: none;
-  font-family: var(--px-font-family);
-  box-sizing: border-box;
-
-  /* Pixel shadow via drop-shadow */
-  filter: drop-shadow(
-    var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-input-shadow-color)
-  );
-}
-/* Border layer */
-.px-input__prepend::before, .px-input__append::before {
-    content: "";
-    position: absolute;
-    inset: 0;
-    background: var(--px-input-border-color);
-    z-index: -1;
-}
-/* Fill layer */
-.px-input__prepend::after, .px-input__append::after {
-    content: "";
-    position: absolute;
-    inset: 2px;
-    background: var(--px-fill-color-dark);
-    z-index: -1;
-}
-/* Notched left, straight right */
-.px-input__prepend::before,
-  .px-input__prepend::after {
-    clip-path: polygon(
-      0 4px,
-      2px 4px,
-      2px 2px,
-      4px 2px,
-      4px 0,
-      100% 0,
-      100% 100%,
-      4px 100%,
-      4px calc(100% - 2px),
-      2px calc(100% - 2px),
-      2px calc(100% - 4px),
-      0 calc(100% - 4px)
-    );
-}
-/* Straight left, notched right */
-.px-input__append::before,
-  .px-input__append::after {
-    clip-path: polygon(
-      0 0,
-      calc(100% - 4px) 0,
-      calc(100% - 4px) 2px,
-      calc(100% - 2px) 2px,
-      calc(100% - 2px) 4px,
-      100% 4px,
-      100% calc(100% - 4px),
-      calc(100% - 2px) calc(100% - 4px),
-      calc(100% - 2px) calc(100% - 2px),
-      calc(100% - 4px) calc(100% - 2px),
-      calc(100% - 4px) 100%,
-      0 100%
-    );
-}
-/* Textarea styles */
-.px-input--textarea {
-  position: relative;
-  display: inline-block;
-  width: 100%;
-  vertical-align: bottom;
-  font-size: var(--px-font-size-base);
-}
-.px-textarea__wrapper {
-  position: relative;
-  display: block;
-  resize: vertical;
-  padding: 8px 12px;
-  line-height: 1.5;
-  box-sizing: border-box;
-  width: 100%;
-  font-size: inherit;
-  font-family: var(--px-font-family);
-  color: var(--px-input-text-color);
-  background-color: var(--px-input-bg-color);
-  background: transparent;
-  border: none;
-  -webkit-font-smoothing: none;
-
-  /* Pixel shadow via drop-shadow */
-  filter: drop-shadow(
-    var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-input-shadow-color)
-  );
-
-  /* We need a wrapper for the pixel border since textarea can resize */
-  outline: none;
-}
-.px-textarea__wrapper:hover + .px-textarea__border::before {
-      background: var(--px-input-hover-border-color);
-}
-.px-textarea__wrapper:focus + .px-textarea__border::before {
-      background: var(--px-input-focus-border-color);
-}
-.px-textarea__wrapper:focus {
-    filter: drop-shadow(4px 4px 0px var(--px-input-focus-shadow-color));
-}
-.px-textarea__wrapper::placeholder {
-    color: var(--px-input-placeholder-color);
-}
-/* For textarea, we need a special approach since it can resize */
-.px-textarea__wrapper {
-  border: 2px solid var(--px-input-border-color);
-  background: var(--px-input-bg-color);
-
-  /* Simplified pixel corners using clip-path on the textarea itself */
-  clip-path: polygon(
-    0 4px,
-    2px 4px,
-    2px 2px,
-    4px 2px,
-    4px 0,
-    calc(100% - 4px) 0,
-    calc(100% - 4px) 2px,
-    calc(100% - 2px) 2px,
-    calc(100% - 2px) 4px,
-    100% 4px,
-    100% calc(100% - 4px),
-    calc(100% - 2px) calc(100% - 4px),
-    calc(100% - 2px) calc(100% - 2px),
-    calc(100% - 4px) calc(100% - 2px),
-    calc(100% - 4px) 100%,
-    4px 100%,
-    4px calc(100% - 2px),
-    2px calc(100% - 2px),
-    2px calc(100% - 4px),
-    0 calc(100% - 4px)
-  );
-}
-.px-textarea__wrapper:hover {
-    border-color: var(--px-input-hover-border-color);
-}
-.px-textarea__wrapper:focus {
-    border-color: var(--px-input-focus-border-color);
-}
+.px-input{--px-input-text-color:var(--px-text-color-primary);--px-input-border-color:var(--px-border-color);--px-input-hover-border-color:var(--px-hover-border-color);--px-input-focus-border-color:var(--px-hover-border-color);--px-input-bg-color:var(--px-fill-color-blank);--px-input-icon-color:var(--px-text-color-secondary);--px-input-placeholder-color:var(--px-text-color-placeholder);--px-input-clear-hover-color:var(--px-text-color-primary);--px-input-shadow-color:var(--px-shadow-color);--px-input-focus-shadow-color:var(--px-shadow-color-dark);--px-input-inset-shadow:inset 2px 2px 0 0 #00000014;--px-input-inset-highlight:inset -2px -2px 0 0 #ffffff26;--px-input-height:36px;font-size:var(--px-font-size-base);font-family:var(--px-font-family);width:100%;line-height:var(--px-input-height);box-sizing:border-box;vertical-align:middle;display:inline-flex;position:relative}.px-input input[type=password]{-webkit-appearance:none}.px-input input[type=password]::-ms-reveal{display:none}.px-input input[type=password]::-ms-clear{display:none}.px-input.is-disabled{cursor:not-allowed}.px-input.is-disabled .px-input__wrapper{opacity:.6;cursor:not-allowed}.px-input.is-disabled .px-input__wrapper:before{background:var(--px-disabled-border-color)}.px-input.is-disabled .px-input__wrapper:after{background:var(--px-disabled-bg-color)}.px-input.is-disabled .px-input__inner{color:var(--px-disabled-text-color);-webkit-text-fill-color:var(--px-disabled-text-color);cursor:not-allowed}.px-input.is-disabled .px-textarea__inner{background-color:var(--px-disabled-bg-color);border-color:var(--px-disabled-border-color);color:var(--px-disabled-text-color);cursor:not-allowed}.px-input.is-prepend>.px-input__wrapper:before,.px-input.is-prepend>.px-input__wrapper:after{clip-path:polygon(0 0,calc(100% - 4px) 0,calc(100% - 4px) 2px,calc(100% - 2px) 2px,calc(100% - 2px) 4px,100% 4px,100% calc(100% - 4px),calc(100% - 2px) calc(100% - 4px),calc(100% - 2px) calc(100% - 2px),calc(100% - 4px) calc(100% - 2px),calc(100% - 4px) 100%,0 100%)}.px-input.is-append>.px-input__wrapper:before,.px-input.is-append>.px-input__wrapper:after{clip-path:polygon(0 4px,2px 4px,2px 2px,4px 2px,4px 0,100% 0,100% 100%,4px 100%,4px calc(100% - 2px),2px calc(100% - 2px),2px calc(100% - 4px),0 calc(100% - 4px))}.px-input.is-prepend.is-append>.px-input__wrapper:before,.px-input.is-prepend.is-append>.px-input__wrapper:after{clip-path:none}.px-input.is-focus .px-input__wrapper:before{background:var(--px-input-focus-border-color)}.px-input.is-focus .px-input__wrapper{filter:drop-shadow(4px 4px 0px var(--px-input-focus-shadow-color))}.px-input__wrapper{height:var(--px-input-height);box-sizing:border-box;filter:drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-input-shadow-color));background:0 0;border:none;flex-grow:1;justify-content:center;align-items:center;padding:2px 12px;transition:none;display:inline-flex;position:relative}.px-input__wrapper:before{content:"";background:var(--px-input-border-color);clip-path:polygon(0 4px,2px 4px,2px 2px,4px 2px,4px 0,calc(100% - 4px) 0,calc(100% - 4px) 2px,calc(100% - 2px) 2px,calc(100% - 2px) 4px,100% 4px,100% calc(100% - 4px),calc(100% - 2px) calc(100% - 4px),calc(100% - 2px) calc(100% - 2px),calc(100% - 4px) calc(100% - 2px),calc(100% - 4px) 100%,4px 100%,4px calc(100% - 2px),2px calc(100% - 2px),2px calc(100% - 4px),0 calc(100% - 4px));z-index:-1;position:absolute;inset:0}.px-input__wrapper:after{content:"";background:var(--px-input-bg-color);box-shadow:var(--px-input-inset-shadow), var(--px-input-inset-highlight);clip-path:polygon(0 4px,2px 4px,2px 2px,4px 2px,4px 0,calc(100% - 4px) 0,calc(100% - 4px) 2px,calc(100% - 2px) 2px,calc(100% - 2px) 4px,100% 4px,100% calc(100% - 4px),calc(100% - 2px) calc(100% - 4px),calc(100% - 2px) calc(100% - 2px),calc(100% - 4px) calc(100% - 2px),calc(100% - 4px) 100%,4px 100%,4px calc(100% - 2px),2px calc(100% - 2px),2px calc(100% - 4px),0 calc(100% - 4px));z-index:-1;position:absolute;inset:2px}.px-input__wrapper:hover:before{background:var(--px-input-hover-border-color)}.px-input__wrapper.is-focus:before{background:var(--px-input-focus-border-color)}.px-input__wrapper .px-input__inner{--px-input-inner-height:calc(var(--px-input-height) - 8px);-webkit-appearance:none;width:100%;color:var(--px-input-text-color);font-size:inherit;font-family:var(--px-font-family);height:var(--px-input-inner-height);line-height:var(--px-input-inner-height);box-sizing:border-box;-webkit-font-smoothing:none;background:0 0;border:none;outline:none;flex-grow:1;padding:0}.px-input__wrapper .px-input__inner::placeholder{color:var(--px-input-placeholder-color)}.px-input__wrapper .px-icon{height:inherit;line-height:inherit;color:var(--px-input-icon-color);justify-content:center;align-items:center;margin-left:8px;display:flex}.px-input__wrapper .px-input__clear,.px-input__wrapper .px-input__password{color:var(--px-input-icon-color);font-size:var(--px-font-size-base);cursor:pointer}.px-input__wrapper .px-input__clear:hover,.px-input__wrapper .px-input__password:hover{color:var(--px-input-clear-hover-color)}.px-input--large{--px-input-height:44px;font-size:var(--px-font-size-large)}.px-input--large .px-input__wrapper{padding:2px 16px}.px-input--large .px-input__inner{--px-input-inner-height:calc(var(--px-input-height) - 10px)}.px-input--small{--px-input-height:28px;font-size:var(--px-font-size-small)}.px-input--small .px-input__wrapper{filter:drop-shadow(2px 2px 0px var(--px-input-shadow-color));padding:1px 8px}.px-input--small .px-input__inner{--px-input-inner-height:calc(var(--px-input-height) - 6px)}.px-input--primary{--px-input-border-color:var(--px-color-primary);--px-input-hover-border-color:var(--px-color-primary-dark);--px-input-focus-border-color:var(--px-color-primary-dark);--px-input-focus-shadow-color:var(--px-color-primary-dark)}.px-input--primary .px-input__wrapper{filter:drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-primary-dark))}.px-input--primary.is-focus .px-input__wrapper{filter:drop-shadow(4px 4px 0px var(--px-color-primary-dark))}.px-input--primary .px-textarea__wrapper{border-color:var(--px-color-primary);filter:drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-primary-dark))}.px-input--primary .px-textarea__wrapper:hover{border-color:var(--px-color-primary-dark)}.px-input--primary .px-textarea__wrapper:focus{border-color:var(--px-color-primary-dark);filter:drop-shadow(4px 4px 0px var(--px-color-primary-dark))}.px-input--success{--px-input-border-color:var(--px-color-success);--px-input-hover-border-color:var(--px-color-success-dark);--px-input-focus-border-color:var(--px-color-success-dark);--px-input-focus-shadow-color:var(--px-color-success-dark)}.px-input--success .px-input__wrapper{filter:drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-success-dark))}.px-input--success.is-focus .px-input__wrapper{filter:drop-shadow(4px 4px 0px var(--px-color-success-dark))}.px-input--success .px-textarea__wrapper{border-color:var(--px-color-success);filter:drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-success-dark))}.px-input--success .px-textarea__wrapper:hover{border-color:var(--px-color-success-dark)}.px-input--success .px-textarea__wrapper:focus{border-color:var(--px-color-success-dark);filter:drop-shadow(4px 4px 0px var(--px-color-success-dark))}.px-input--warning{--px-input-border-color:var(--px-color-warning);--px-input-hover-border-color:var(--px-color-warning-dark);--px-input-focus-border-color:var(--px-color-warning-dark);--px-input-focus-shadow-color:var(--px-color-warning-dark)}.px-input--warning .px-input__wrapper{filter:drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-warning-dark))}.px-input--warning.is-focus .px-input__wrapper{filter:drop-shadow(4px 4px 0px var(--px-color-warning-dark))}.px-input--warning .px-textarea__wrapper{border-color:var(--px-color-warning);filter:drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-warning-dark))}.px-input--warning .px-textarea__wrapper:hover{border-color:var(--px-color-warning-dark)}.px-input--warning .px-textarea__wrapper:focus{border-color:var(--px-color-warning-dark);filter:drop-shadow(4px 4px 0px var(--px-color-warning-dark))}.px-input--info{--px-input-border-color:var(--px-color-info);--px-input-hover-border-color:var(--px-color-info-dark);--px-input-focus-border-color:var(--px-color-info-dark);--px-input-focus-shadow-color:var(--px-color-info-dark)}.px-input--info .px-input__wrapper{filter:drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-info-dark))}.px-input--info.is-focus .px-input__wrapper{filter:drop-shadow(4px 4px 0px var(--px-color-info-dark))}.px-input--info .px-textarea__wrapper{border-color:var(--px-color-info);filter:drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-info-dark))}.px-input--info .px-textarea__wrapper:hover{border-color:var(--px-color-info-dark)}.px-input--info .px-textarea__wrapper:focus{border-color:var(--px-color-info-dark);filter:drop-shadow(4px 4px 0px var(--px-color-info-dark))}.px-input--danger{--px-input-border-color:var(--px-color-danger);--px-input-hover-border-color:var(--px-color-danger-dark);--px-input-focus-border-color:var(--px-color-danger-dark);--px-input-focus-shadow-color:var(--px-color-danger-dark)}.px-input--danger .px-input__wrapper{filter:drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-danger-dark))}.px-input--danger.is-focus .px-input__wrapper{filter:drop-shadow(4px 4px 0px var(--px-color-danger-dark))}.px-input--danger .px-textarea__wrapper{border-color:var(--px-color-danger);filter:drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-danger-dark))}.px-input--danger .px-textarea__wrapper:hover{border-color:var(--px-color-danger-dark)}.px-input--danger .px-textarea__wrapper:focus{border-color:var(--px-color-danger-dark);filter:drop-shadow(4px 4px 0px var(--px-color-danger-dark))}.px-input.is-ghost .px-input__wrapper{filter:none}.px-input.is-ghost .px-input__wrapper:before{background:0 0}.px-input.is-ghost .px-input__wrapper:after{box-shadow:none}.px-input.is-ghost .px-input__wrapper:hover:before{background:var(--px-input-hover-border-color)}.px-input.is-ghost .px-input__wrapper:hover{filter:drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-input-shadow-color))}.px-input.is-ghost.is-focus .px-input__wrapper:before{background:var(--px-input-focus-border-color)}.px-input.is-ghost.is-focus .px-input__wrapper{filter:drop-shadow(4px 4px 0px var(--px-input-focus-shadow-color))}.px-input--primary.is-ghost .px-input__wrapper{filter:none}.px-input--primary.is-ghost .px-input__wrapper:before{background:0 0}.px-input--primary.is-ghost .px-input__wrapper:hover:before{background:var(--px-color-primary)}.px-input--primary.is-ghost .px-input__wrapper:hover{filter:drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-primary-dark))}.px-input--primary.is-ghost.is-focus .px-input__wrapper:before{background:var(--px-color-primary-dark)}.px-input--primary.is-ghost.is-focus .px-input__wrapper{filter:drop-shadow(4px 4px 0px var(--px-color-primary-dark))}.px-input--success.is-ghost .px-input__wrapper{filter:none}.px-input--success.is-ghost .px-input__wrapper:before{background:0 0}.px-input--success.is-ghost .px-input__wrapper:hover:before{background:var(--px-color-success)}.px-input--success.is-ghost .px-input__wrapper:hover{filter:drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-success-dark))}.px-input--success.is-ghost.is-focus .px-input__wrapper:before{background:var(--px-color-success-dark)}.px-input--success.is-ghost.is-focus .px-input__wrapper{filter:drop-shadow(4px 4px 0px var(--px-color-success-dark))}.px-input--warning.is-ghost .px-input__wrapper{filter:none}.px-input--warning.is-ghost .px-input__wrapper:before{background:0 0}.px-input--warning.is-ghost .px-input__wrapper:hover:before{background:var(--px-color-warning)}.px-input--warning.is-ghost .px-input__wrapper:hover{filter:drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-warning-dark))}.px-input--warning.is-ghost.is-focus .px-input__wrapper:before{background:var(--px-color-warning-dark)}.px-input--warning.is-ghost.is-focus .px-input__wrapper{filter:drop-shadow(4px 4px 0px var(--px-color-warning-dark))}.px-input--info.is-ghost .px-input__wrapper{filter:none}.px-input--info.is-ghost .px-input__wrapper:before{background:0 0}.px-input--info.is-ghost .px-input__wrapper:hover:before{background:var(--px-color-info)}.px-input--info.is-ghost .px-input__wrapper:hover{filter:drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-info-dark))}.px-input--info.is-ghost.is-focus .px-input__wrapper:before{background:var(--px-color-info-dark)}.px-input--info.is-ghost.is-focus .px-input__wrapper{filter:drop-shadow(4px 4px 0px var(--px-color-info-dark))}.px-input--danger.is-ghost .px-input__wrapper{filter:none}.px-input--danger.is-ghost .px-input__wrapper:before{background:0 0}.px-input--danger.is-ghost .px-input__wrapper:hover:before{background:var(--px-color-danger)}.px-input--danger.is-ghost .px-input__wrapper:hover{filter:drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-danger-dark))}.px-input--danger.is-ghost.is-focus .px-input__wrapper:before{background:var(--px-color-danger-dark)}.px-input--danger.is-ghost.is-focus .px-input__wrapper{filter:drop-shadow(4px 4px 0px var(--px-color-danger-dark))}.px-input__prefix,.px-input__suffix{white-space:nowrap;text-align:center;height:100%;color:var(--px-input-icon-color);flex-wrap:nowrap;flex-shrink:0;align-items:center;transition:none;display:inline-flex}.px-input__prefix>:first-child{margin-left:0!important}.px-input__prefix>:last-child{margin-right:8px!important}.px-input__suffix>:first-child{margin-left:8px!important}.px-input__suffix>:last-child{margin-right:0!important}.px-input__prepend,.px-input__append{color:var(--px-text-color-secondary);min-height:100%;height:var(--px-input-height);white-space:nowrap;font-family:var(--px-font-family);box-sizing:border-box;filter:drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-input-shadow-color));background:0 0;border:none;justify-content:center;align-items:center;padding:0 16px;display:inline-flex;position:relative}.px-input__prepend:before,.px-input__append:before{content:"";background:var(--px-input-border-color);z-index:-1;position:absolute;inset:0}.px-input__prepend:after,.px-input__append:after{content:"";background:var(--px-fill-color-dark);z-index:-1;position:absolute;inset:2px}.px-input__prepend:before,.px-input__prepend:after{clip-path:polygon(0 4px,2px 4px,2px 2px,4px 2px,4px 0,100% 0,100% 100%,4px 100%,4px calc(100% - 2px),2px calc(100% - 2px),2px calc(100% - 4px),0 calc(100% - 4px))}.px-input__append:before,.px-input__append:after{clip-path:polygon(0 0,calc(100% - 4px) 0,calc(100% - 4px) 2px,calc(100% - 2px) 2px,calc(100% - 2px) 4px,100% 4px,100% calc(100% - 4px),calc(100% - 2px) calc(100% - 4px),calc(100% - 2px) calc(100% - 2px),calc(100% - 4px) calc(100% - 2px),calc(100% - 4px) 100%,0 100%)}.px-input--textarea{vertical-align:bottom;width:100%;font-size:var(--px-font-size-base);display:inline-block;position:relative}.px-textarea__wrapper{resize:vertical;box-sizing:border-box;width:100%;line-height:1.5;font-size:inherit;font-family:var(--px-font-family);color:var(--px-input-text-color);background-color:var(--px-input-bg-color);-webkit-font-smoothing:none;filter:drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-input-shadow-color));background:0 0;border:none;outline:none;padding:8px 12px;display:block;position:relative}.px-textarea__wrapper:hover+.px-textarea__border:before{background:var(--px-input-hover-border-color)}.px-textarea__wrapper:focus+.px-textarea__border:before{background:var(--px-input-focus-border-color)}.px-textarea__wrapper:focus{filter:drop-shadow(4px 4px 0px var(--px-input-focus-shadow-color))}.px-textarea__wrapper::placeholder{color:var(--px-input-placeholder-color)}.px-textarea__wrapper{border:2px solid var(--px-input-border-color);background:var(--px-input-bg-color);clip-path:polygon(0 4px,2px 4px,2px 2px,4px 2px,4px 0,calc(100% - 4px) 0,calc(100% - 4px) 2px,calc(100% - 2px) 2px,calc(100% - 2px) 4px,100% 4px,100% calc(100% - 4px),calc(100% - 2px) calc(100% - 4px),calc(100% - 2px) calc(100% - 2px),calc(100% - 4px) calc(100% - 2px),calc(100% - 4px) 100%,4px 100%,4px calc(100% - 2px),2px calc(100% - 2px),2px calc(100% - 4px),0 calc(100% - 4px))}.px-textarea__wrapper:hover{border-color:var(--px-input-hover-border-color)}.px-textarea__wrapper:focus{border-color:var(--px-input-focus-border-color)}