.color-swatch-grid{--d:2em;--gap:.4em;--pad:.35em;flex-wrap:wrap;align-items:center;gap:.6em;margin-top:.4em;display:flex}.color-hue{width:var(--d);height:var(--d);border-radius:50%;outline:none;flex:none;position:relative}.color-hue:hover,.color-hue:focus-within,.color-hue.open{z-index:5}.color-rest,.color-shade{appearance:none;background:var(--sw);cursor:pointer;border:1.5px solid #0000001f;border-radius:50%;padding:0}.color-rest{position:absolute;inset:0}.color-stoplight{width:calc(var(--d) + var(--pad) * 2);height:calc(var(--d) * 3 + var(--gap) * 2 + var(--pad) * 2);opacity:0;pointer-events:none;transition:opacity .14s;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.color-hue:hover .color-stoplight,.color-hue:focus-within .color-stoplight,.color-hue.open .color-stoplight{opacity:1;pointer-events:auto}.color-pill{width:calc(var(--d) + var(--pad) * 2);height:calc(var(--d) + var(--pad) * 2);opacity:0;box-shadow:none;background:#fff;border:1px solid #00000012;border-radius:999px;transition:height .18s cubic-bezier(.34,1.3,.5,1),opacity .12s,box-shadow .18s;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.color-hue:hover .color-pill,.color-hue:focus-within .color-pill,.color-hue.open .color-pill{height:calc(var(--d) * 3 + var(--gap) * 2 + var(--pad) * 4);opacity:1;box-shadow:0 6px 18px #29363d38,0 1px 4px #29363d24}.color-hue:focus-visible .color-pill{opacity:1;outline:2px solid var(--selected-color);outline-offset:2px}.color-shade{width:var(--d);height:var(--d);margin:calc(var(--d) / -2) 0 0 calc(var(--d) / -2);border:1.5px solid #0000001a;transition:transform .18s cubic-bezier(.34,1.3,.5,1),opacity .14s;position:absolute;top:50%;left:50%}.color-shade.light{opacity:0;transform:translateY(0)scale(.6)}.color-shade.base{opacity:1;z-index:1;transform:translateY(0)scale(1)}.color-shade.dark{opacity:0;transform:translateY(0)scale(.6)}.color-hue:hover .color-shade.light,.color-hue:focus-within .color-shade.light,.color-hue.open .color-shade.light{transform:translateY(calc(-1 * (var(--d) + var(--gap)))) scale(1);opacity:1}.color-hue:hover .color-shade.dark,.color-hue:focus-within .color-shade.dark,.color-hue.open .color-shade.dark{transform:translateY(calc(var(--d) + var(--gap))) scale(1);opacity:1}.color-rest.is-selected,.color-shade.is-selected{box-shadow:0 0 0 2px var(--card-bg,#fff), 0 0 0 4px var(--selected-color);border-color:#0000}.color-rest.is-selected:after,.color-shade.is-selected:after{content:"check";font-family:Material Symbols Outlined;font-size:calc(var(--d) * .62);color:#fff;text-shadow:0 0 2px #00000073;pointer-events:none;place-items:center;line-height:1;display:grid;position:absolute;inset:0}.x-wrapper.disabled .color-swatch-grid{opacity:.55;pointer-events:none}@media (prefers-reduced-motion:reduce){.color-pill,.color-shade,.color-stoplight{transition:none}}
.x-mask-input{padding:.5em 1em}
.p-inputnumber-buttons-stacked>.x-input{border-top-right-radius:0;border-bottom-right-radius:0}.x-edge-button-group{width:3em;height:3em}.x-edge-button{padding:0 5px}.x-button-up{border-radius:0 var(--radius-sm) 0 0;border-bottom-width:0}.x-button-down{border-radius:0 0 var(--radius-sm) 0}