.stub-component-icon {
  aspect-ratio: 1/1;
  display: inline-block;
  height: 1.5em;
  vertical-align: bottom;
}

.stub-component-icon > .icon {
  fill: none;
  height: 100%;
  stroke: currentColor;
  width: 100%;
}

:where(.stub-component-input-field) {
  width: auto;
}

.stub-component-input-field {
  --i-scale: 1;
  display: inline-grid;
  grid-template-columns: [ error-start icon-start input-start label-start ] auto [ icon-end ] 1fr [ chevron-start ] auto [ error-end input-end label-end chevron-end ];
  grid-template-rows: [ label-start ] auto [ label-end chevron-start icon-start input-start ] 1fr [ chevron-end icon-end input-end error-start ] auto [ error-end ];
}

.stub-component-input-field > .input {
  --i-background-color: var(--x-background-color, var(--theme-lighter));
  --i-border-color: var(--x-border-color, var(--i-background-color));
  --i-color: var(--x-color, var(--theme-black));
  --i-input-offset-left: var(--x-input-offset-left, 0px);
  --i-input-offset-right: var(--x-input-offset-right, 0px);
  --i-opacity: unset;
  --i-placeholder-color: var(--x-placeholder-color, var(--theme-mute-dark));
  -moz-appearance: textfield;
  background-color: var(--i-background-color);
  border: 0.125rem solid var(--i-border-color);
  border-radius: 2rem;
  font-size: calc(1rem * var(--i-scale));
  font-weight: 500;
  grid-area: input;
  opacity: var(--i-opacity);
  padding: calc(1rem * var(--i-scale)) calc(1rem * var(--i-scale) + var(--i-input-offset-right)) calc(1rem * var(--i-scale)) calc(1rem * var(--i-scale) + var(--i-input-offset-left));
  transition-property: background-color, border-color, color, font-size, opacity, outline, padding;
}

.stub-component-input-field > .input::-webkit-outer-spin-button,
.stub-component-input-field > .input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.stub-component-input-field > .input::placeholder {
  color: var(--i-placeholder-color);
  font-size: calc(1rem * var(--i-scale));
  font-weight: 300;
}

.stub-component-input-field > .label {
  --i-color: var(--x-label-color, var(--theme-dark));
  --i-opacity: unset;
  color: var(--i-color);
  font-size: calc(0.875rem * var(--i-scale));
  font-weight: 500;
  grid-area: label;
  opacity: var(--i-opacity);
  padding-bottom: 0.25rem;
  transition-property: color, font-size, opacity;
}

.stub-component-input-field > .error {
  --i-color: var(--x-error-color, var(--theme-danger));
  --i-opacity: unset;
  color: var(--i-color);
  font-size: calc(0.75rem * var(--i-scale));
  font-weight: 300;
  grid-area: error;
  opacity: var(--i-opacity);
  padding-top: 0.25rem;
  transition-property: color, font-size, opacity;
}

.stub-component-input-field > .icon {
  --i-color: var(--x-icon-color, var(--theme-dark));
  --i-opacity: unset;
  align-self: start;
  border-radius: 100vmax;
  color: var(--i-color);
  font-size: calc(1rem * var(--i-scale));
  grid-area: icon;
  margin-left: calc(0.125rem + 1rem * var(--i-scale));
  margin-top: calc(0.125rem + 1rem * var(--i-scale));
  opacity: var(--i-opacity);
  pointer-events: none;
  transition-property: color, margin, opacity;
}

.stub-component-input-field > .chevron {
  --i-color: var(--x-chevron-color, var(--theme-dark));
  --i-opacity: unset;
  align-self: start;
  border-radius: 100vmax;
  color: var(--i-color);
  font-size: calc(1rem * var(--i-scale));
  grid-area: chevron;
  margin-right: calc(0.125rem + 1rem * var(--i-scale));
  margin-top: calc(0.125rem + 1rem * var(--i-scale));
  opacity: var(--i-opacity);
  pointer-events: none;
  transition-property: color, margin, opacity;
}

.stub-component-input-field > .input:focus-visible:not(:disabled) ~ .label,
.stub-component-input-field > .input:focus-visible:not(:disabled) ~ .error,
.stub-component-input-field > .input:focus-visible:not(:disabled) ~ .icon,
.stub-component-input-field > .input:focus-visible:not(:disabled) ~ .chevron {
  z-index: 3300;
}

.stub-component-input-field > .input:disabled,
.stub-component-input-field > .input:disabled ~ .label,
.stub-component-input-field > .input:disabled ~ .error,
.stub-component-input-field > .input:disabled ~ .icon,
.stub-component-input-field > .input:disabled ~ .chevron {
  --i-opacity: 0.75;
  cursor: not-allowed;
}

.stub-component-input-field.\:has-icon > .input {
  --i-input-offset-left: var(--x-input-offset-left, calc(2rem * var(--i-scale)));
}

.stub-component-input-field.\:has-chevron > .input {
  --i-input-offset-right: var(--x-input-offset-right, calc(2rem * var(--i-scale)));
}

.stub-component-input-field.\:size-tiny {
  --i-scale: 0.75;
}

.stub-component-input-field.\:size-small {
  --i-scale: 0.875;
}

.stub-component-input-field.\:size-large {
  --i-scale: 1.125;
}

.stub-component-input-checker {
  --i-scale: 1;
  display: inline-grid;
  grid-template-columns: [ checker-start error-start input-start ] auto [ checker-end label-start ] 1fr [ error-end input-end label-end ];
  grid-template-rows: [ checker-start input-start label-start ] auto [ checker-end input-end label-end error-start ] 1fr [ error-end ];
  width: auto;
}

.stub-component-input-checker > .input {
  appearance: none;
  border: none;
  border-radius: 2rem;
  grid-area: input;
  height: 100%;
  margin: 0;
}

:where(.stub-component-input-checker > .input) {
  z-index: 1;
}

.stub-component-input-checker > .checker {
  --i-background-color: var(--x-checker-background-color, var(--theme-lighter));
  --i-border-color: var(--x-checker-border-color, var(--i-background-color));
  --i-opacity: unset;
  background-color: var(--i-background-color);
  border: 0.125rem solid var(--i-border-color);
  border-radius: 0.5rem;
  grid-area: checker;
  opacity: var(--i-opacity);
  padding: 0.125rem;
  transition-property: background-color, border-color, opacity;
}

.stub-component-input-checker > .checker > .marker {
  --i-background-color: transparent;
  background-color: var(--i-background-color);
  border-radius: 0.25rem;
  height: calc(1.5rem * var(--i-scale));
  opacity: var(--i-opacity);
  transition-property: background-color, height, margin-left, width;
  width: calc(1.5rem * var(--i-scale));
}

.stub-component-input-checker > .label {
  --i-color: var(--x-label-color, var(--theme-dark));
  --i-opacity: unset;
  color: var(--i-color);
  font-size: calc(0.875rem * var(--i-scale));
  font-weight: 500;
  grid-area: label;
  margin-left: 0.25rem;
  margin-top: calc(0.34375rem * var(--i-scale));
  opacity: var(--i-opacity);
  transition-property: color, font-size, opacity;
}

.stub-component-input-checker > .error {
  --i-color: var(--x-error-color, var(--theme-danger));
  --i-opacity: unset;
  color: var(--i-color);
  font-size: calc(0.75rem * var(--i-scale));
  font-weight: 300;
  grid-area: error;
  opacity: var(--i-opacity);
  padding-top: 0.25rem;
  transition-property: color, font-size, opacity;
}

.stub-component-input-checker > .input:checked ~ .checker {
  --i-border-color: var(--x-checker-checked-border-color, var(--theme-primary));
}

.stub-component-input-checker > .input:checked ~ .checker > .marker {
  --i-background-color: var(--x-marker-checked-background-color, var(--theme-primary));
}

.stub-component-input-checker > .input:checked ~ .label {
  --i-color: var(--x-label-checked-color, var(--theme-primary));
}

.stub-component-input-checker > .input:disabled ~ .checker,
.stub-component-input-checker > .input:disabled ~ .label,
.stub-component-input-checker > .input:disabled ~ .error {
  --i-opacity: 0.75;
  cursor: not-allowed;
}

.stub-component-input-checker.\:size-tiny {
  --i-scale: 0.75;
}

.stub-component-input-checker.\:size-small {
  --i-scale: 0.875;
}

.stub-component-input-checker.\:size-large {
  --i-scale: 1.125;
}

.stub-component-modal {
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  width: 100%;
  z-index: var(--i-z-index);
}

.stub-component-modal > .wrapper {
  background-color: var(--theme-shade);
  height: 100%;
  overflow: hidden auto;
  pointer-events: auto;
  scrollbar-width: none;
  width: 100%;
}

.stub-component-modal > .wrapper::-webkit-scrollbar {
  display: none;
}

.stub-component-modal > .wrapper > .backdrop {
  display: grid;
  min-height: 100%;
  padding: 1.5rem 1rem;
  place-items: center;
  width: 100%;
}

.stub-component-modal > .wrapper > .backdrop > .card {
  background-color: var(--theme-white);
  border-radius: 2rem;
  display: grid;
  gap: 0.5rem;
  grid-template-columns: [ body-start foot-start head-start spinner-start ] 1fr [ body-end foot-end head-end spinner-end ];
  grid-template-rows: [ head-start spinner-start ] auto [ head-end body-start ] 1fr [ body-end foot-start ] auto [ spinner-end foot-end ];
  max-width: 27.5rem;
  overflow: hidden;
  width: 100%;
}

.stub-component-modal > .wrapper > .backdrop > .card > .head {
  align-items: center;
  display: grid;
  gap: 0.5rem;
  grid-template-columns: [ label-start ] 1fr [ label-end clear-start ] auto [ clear-end ];
  grid-template-rows: [ clear-start label-start ] 1fr [ clear-end label-end ];
  grid-area: head;
  padding: 1rem;
}

.stub-component-modal > .wrapper > .backdrop > .card > .head > .label {
  color: var(--theme-dark);
  font-size: 0.875rem;
  font-weight: 500;
  grid-area: label;
}

.stub-component-modal > .wrapper > .backdrop > .card > .head > .clear {
  --t-end-height: var(--i-width);
  --t-end-width: var(--i-width);
  grid-area: clear;
}

.stub-component-modal > .wrapper > .backdrop > .card > .body {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  grid-area: body;
  overflow: hidden;
  padding: 0.25rem 1rem;
}

.stub-component-modal > .wrapper > .backdrop > .card > .foot {
  display: flex;
  gap: 0.5rem;
  grid-area: foot;
  justify-content: end;
  margin: 0 1rem 1rem 1rem;
}

.stub-component-modal > .wrapper > .backdrop > .card > .foot > .okay {
  --x-background-color: var(--theme-primary);
  --x-color: var(--theme-primary-complement);
}

.stub-component-modal > .wrapper > .backdrop > .card > .spinner {
  grid-area: spinner;
  z-index: 9999;
}

.stub-component-modal.stub-component-modal-date > .wrapper > .backdrop > .card > .head {
  background-color: var(--theme-primary);
  grid-template-columns: [ display-start label-start ] 1fr [ display-end label-end clear-start ] auto [ clear-end ];
  grid-template-rows: [ clear-start label-start ] auto [ label-end display-start ] 1fr [ display-end clear-end ];
}

.stub-component-modal.stub-component-modal-date > .wrapper > .backdrop > .card > .head > .label {
  color: var(--theme-primary-complement);
}

.stub-component-modal.stub-component-modal-date > .wrapper > .backdrop > .card > .head > .clear {
  --x-background-color: var(--theme-primary-complement);
  --x-color: var(--theme-primary);
}

.stub-component-modal.stub-component-modal-date > .wrapper > .backdrop > .card > .head > .display {
  color: var(--theme-primary-complement);
  font-size: 1.125rem;
  font-weight: 500;
  grid-area: display;
}

.stub-component-modal.stub-component-modal-date > .wrapper > .backdrop > .card > .body > .controls-wrapper {
  align-items: center;
  display: grid;
  gap: 0.375rem;
  grid-template-columns: [ cursor-start ] 1fr [ cursor-end previous-start ] auto [ previous-end next-start ] auto [ next-end ];
  grid-template-rows: [ cursor-start next-start previous-start ] 1fr [ cursor-end next-end previous-end ];
}

.stub-component-modal.stub-component-modal-date > .wrapper > .backdrop > .card > .body > .controls-wrapper > .cursor {
  color: var(--theme-dark);
  font-size: 0.875rem;
  grid-area: cursor;
}

.stub-component-modal.stub-component-modal-date > .wrapper > .backdrop > .card > .body > .controls-wrapper > .previous {
  grid-area: previous;
}

.stub-component-modal.stub-component-modal-date > .wrapper > .backdrop > .card > .body > .controls-wrapper > .next {
  grid-area: next;
}

.stub-component-modal.stub-component-modal-date > .wrapper > .backdrop > .card > .body > .calendar-wrapper {
  display: grid;
  gap: 0.25rem;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: repeat(7, 1fr);
}

.stub-component-modal.stub-component-modal-date > .wrapper > .backdrop > .card > .body > .calendar-wrapper > .week-day {
  color: var(--theme-dark);
  display: grid;
  font-size: 0.875rem;
  font-weight: 500;
  place-items: center;
}

.stub-component-modal.stub-component-modal-date > .wrapper > .backdrop > .card > .body > .calendar-wrapper > .day {
  --i-text-decoration: unset;
  --x-background-color: transparent;
  grid-column: var(--i-alignment-x);
  grid-row: var(--i-alignment-y);
  text-decoration: var(--i-text-decoration);
}

.stub-component-modal.stub-component-modal-date > .wrapper > .backdrop > .card > .body > .calendar-wrapper > .day.\:is-outbound {
  --x-color: var(--theme-mute-dark);
}

.stub-component-modal.stub-component-modal-date > .wrapper > .backdrop > .card > .body > .calendar-wrapper > .day.\:is-today {
  --x-border-color: var(--theme-primary);
  --x-color: var(--theme-primary);
}

.stub-component-modal.stub-component-modal-date > .wrapper > .backdrop > .card > .body > .calendar-wrapper > .day.\:is-selected {
  --x-background-color: var(--theme-primary);
  --x-border-color: var(--theme-primary);
  --x-color: var(--theme-primary-complement);
}

.stub-component-modal.stub-component-modal-date > .wrapper > .backdrop > .card > .body > .calendar-wrapper > .day.\:is-picked {
  --i-text-decoration: dotted underline;
}

.stub-component-modal.stub-component-modal-option > .wrapper > .backdrop {
  height: 100%;
}

.stub-component-modal.stub-component-modal-option > .wrapper > .backdrop > .card {
  max-height: min(100%, 42.5rem);
}

.stub-component-modal.stub-component-modal-option > .wrapper > .backdrop > .card > .body > .actions-wrapper {
  display: grid;
  gap: 0.375rem;
}

.stub-component-modal.stub-component-modal-option > .wrapper > .backdrop > .card > .body > .options-wrapper {
  border-radius: 2rem;
  height: 100%;
  min-height: 12.5rem;
  overflow: hidden auto;
  scrollbar-width: none;
  width: 100%;
}

.stub-component-modal.stub-component-modal-option > .wrapper > .backdrop > .card > .body > .options-wrapper::-webkit-scrollbar {
  display: none;
}

:where(.stub-component-modal.stub-component-modal-option > .wrapper > .backdrop > .card > .body > .options-wrapper > .option) {
  display: block;
}

.stub-component-modal.stub-component-modal-option > .wrapper > .backdrop > .card > .body > .options-wrapper > .option {
  --i-text-decoration: none;
  --x-background-color: var(--theme-white);
  border-bottom: none;
  border-left: none;
  border-right: none;
  border-radius: 0;
  padding-left: calc(0.5rem * var(--i-scale));
  padding-right: calc(0.5rem * var(--i-scale));
  text-align: start;
  text-decoration: var(--i-text-decoration);
  width: 100%;
}

.stub-component-modal.stub-component-modal-option > .wrapper > .backdrop > .card > .body > .options-wrapper > .option .\:match {
  font-weight: bold;
}

.stub-component-modal.stub-component-modal-option > .wrapper > .backdrop > .card > .body > .options-wrapper > .option:not(:first-of-type) {
  --x-border-color: var(--theme-light);
}

.stub-component-modal.stub-component-modal-option > .wrapper > .backdrop > .card > .body > .options-wrapper > .option.\:selected {
  --x-background-color: var(--theme-primary-lighter);
  --x-color: var(--theme-primary-dark);
}

.stub-component-modal.stub-component-modal-option > .wrapper > .backdrop > .card > .body > .options-wrapper > .option.\:picked {
  --i-text-decoration: underline dotted;
}

.stub-component-modal.stub-component-modal-option > .wrapper > .backdrop > .card > .body > .options-wrapper > .pull-chord {
  --x-background-color: var(--theme-white);
  z-index: 1;
}

.stub-component-modal.stub-component-modal-remover > .wrapper > .backdrop > .card > .body > .message {
  color: var(--theme-danger);
  font-weight: 500;
  text-align: center;
}

.stub-component-modal.stub-component-modal-remover > .wrapper > .backdrop > .card > .body > .context {
  color: var(--theme-dark);
  font-size: 0.875rem;
  margin-bottom: 1.5rem;
  text-align: center;
}

.stub-component-modal.stub-component-modal-remover > .wrapper > .backdrop > .card > .foot > .okay {
  --x-background-color: var(--theme-danger);
  --x-color: var(--theme-danger-complement);
}

.stub-component-modal.stub-component-modal-editor > .wrapper > .backdrop > .card > .foot > .okay {
  --x-background-color: var(--theme-info);
  --x-color: var(--theme-info-complement);
}

.stub-component-modal.stub-component-modal-prompt > .wrapper > .backdrop > .card > .body > .message {
  color: var(--theme-primary);
  font-weight: 500;
  text-align: center;
}

.stub-component-modal.stub-component-modal-prompt > .wrapper > .backdrop > .card > .body > .context {
  color: var(--theme-dark);
  font-size: 0.875rem;
  margin-bottom: 1.5rem;
  text-align: center;
}