@layer blades {
input, optgroup, select, textarea {
  font-size: 1rem;
  line-height: var(--pico-line-height);
  letter-spacing: inherit;
  margin: 0;
  font-family: inherit;
}

input {
  overflow: visible;
}

select {
  text-transform: none;
}

legend {
  max-width: 100%;
  color: inherit;
  white-space: normal;
  padding: 0;
}

textarea {
  overflow: auto;
}

[type="checkbox"], [type="radio"] {
  padding: 0;
}

::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
  height: auto;
}

[type="search"] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

:-moz-focusring {
  outline: none;
}

:-moz-ui-invalid {
  box-shadow: none;
}

::-ms-expand {
  display: none;
}

[type="file"], [type="range"] {
  border-width: 0;
  padding: 0;
}

input:not([type="checkbox"], [type="radio"], [type="range"]) {
  height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 +
      var(--pico-border-width) * 2);
}

fieldset {
  width: 100%;
  min-width: 0;
  margin: 0;
  margin-bottom: var(--pico-spacing);
  border: 0;
  padding: 0;
}

label, fieldset legend {
  margin-bottom: calc(var(--pico-spacing) * .375);
  color: var(--pico-color);
  font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
  display: block;
}

fieldset legend {
  margin-bottom: calc(var(--pico-spacing) * .5);
}

input:not([type="checkbox"], [type="radio"]), button[type="submit"], select, textarea {
  width: 100%;
}

input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]), select, textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
}

input, select, textarea {
  --pico-background-color: var(--pico-form-element-background-color);
  --pico-border-color: var(--pico-form-element-border-color);
  --pico-color: var(--pico-form-element-color);
  --pico-box-shadow: none;
  border: var(--pico-border-width) solid var(--pico-border-color);
  border-radius: var(--pico-border-radius);
  background-color: var(--pico-background-color);
  box-shadow: var(--pico-box-shadow);
  color: var(--pico-color);
  font-weight: var(--pico-font-weight);
  transition: background-color var(--pico-transition),
    border-color var(--pico-transition),
    color var(--pico-transition),
    box-shadow var(--pico-transition);
  outline: none;
}

input:not([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [readonly]):is(:active, :focus), :where(select, textarea):not([readonly]):is(:active, :focus) {
  --pico-background-color: var(--pico-form-element-active-background-color);
}

input:not([type="submit"], [type="button"], [type="reset"], [role="switch"], [readonly]):is(:active, :focus), :where(select, textarea):not([readonly]):is(:active, :focus) {
  --pico-border-color: var(--pico-form-element-active-border-color);
}

input:not([type="submit"], [type="button"], [type="reset"], [type="range"], [type="file"], [readonly]):focus, :where(select, textarea):not([readonly]):focus {
  --pico-box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color);
}

input:not([type="submit"], [type="button"], [type="reset"])[disabled], select[disabled], textarea[disabled], label[aria-disabled="true"], :where(fieldset[disabled]) :is(input:not([type="submit"], [type="button"], [type="reset"]), select, textarea) {
  opacity: var(--pico-form-element-disabled-opacity);
  pointer-events: none;
}

label[aria-disabled="true"] input[disabled] {
  opacity: 1;
}

:where(input, select, textarea):not([type="checkbox"], [type="radio"], [type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"], [type="range"])[aria-invalid] {
  padding-left: var(--pico-form-element-spacing-horizontal);
  background-position: right .75rem center;
  background-repeat: no-repeat;
  background-size: 1rem;
  padding-right: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important;
  padding-inline-start: var(--pico-form-element-spacing-horizontal) !important;
  padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important;
}

:where(input, select, textarea):not([type="checkbox"], [type="radio"], [type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"], [type="range"])[aria-invalid="false"]:not(select) {
  background-image: var(--pico-icon-valid);
}

:where(input, select, textarea):not([type="checkbox"], [type="radio"], [type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"], [type="range"])[aria-invalid="true"]:not(select) {
  background-image: var(--pico-icon-invalid);
}

:where(input, select, textarea)[aria-invalid="false"] {
  --pico-border-color: var(--pico-form-element-valid-border-color);
}

:where(input, select, textarea)[aria-invalid="false"]:is(:active, :focus) {
  --pico-border-color: var(--pico-form-element-valid-active-border-color) !important;
}

:where(input, select, textarea)[aria-invalid="false"]:is(:active, :focus):not([type="checkbox"], [type="radio"]) {
  --pico-box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-valid-focus-color) !important;
}

:where(input, select, textarea)[aria-invalid="true"] {
  --pico-border-color: var(--pico-form-element-invalid-border-color);
}

:where(input, select, textarea)[aria-invalid="true"]:is(:active, :focus) {
  --pico-border-color: var(--pico-form-element-invalid-active-border-color) !important;
}

:where(input, select, textarea)[aria-invalid="true"]:is(:active, :focus):not([type="checkbox"], [type="radio"]) {
  --pico-box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-invalid-focus-color) !important;
}

[dir="rtl"] :where(input, select, textarea):not([type="checkbox"], [type="radio"]):is([aria-invalid], [aria-invalid="true"], [aria-invalid="false"]) {
  background-position: .75rem;
}

input::placeholder, input::-webkit-input-placeholder, textarea::placeholder, textarea::-webkit-input-placeholder, select:invalid {
  color: var(--pico-form-element-placeholder-color);
  opacity: 1;
}

input:not([type="checkbox"], [type="radio"]), select, textarea {
  margin-bottom: var(--pico-spacing);
}

select::-ms-expand {
  background-color: #0000;
  border: 0;
}

select:not([multiple], [size]) {
  padding-right: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
  padding-left: var(--pico-form-element-spacing-horizontal);
  background-image: var(--pico-icon-chevron);
  background-position: right .75rem center;
  background-repeat: no-repeat;
  background-size: 1rem;
  padding-inline-start: var(--pico-form-element-spacing-horizontal);
  padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
}

select[multiple] option:checked {
  background: var(--pico-form-element-selected-background-color);
  color: var(--pico-form-element-color);
}

[dir="rtl"] select:not([multiple], [size]) {
  background-position: .75rem;
}

textarea {
  resize: vertical;
  display: block;
}

textarea[aria-invalid] {
  --pico-icon-height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 +
      var(--pico-border-width) * 2);
  background-position: right .75rem top !important;
  background-size: 1rem var(--pico-icon-height) !important;
}

:where(input, select, textarea, fieldset, .grid) + small {
  width: 100%;
  margin-top: calc(var(--pico-spacing) * -.75);
  margin-bottom: var(--pico-spacing);
  color: var(--pico-muted-color);
  display: block;
}

:where(input, select, textarea, fieldset, .grid)[aria-invalid="false"] + small {
  color: var(--pico-ins-color);
}

:where(input, select, textarea, fieldset, .grid)[aria-invalid="true"] + small {
  color: var(--pico-del-color);
}

label > :where(input, select, textarea) {
  margin-top: calc(var(--pico-spacing) * .25);
}

:where(:scope), :host {
  --pico-icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
  --pico-icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
}

:where(:scope, [data-theme="light"], [data-theme="dark"]), :host {
  --pico-switch-background-color: light-dark(#bfc7d9, #333c4e);
  --pico-switch-checked-background-color: var(--pico-primary-background);
  --pico-switch-color: #fff;
  --pico-switch-thumb-box-shadow: 0 0 0 #0000;
}

label:has([type="checkbox"], [type="radio"]) {
  cursor: pointer;
  width: fit-content;
}

[type="checkbox"], [type="radio"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  margin-top: -.125em;
  border-width: var(--pico-border-width);
  vertical-align: middle;
  cursor: pointer;
  width: 1.25em;
  height: 1.25em;
  margin-inline-end: .5em;
}

[type="checkbox"]::-ms-check, [type="radio"]::-ms-check {
  display: none;
}

[type="checkbox"]:checked, [type="checkbox"]:checked:active, [type="checkbox"]:checked:focus, [type="radio"]:checked, [type="radio"]:checked:active, [type="radio"]:checked:focus {
  --pico-background-color: var(--pico-primary-background);
  --pico-border-color: var(--pico-primary-border);
  background-image: var(--pico-icon-checkbox);
  background-position: center;
  background-repeat: no-repeat;
  background-size: .75em;
}

[type="checkbox"] ~ label, [type="radio"] ~ label {
  cursor: pointer;
  margin-bottom: 0;
  display: inline-block;
}

[type="checkbox"] ~ label:not(:last-of-type), [type="radio"] ~ label:not(:last-of-type) {
  margin-inline-end: 1em;
}

[type="checkbox"]:indeterminate {
  --pico-background-color: var(--pico-primary-background);
  --pico-border-color: var(--pico-primary-border);
  background-image: var(--pico-icon-minus);
  background-position: center;
  background-repeat: no-repeat;
  background-size: .75em;
}

[type="radio"] {
  border-radius: 50%;
}

[type="radio"]:checked, [type="radio"]:checked:active, [type="radio"]:checked:focus {
  --pico-background-color: var(--pico-primary-inverse);
  background-image: none;
  border-width: .35em;
}

[type="checkbox"][role="switch"] {
  --pico-background-color: var(--pico-switch-background-color);
  --pico-color: var(--pico-switch-color);
  border: var(--pico-border-width) solid var(--pico-border-color);
  background-color: var(--pico-background-color);
  border-radius: 1.25em;
  width: 2.25em;
  height: 1.25em;
  line-height: 1.25em;
}

[type="checkbox"][role="switch"]:not([aria-invalid]) {
  --pico-border-color: var(--pico-switch-background-color);
}

[type="checkbox"][role="switch"]:before {
  aspect-ratio: 1;
  background-color: var(--pico-color);
  height: 100%;
  box-shadow: var(--pico-switch-thumb-box-shadow);
  content: "";
  border-radius: 50%;
  transition: margin .1s ease-in-out;
  display: block;
}

[type="checkbox"][role="switch"]:focus {
  --pico-background-color: var(--pico-switch-background-color);
  --pico-border-color: var(--pico-switch-background-color);
}

[type="checkbox"][role="switch"]:checked {
  --pico-background-color: var(--pico-switch-checked-background-color);
  --pico-border-color: var(--pico-switch-checked-background-color);
  background-image: none;
}

[type="checkbox"][role="switch"]:checked:before {
  margin-inline-start: 1em;
}

[type="checkbox"][role="switch"][disabled] {
  --pico-background-color: var(--pico-border-color);
}

[type="checkbox"][aria-invalid="false"]:checked, [type="checkbox"][aria-invalid="false"]:checked:active, [type="checkbox"][aria-invalid="false"]:checked:focus, [type="checkbox"][role="switch"][aria-invalid="false"]:checked, [type="checkbox"][role="switch"][aria-invalid="false"]:checked:active, [type="checkbox"][role="switch"][aria-invalid="false"]:checked:focus {
  --pico-background-color: var(--pico-form-element-valid-border-color);
}

[type="checkbox"]:checked[aria-invalid="true"], [type="checkbox"]:checked:active[aria-invalid="true"], [type="checkbox"]:checked:focus[aria-invalid="true"], [type="checkbox"][role="switch"]:checked[aria-invalid="true"], [type="checkbox"][role="switch"]:checked:active[aria-invalid="true"], [type="checkbox"][role="switch"]:checked:focus[aria-invalid="true"] {
  --pico-background-color: var(--pico-form-element-invalid-border-color);
}

[type="checkbox"][aria-invalid="false"]:checked, [type="checkbox"][aria-invalid="false"]:checked:active, [type="checkbox"][aria-invalid="false"]:checked:focus, [type="radio"][aria-invalid="false"]:checked, [type="radio"][aria-invalid="false"]:checked:active, [type="radio"][aria-invalid="false"]:checked:focus, [type="checkbox"][role="switch"][aria-invalid="false"]:checked, [type="checkbox"][role="switch"][aria-invalid="false"]:checked:active, [type="checkbox"][role="switch"][aria-invalid="false"]:checked:focus {
  --pico-border-color: var(--pico-form-element-valid-border-color);
}

[type="checkbox"]:checked[aria-invalid="true"], [type="checkbox"]:checked:active[aria-invalid="true"], [type="checkbox"]:checked:focus[aria-invalid="true"], [type="radio"]:checked[aria-invalid="true"], [type="radio"]:checked:active[aria-invalid="true"], [type="radio"]:checked:focus[aria-invalid="true"], [type="checkbox"][role="switch"]:checked[aria-invalid="true"], [type="checkbox"][role="switch"]:checked:active[aria-invalid="true"], [type="checkbox"][role="switch"]:checked:focus[aria-invalid="true"] {
  --pico-border-color: var(--pico-form-element-invalid-border-color);
}

[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
}

[type="color"]::-moz-focus-inner {
  padding: 0;
}

[type="color"]::-webkit-color-swatch {
  border-radius: calc(var(--pico-border-radius) * .5);
  border: 0;
}

[type="color"]::-moz-color-swatch {
  border-radius: calc(var(--pico-border-radius) * .5);
  border: 0;
}

:where(:scope), :host {
  --pico-icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
  --pico-icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
}

input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]):is([type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"]) {
  --pico-icon-position: .75rem;
  --pico-icon-width: 1rem;
  padding-right: calc(var(--pico-icon-width) + var(--pico-icon-position));
  background-image: var(--pico-icon-date);
  background-position: center right var(--pico-icon-position);
  background-size: var(--pico-icon-width) auto;
  background-repeat: no-repeat;
  min-width: 0;
}

input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="time"] {
  background-image: var(--pico-icon-time);
}

[type="date"]::-webkit-calendar-picker-indicator, [type="datetime-local"]::-webkit-calendar-picker-indicator, [type="month"]::-webkit-calendar-picker-indicator, [type="time"]::-webkit-calendar-picker-indicator, [type="week"]::-webkit-calendar-picker-indicator {
  width: var(--pico-icon-width);
  margin-right: calc(var(--pico-icon-width) * -1);
  margin-left: var(--pico-icon-position);
  opacity: 0;
}

@-moz-document url-prefix() {
  [type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"] {
    padding-right: var(--pico-form-element-spacing-horizontal) !important;
    background-image: none !important;
  }
}

[dir="rtl"] :is([type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"]) {
  text-align: end;
}

[type="file"] {
  --pico-color: var(--pico-muted-color);
  margin-left: calc(var(--pico-outline-width) * -1);
  padding: calc(var(--pico-form-element-spacing-vertical) * .5) 0;
  padding-left: var(--pico-outline-width);
  background: none;
  border: 0;
  border-radius: 0;
}

[type="file"]::file-selector-button {
  margin-right: calc(var(--pico-spacing) / 2);
  padding: calc(var(--pico-form-element-spacing-vertical) * .5)
    var(--pico-form-element-spacing-horizontal);
}

[type="file"]:is(:hover, :active, :focus)::file-selector-button {
  --pico-background-color: var(--pico-secondary-hover-background);
  --pico-border-color: var(--pico-secondary-hover-border);
}

[type="file"]:focus::file-selector-button {
  --pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 #0000),
    0 0 0 var(--pico-outline-width) var(--pico-secondary-focus);
}

:where(:scope, [data-theme="light"], [data-theme="dark"]), :host {
  --pico-range-border-color: light-dark(#dfe3eb, #202632);
  --pico-range-active-border-color: light-dark(#bfc7d9, #2a3140);
  --pico-range-thumb-border-color: var(--pico-background-color);
  --pico-range-thumb-color: var(--pico-secondary-background);
  --pico-range-thumb-active-color: var(--pico-primary-background);
}

[type="range"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: none;
  width: 100%;
  height: 1.25rem;
}

[type="range"]::-webkit-slider-runnable-track {
  border-radius: var(--pico-border-radius);
  background-color: var(--pico-range-border-color);
  width: 100%;
  height: .375rem;
  -webkit-transition: background-color var(--pico-transition),
    box-shadow var(--pico-transition);
  transition: background-color var(--pico-transition),
    box-shadow var(--pico-transition);
}

[type="range"]::-moz-range-track {
  border-radius: var(--pico-border-radius);
  background-color: var(--pico-range-border-color);
  width: 100%;
  height: .375rem;
  -moz-transition: background-color var(--pico-transition),
    box-shadow var(--pico-transition);
  transition: background-color var(--pico-transition),
    box-shadow var(--pico-transition);
}

[type="range"]::-ms-track {
  border-radius: var(--pico-border-radius);
  background-color: var(--pico-range-border-color);
  width: 100%;
  height: .375rem;
  -ms-transition: background-color var(--pico-transition),
    box-shadow var(--pico-transition);
  transition: background-color var(--pico-transition),
    box-shadow var(--pico-transition);
}

[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: 2px solid var(--pico-range-thumb-border-color);
  background-color: var(--pico-range-thumb-color);
  cursor: pointer;
  width: 1.25rem;
  height: 1.25rem;
  -webkit-transition: background-color var(--pico-transition),
    transform var(--pico-transition);
  transition: background-color var(--pico-transition),
    transform var(--pico-transition);
  border-radius: 50%;
  margin-top: -.4375rem;
}

[type="range"]::-moz-range-thumb {
  -webkit-appearance: none;
  border: 2px solid var(--pico-range-thumb-border-color);
  background-color: var(--pico-range-thumb-color);
  cursor: pointer;
  width: 1.25rem;
  height: 1.25rem;
  -moz-transition: background-color var(--pico-transition),
    transform var(--pico-transition);
  transition: background-color var(--pico-transition),
    transform var(--pico-transition);
  border-radius: 50%;
  margin-top: -.4375rem;
}

[type="range"]::-ms-thumb {
  -webkit-appearance: none;
  border: 2px solid var(--pico-range-thumb-border-color);
  background-color: var(--pico-range-thumb-color);
  cursor: pointer;
  width: 1.25rem;
  height: 1.25rem;
  -ms-transition: background-color var(--pico-transition),
    transform var(--pico-transition);
  transition: background-color var(--pico-transition),
    transform var(--pico-transition);
  border-radius: 50%;
  margin-top: -.4375rem;
}

[type="range"]:active, [type="range"]:focus-within {
  --pico-range-border-color: var(--pico-range-active-border-color);
  --pico-range-thumb-color: var(--pico-range-thumb-active-color);
}

[type="range"]:active::-webkit-slider-thumb {
  transform: scale(1.25);
}

[type="range"]:active::-moz-range-thumb {
  transform: scale(1.25);
}

[type="range"]:active::-ms-thumb {
  transform: scale(1.25);
}

:where(:scope), :host {
  --pico-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
}

input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="search"] {
  background-image: var(--pico-icon-search);
  background-position: center left calc(var(--pico-form-element-spacing-horizontal) + .125rem);
  background-repeat: no-repeat;
  background-size: 1rem;
  padding-inline-start: calc(var(--pico-form-element-spacing-horizontal) + 1.75rem);
}

input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="search"][aria-invalid] {
  background-position: 1.125rem, right .75rem center;
  padding-inline-start: calc(var(--pico-form-element-spacing-horizontal) + 1.75rem) !important;
}

input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="search"][aria-invalid="false"] {
  background-image: var(--pico-icon-search), var(--pico-icon-valid);
}

input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="search"][aria-invalid="true"] {
  background-image: var(--pico-icon-search), var(--pico-icon-invalid);
}

[dir="rtl"] :where(input):not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="search"] {
  background-position: right 1.125rem center;
}

[dir="rtl"] :where(input):not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="search"][aria-invalid] {
  background-position: right 1.125rem center, .75rem;
}

}
