@layer components {
  .ui-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-inline-xs);
    border-radius: var(--radius-md);
    color: hsl(var(--foreground));
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    transition:
      background-color 150ms ease,
      border-color 150ms ease,
      color 150ms ease,
      box-shadow 150ms ease;
  }

  .ui-toggle-default {
    border: 1px solid transparent;
  }

  .ui-toggle-outline {
    border: 1px solid hsl(var(--border));
    background: hsl(var(--background));
  }

  .ui-toggle-soft {
    border: 1px solid transparent;
    background: var(--toggle-soft-background, hsl(var(--secondary)));
    color: var(--toggle-soft-color, hsl(var(--secondary-foreground)));
  }

  .ui-toggle-default-size {
    min-height: var(--control-height);
    padding-inline: var(--space-3);
  }

  .ui-toggle-xs {
    min-height: var(--control-height-xs);
    padding-inline: var(--space-1);
    font-size: var(--toggle-xs-font-size);
  }

  .ui-toggle-sm {
    min-height: var(--control-height-sm);
    padding-inline: var(--space-2);
    font-size: var(--toggle-sm-font-size);
  }

  .ui-toggle-lg {
    min-height: var(--control-height-lg);
    padding-inline: var(--space-4);
  }

  .ui-toggle:hover {
    background: hsl(var(--accent));
    color: hsl(var(--accent-foreground));
  }

  .ui-toggle-soft:hover {
    background: var(--toggle-soft-hover-background, hsl(var(--secondary-hover)));
    color: var(--toggle-soft-color, hsl(var(--secondary-foreground)));
  }

  .ui-toggle[data-state="on"] {
    background: var(--toggle-on-background, hsl(var(--primary)));
    color: hsl(var(--primary-foreground));
  }

  .ui-toggle:disabled,
  .ui-toggle[data-disabled] {
    cursor: not-allowed;
    opacity: var(--disabled-opacity);
  }

  .ui-toggle-group {
    display: inline-flex;
    align-items: center;

    gap: var(--space-1);
  }

  .ui-toggle-group[data-wrap="true"] {
    flex-wrap: wrap;
  }

  .ui-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    gap: var(--control-gap);
    white-space: nowrap;
    font-weight: var(--font-weight-medium);
    transition-property: color, background-color, border-color, box-shadow;
    transition-duration: 150ms;
  }

  .ui-button {
    flex-shrink: 0;
    font-size: var(--font-size-sm, var(--font-size-base));
    outline: none;
  }

  .ui-button:disabled,
  .ui-button[data-loading] {
    pointer-events: none;
  }

  .ui-button:disabled {
    opacity: var(--disabled-opacity);
  }

  .ui-button[data-fill] {
    flex: 1 1 auto;
    min-inline-size: 0;
  }

  .ui-button svg {
    width: var(--control-icon-size);
    height: var(--control-icon-size);
    flex-shrink: 0;
  }

  .ui-button--default {
    background: hsl(var(--primary));
    color: hsl(var(--primary-foreground));

    box-shadow: var(--shadow-sm), var(--shadow-glow);
  }

  .ui-button--default:hover {
    background: hsl(var(--primary-hover, from hsl(var(--primary)) var(--primary-hover-channels)));
  }

  .ui-button--destructive {
    background: hsl(var(--destructive));
    color: hsl(var(--destructive-foreground));
    box-shadow: var(--shadow-sm);
  }

  .ui-button--destructive:hover {
    background: hsl(var(--destructive-hover));
  }

  .ui-button--destructive:active {
    background: hsl(var(--destructive-active));
  }

  .ui-button--outline {
    border: 1px solid hsl(var(--input));
    background: hsl(var(--background));
    color: hsl(var(--foreground));

    box-shadow: var(--shadow-sm);
  }

  .ui-button--ghost {
    color: hsl(var(--foreground));
  }

  .ui-button--outline:hover,
  .ui-button--ghost:hover {
    background: hsl(var(--accent));
    color: hsl(var(--accent-foreground));
  }

  .ui-button--secondary {
    background: hsl(var(--secondary));
    color: hsl(var(--secondary-foreground));
  }

  .ui-button--secondary:hover {
    background: hsl(var(--secondary) / 0.8);
  }

  .ui-button--link {
    color: hsl(var(--primary));
    text-underline-offset: 4px;
  }

  .ui-button--link:hover {
    text-decoration-line: underline;
  }

  .ui-button.ui-button--bare {
    position: relative;
    height: auto;
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
  }

  .ui-button.ui-button--bare::after {
    content: "";
    position: absolute;
    inset: 0;
    min-inline-size: var(--button-bare-target-size, var(--control-height-xs));
    min-block-size: var(--button-bare-target-size, var(--control-height-xs));
    margin: auto;
  }

  .ui-button--default-size {
    height: var(--control-height);
    padding-inline: var(--control-padding-x);
    font-size: var(--font-size-base);
  }

  .ui-button--sm {
    height: var(--control-height-sm);
    padding-inline: var(--space-3);
    font-size: var(--button-sm-font-size);
  }

  .ui-button--sm svg {
    width: var(--control-icon-size-sm);
    height: var(--control-icon-size-sm);
  }

  .ui-button:is(
      .ui-button--default,
      .ui-button--destructive,
      .ui-button--outline,
      .ui-button--dashed,
      .ui-button--secondary
    )
    [data-slot="badge"] {
    --badge-space-y: 0;
    --badge-line-height: var(--line-height-tight);
    --badge-radius: var(--radius-sm);
  }

  .ui-button--lg {
    height: var(--control-height-lg);
    padding-inline: var(--space-8);
    font-size: var(--font-size-base);
  }

  .ui-button--icon {
    width: var(--control-height);
    height: var(--control-height);
    padding: 0;
  }

  .ui-button--icon-xs {
    width: var(--control-height-xs);
    height: var(--control-height-xs);
    padding: 0;
  }

  @media (pointer: coarse) {
    .ui-button--icon-xs {
      width: var(--control-height-default);
      height: var(--control-height-default);
    }
  }

  .ui-button--icon-sm {
    width: var(--control-height-sm);
    height: var(--control-height-sm);
    padding: 0;
  }

  .ui-button--icon-lg {
    width: var(--control-height-lg);
    height: var(--control-height-lg);
    padding: 0;
  }

  .ui-control {
    height: var(--control-height);
    padding-inline-start: var(--control-padding-x);
    padding-inline-end: var(--control-padding-x);
    font-size: var(--control-font-size);
    border-width: var(--control-border-width);
    border-style: solid;
    box-shadow: var(--control-shadow);
  }

  .ui-control-multiline {
    min-height: calc(var(--control-height) * 2.75);
    padding-block: var(--control-multiline-padding-block);
    padding-inline: var(--control-padding-x);
    font-size: var(--control-font-size);
    border-width: var(--control-border-width);
    border-style: solid;
    box-shadow: var(--control-shadow);
  }

  .ui-control:disabled,
  .ui-control[data-disabled],
  .ui-control-multiline:disabled {
    cursor: not-allowed;
    opacity: var(--disabled-opacity);
  }

  .ui-textarea-autogrow {
    position: relative;
    display: grid;

    grid-template-columns: minmax(0, 1fr);
    inline-size: 100%;
  }

  .ui-textarea-autogrow > .ui-control-multiline,
  .ui-textarea-autogrow::after {
    grid-area: 1 / 1 / 2 / 2;
  }

  .ui-textarea-autogrow::after {
    content: attr(data-autogrow-value) " ";
    visibility: hidden;

    box-sizing: border-box;
    margin: 0;

    white-space: pre-wrap;
    overflow-wrap: break-word;
    font-size: var(--control-font-size);
    line-height: var(--textarea-autogrow-line-height, var(--line-height-normal));
    padding-block-start: var(
      --textarea-padding-block-start,
      var(--control-multiline-padding-block)
    );
    padding-block-end: var(--textarea-padding-block-end, var(--control-multiline-padding-block));
    padding-inline-start: var(--textarea-padding-inline-start, var(--control-padding-x));
    padding-inline-end: var(--textarea-padding-inline-end, var(--control-padding-x));
    border: var(--control-border-width) solid transparent;

    min-block-size: max(
      var(--control-height),
      calc(
        var(--textarea-autogrow-min-height-rows) *
          var(--textarea-autogrow-line-height, var(--line-height-normal)) *
          var(--control-font-size) + var(--textarea-autogrow-box-inset)
      )
    );
    max-block-size: calc(
      var(--textarea-autogrow-max-height-rows) *
        var(--textarea-autogrow-line-height, var(--line-height-normal)) * var(--control-font-size) +
        var(--textarea-autogrow-box-inset)
    );
  }

  .ui-textarea-autogrow--ghost {
    --textarea-autogrow-box-inset: calc(var(--control-multiline-padding-block) * 2);
  }

  .ui-textarea-autogrow--ghost::after {
    border-width: 0;
  }

  .ui-textarea-autogrow > .ui-control-multiline {

    min-block-size: 0;

    resize: none;
    overflow-y: auto;
    line-height: var(--textarea-autogrow-line-height, var(--line-height-normal));
  }

  .ui-table-row {
    height: var(--table-row-height);
  }

  .ui-table-head {
    height: var(--table-row-height);
  }

  .ui-choice-group {
    display: grid;
    gap: var(--space-stack-sm);
  }

  .ui-choice-group[data-orientation="horizontal"] {
    display: flex;
    flex-wrap: wrap;

    align-items: center;
    min-height: var(--control-height);
    column-gap: var(--choice-group-gap-x);
    row-gap: var(--choice-group-gap-y);
  }

  .ui-choice-field {
    display: flex;
    align-items: flex-start;
    gap: var(--choice-gap);
  }

  .ui-choice-control {
    flex-shrink: 0;
    line-height: 0;
  }

  .ui-choice-field > .ui-choice-control {
    display: flex;
    align-items: center;
    font-size: var(--font-size-base);
    line-height: var(--control-label-line-height);
    min-block-size: 1lh;
  }

  .ui-choice-input {
    position: absolute;
    inset: 0;
    display: block;
  }

  .ui-choice-input > input {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    margin: 0;
    cursor: inherit;
    opacity: 0;
  }

  .ui-choice-content {
    display: grid;
    gap: var(--choice-description-gap);
    line-height: var(--line-height-tight);
  }

  .ui-choice-label {
    cursor: pointer;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
  }

  .ui-choice-label-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--control-label-space-gap);
  }

  .ui-choice-description {
    color: hsl(var(--muted-foreground));
    font-size: var(--choice-description-font-size);
  }

  .ui-choice-error {
    color: hsl(var(--text-error));
    font-size: var(--choice-description-font-size);
  }

  .ui-label {
    display: flex;
    align-items: center;
    gap: var(--control-label-space-gap);
    font-size: var(--control-label-font-size);
    user-select: none;
  }

  .ui-checkbox,
  .ui-radio {

    position: relative;
    width: var(--checkbox-size);
    height: var(--checkbox-size);
    flex-shrink: 0;
    border: var(--checkbox-border-width) solid hsl(var(--primary));
    color: hsl(var(--primary));
    background: transparent;
  }

  .ui-checkbox {
    border-radius: calc(var(--control-radius) - 2px);
  }

  .ui-radio {
    border-radius: var(--radius-pill);
  }

  .ui-checkbox:disabled,
  .ui-radio:disabled,
  .ui-slider-thumb[data-disabled],
  .ui-switch:disabled,
  .ui-checkbox[data-disabled],
  .ui-radio[data-disabled],
  .ui-switch[data-disabled] {
    cursor: not-allowed;
    opacity: var(--disabled-opacity);
  }

  .ui-checkbox[data-state="checked"] {
    background: var(--checkbox-checked-background, hsl(var(--primary)));
    color: hsl(var(--primary-foreground));
  }

  .ui-choice-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    color: currentColor;
  }

  .ui-checkbox-icon {
    width: calc(var(--checkbox-size) * 0.75);
    height: calc(var(--checkbox-size) * 0.75);
  }

  .ui-radio-icon {
    width: calc(var(--checkbox-size) * 0.45);
    height: calc(var(--checkbox-size) * 0.45);
    fill: currentColor;
  }

  .ui-radio[data-state="unchecked"] .ui-radio-icon {
    visibility: hidden;
  }

  .ui-switch:has(input[aria-invalid="true"]) {
    --tw-ring-shadow: 0 0 0 var(--focus-ring-width) hsl(var(--destructive));
    box-shadow: 0 0 0 var(--focus-ring-width) hsl(var(--destructive));
  }

  .ui-tag-input[aria-invalid="true"],
  .ui-tag-input:has([aria-invalid="true"]) {
    border-color: hsl(var(--destructive));
  }

  .ui-switch {

    position: relative;
    display: inline-flex;
    width: var(--switch-width);
    height: var(--switch-height);
    flex-shrink: 0;
    cursor: pointer;
    align-items: center;
    border: 2px solid transparent;
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-sm);
    transition-property: color, background-color, border-color, box-shadow;
    transition-duration: 150ms;
  }

  .ui-switch > .ui-choice-input {
    inset-block-start: 50%;
    inset-block-end: auto;
    block-size: max(100%, var(--touch-target-min));
    translate: 0 -50%;
  }

  .ui-switch[data-state="checked"] {
    background: var(--switch-checked-background, hsl(var(--primary)));
  }

  .ui-switch[data-state="unchecked"] {
    background: var(--switch-unchecked-background, hsl(var(--input)));
  }

  .ui-switch-thumb {
    pointer-events: none;
    display: block;
    width: var(--switch-thumb-size);
    height: var(--switch-thumb-size);
    border-radius: var(--radius-pill);
    background: hsl(var(--background));
    box-shadow: var(--shadow-lg);
    transition: transform 150ms;
  }

  .ui-switch-thumb[data-state="checked"] {
    transform: translateX(var(--switch-thumb-translate));
  }

  .ui-slider {
    position: relative;
    display: flex;
    inline-size: 100%;
    touch-action: none;
    user-select: none;
    align-items: center;
  }

  .ui-slider[data-orientation="vertical"] {

    inline-size: fit-content;
    block-size: 100%;
    min-block-size: var(--slider-vertical-min-block-size);
    flex-direction: column;
  }

  .ui-slider-control {
    position: relative;
    display: flex;
    flex-grow: 1;
    align-self: stretch;
    align-items: center;
    block-size: var(--slider-thumb-size);
  }

  .ui-slider[data-orientation="vertical"] .ui-slider-control {
    flex-direction: column;
    align-self: center;
    inline-size: var(--slider-thumb-size);
    block-size: auto;
  }

  .ui-slider-track {
    position: relative;
    flex-grow: 1;
    align-self: center;
    block-size: var(--slider-track-height);
    border-radius: var(--radius-pill);
    background: var(--slider-track-background, hsl(var(--primary) / 0.2));
  }

  .ui-slider[data-orientation="vertical"] .ui-slider-track {
    inline-size: var(--slider-track-height);
    block-size: auto;
  }

  .ui-slider-range {
    position: absolute;
    inset-block: 0;
    inset-inline-start: var(--slider-range-start, 0%);
    inline-size: var(--slider-range-size, 0%);
    border-radius: inherit;
    background: var(--slider-range-background, hsl(var(--primary)));
  }

  .ui-slider[data-orientation="vertical"] .ui-slider-range {
    inset-block-start: auto;
    inset-block-end: var(--slider-range-start, 0%);
    inset-inline: 0;
    inline-size: auto;
    block-size: var(--slider-range-size, 0%);
  }

  .ui-slider-range[data-draggable="true"] {
    cursor: grab;
  }

  .ui-slider-thumb {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: var(--slider-thumb-offset, 0%);
    display: block;
    inline-size: var(--slider-thumb-size);
    block-size: var(--slider-thumb-size);
    margin-block-start: calc(var(--slider-thumb-size) / -2);
    margin-inline-start: calc(var(--slider-thumb-size) / -2);
    border: 1px solid hsl(var(--primary) / 0.5);
    border-radius: var(--radius-pill);
    background: hsl(var(--background));
    box-shadow: var(--shadow-sm);
    transition:
      color 150ms,
      background-color 150ms,
      border-color 150ms,
      box-shadow 150ms;
  }

  .ui-slider[data-orientation="vertical"] .ui-slider-thumb {
    inset-block-start: auto;
    inset-block-end: var(--slider-thumb-offset, 0%);
    inset-inline-start: 50%;
    margin-block-start: 0;
    margin-block-end: calc(var(--slider-thumb-size) / -2);
  }

  .ui-color-picker {
    display: flex;
    align-items: center;
    gap: var(--control-gap);
  }

  .ui-color-picker-swatch {
    position: relative;
    flex-shrink: 0;
  }

  .ui-color-picker-preview {
    width: 100%;
    height: 100%;
    border: 1px solid hsl(var(--input));
    border-radius: var(--control-radius);
    box-shadow: var(--shadow-sm);
  }

  .ui-color-picker-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    opacity: 0;
  }

  .ui-color-picker-input:disabled {
    cursor: not-allowed;
  }

  .ui-color-picker-hex {
    max-width: var(--color-picker-input-width);
    font-family: var(--font-family-mono);
    font-size: var(--color-picker-hex-font-size);
    text-transform: uppercase;
  }

  .ui-query-refetch-icon[data-fetching="true"] {
    animation: spin 1s linear infinite;
  }

  .ui-command {
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
    overflow: clip;
    overflow-clip-margin: var(--focus-ring-clip-margin);
    border-radius: var(--control-radius);
    background: hsl(var(--popover));
    color: hsl(var(--popover-foreground));
  }

  .ui-command-input-wrapper {
    display: flex;
    align-items: center;
    border-bottom: 1px solid hsl(var(--border));
    padding-inline: var(--command-input-padding-x);
  }

  .ui-search-input-icon,
  .ui-search-input-clear svg {
    width: var(--control-icon-size);
    height: var(--control-icon-size);
    flex-shrink: 0;
  }

  .ui-command-search-icon {
    margin-inline-end: var(--control-gap);
    opacity: 0.5;
  }

  .ui-command-input {
    width: 100%;
    flex: 1;
    height: var(--control-height);
    border: 0;
    background: transparent;
    padding-inline: 0;
    box-shadow: none;
    outline: none;
    color: hsl(var(--foreground));
    font-size: var(--font-size-base);
  }

  .ui-command-input::placeholder {
    color: hsl(var(--muted-foreground));
  }

  .ui-command-input:focus-visible {
  }

  .ui-command-list {
    max-height: var(--command-list-max-height);
    overflow-x: hidden;
    overflow-y: auto;
  }

  .ui-command-empty {
    padding-block: var(--space-6);
    text-align: center;
    font-size: var(--font-size-base);
  }

  .ui-command-group {
    overflow: hidden;
    padding: var(--command-group-padding);
    color: hsl(var(--foreground));
  }

  .ui-command-group [cmdk-group-heading] {
    padding: var(--space-2);
    color: hsl(var(--muted-foreground));
    font-size: var(--command-group-heading-font-size);
    font-weight: var(--font-weight-medium);
  }

  .ui-command-item {
    position: relative;
    display: flex;
    cursor: default;
    user-select: none;
    align-items: center;
    gap: var(--command-item-gap);
    border-radius: calc(var(--control-radius) - 2px);
    padding: var(--command-item-padding-y) var(--command-item-padding-x);
    font-size: var(--font-size-base);
    outline: none;
  }

  .ui-command-item[aria-selected="true"] {
    background: hsl(var(--accent));
    color: hsl(var(--accent-foreground));
  }

  .ui-command-item[data-disabled="true"] {
    pointer-events: none;
    opacity: 0.5;
  }

  .ui-command[data-split] .ui-command-group {
    padding: var(--command-list-split-padding);
  }

  .ui-command[data-split] .ui-command-item {
    border-radius: 0;
    margin-inline: calc(-1 * var(--command-list-split-inset));
    padding-inline: calc(var(--command-list-split-inset) + var(--command-input-padding-x));
  }

  .ui-command[data-split] .ui-command-group [cmdk-group-heading] {
    padding-inline: calc(var(--command-list-split-inset) + var(--command-input-padding-x));
  }

  .ui-command[data-split] .ui-command-item:has(+ .ui-command-item) {
    border-block-end: var(--command-item-divider-width) solid
      hsl(var(--command-item-divider-color, var(--border)));
  }

  .ui-command[data-split] .ui-command-group:not([hidden]) ~ .ui-command-group:not([hidden]) {
    border-block-start: var(--command-item-divider-width) solid
      hsl(var(--command-item-divider-color, var(--border)));
  }

  [data-slot="dialog-content"].ui-command-palette {
    top: var(--command-palette-inset-top);
    width: min(
      var(--command-palette-width),
      calc(100vw - (2 * var(--command-palette-viewport-inset)))
    );
    max-width: none;
    transform: translateX(-50%);
    gap: 0;
    padding: 0;
    background: hsl(var(--popover));
  }

  .ui-command-palette-trigger {
    min-width: 0;
  }

  .ui-command-palette-label {
    min-width: 0;
  }

  .ui-command-palette-meta {
    margin-inline-start: auto;
    color: hsl(var(--muted-foreground));
    font-size: var(--font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)));
  }

  .ui-command-palette-state {
    padding-block: var(--space-6);
    padding-inline: var(--space-4);
    text-align: center;
    color: hsl(var(--muted-foreground));
    font-size: var(--font-size-base);
  }

  .ui-command-palette-hints {
    display: flex;
    flex-wrap: wrap;
    gap: var(--command-palette-hint-gap);
    border-top: 1px solid hsl(var(--border));
    padding: var(--command-palette-hint-padding-y) var(--command-palette-hint-padding-x);
    color: hsl(var(--muted-foreground));
    font-family: var(--font-mono);
    font-size: var(--font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)));
  }

  .ui-search-input {
    position: relative;
  }

  .ui-search-input-label {
    display: block;
    margin-bottom: var(--space-1);
    color: hsl(var(--muted-foreground));
    font-size: var(--search-input-label-font-size);
  }

  .ui-search-input-field {
    position: relative;
    display: grid;
    align-items: center;
  }

  .ui-search-input-icon {
    position: absolute;
    inset-inline-start: var(--search-input-edge-inset);
    top: 50%;
    pointer-events: none;
    transform: translateY(-50%);
    color: hsl(var(--muted-foreground));
  }

  .ui-search-input-control {
    padding-inline-start: var(--search-input-start-padding);
    padding-inline-end: var(--search-input-end-padding);
  }

  .ui-search-input-clear {
    position: absolute;
    display: grid;
    min-inline-size: var(--touch-target-min);
    min-block-size: var(--touch-target-min);
    inset-inline-end: var(--search-input-edge-inset);
    top: 50%;
    place-items: center;
    color: hsl(var(--muted-foreground));
    transform: translateY(-50%);
  }

  .ui-search-input-clear:hover {
    color: hsl(var(--foreground));
  }

  @keyframes spin {
    to {
      transform: rotate(360deg);
    }
  }
}

@layer components {
  .ui-password-input {
    position: relative;
    display: block;
  }
  .ui-password-input-field {
    padding-inline-end: 2.5rem;
  }
  .ui-password-input-toggle {
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    color: hsl(var(--muted-foreground));
    background: transparent;
    border: 0;
    cursor: pointer;
  }
  .ui-password-input-toggle:hover {
    color: hsl(var(--foreground));
  }
  .ui-password-input-toggle svg {
    width: 1rem;
    height: 1rem;
  }

  .ui-otp-container {
    display: flex;
    align-items: center;
    justify-content: var(--otp-container-align, flex-start);
    gap: var(--space-2);
  }

  .ui-otp-container:has(.ui-otp-input[data-align="center"]) {
    justify-content: center;
  }
  .ui-otp-container:has(.ui-otp-input[data-align="end"]) {
    justify-content: flex-end;
  }
  .ui-otp-input:disabled {
    cursor: not-allowed;
  }

  .ui-otp-container:has(.ui-otp-input[data-size="xs"]) {
    --control-height: var(--control-height-xs);
  }
  .ui-otp-container:has(.ui-otp-input[data-size="sm"]) {
    --control-height: var(--control-height-sm);
  }
  .ui-otp-container:has(.ui-otp-input[data-size="lg"]) {
    --control-height: var(--control-height-lg);
  }

  .ui-otp-container:has(.ui-otp-input[data-variant="filled"]) .ui-otp-slot,
  .ui-otp-container:has(.ui-otp-input[data-variant="filled"])
    .ui-otp-group[data-appearance="grouped"] {
    border-color: var(--control-filled-border-color);
    background: var(--control-filled-background);
  }
  .ui-otp-container:has(.ui-otp-input[data-variant="borderless"]) .ui-otp-slot,
  .ui-otp-container:has(.ui-otp-input[data-variant="borderless"])
    .ui-otp-group[data-appearance="grouped"] {
    border-color: var(--control-borderless-border-color);
    background: var(--control-borderless-background);
  }

  .ui-otp-container:has(.ui-otp-input[data-status="warning"]) {
    --focus-ring-color: var(--warning);
  }
  .ui-otp-container:has(.ui-otp-input[data-status="warning"]) .ui-otp-slot,
  .ui-otp-container:has(.ui-otp-input[data-status="warning"])
    .ui-otp-group[data-appearance="grouped"] {
    border-color: var(--control-status-warning-border-color, hsl(var(--text-warning)));
  }

  .ui-otp-container:has(.ui-otp-input[readonly]) .ui-otp-slot {
    cursor: default;
  }
  .ui-otp-group {
    display: flex;
    align-items: center;
  }
  .ui-otp-slot {
    position: relative;
    display: flex;
    width: var(--otp-slot-inline-size, var(--otp-slot-size, var(--control-height)));
    height: var(--otp-slot-block-size, var(--otp-slot-size, var(--control-height)));
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-base);
    border: var(--control-border-width) solid hsl(var(--border));
    border-inline-start-width: 0;
    background: hsl(var(--background));
    transition: box-shadow 0.15s ease;
  }
  .ui-otp-group .ui-otp-slot:first-child {
    border-inline-start-width: var(--control-border-width);
    border-start-start-radius: var(--radius-md);
    border-end-start-radius: var(--radius-md);
  }
  .ui-otp-group .ui-otp-slot:last-child {
    border-start-end-radius: var(--radius-md);
    border-end-end-radius: var(--radius-md);
  }
  .ui-otp-group[data-appearance="grouped"] {
    overflow: hidden;
    border: var(--control-border-width) solid hsl(var(--border));
    border-radius: var(--radius-md);
    background: hsl(var(--background));
  }
  .ui-otp-group[data-appearance="grouped"] .ui-otp-slot {
    border: 0;
    border-radius: 0;
    background: transparent;
  }
  .ui-otp-group[data-appearance="grouped"] .ui-otp-slot[data-active="true"] {
    box-shadow: none;
  }

  .ui-otp-group[data-appearance="grouped"]:has(.ui-otp-slot[data-active="true"]) {
    border-color: hsl(var(--focus-ring-color, var(--ring)));
  }

  .ui-otp-container:has(.ui-otp-input[aria-invalid="true"]) {
    --focus-ring-color: var(--destructive);
  }
  .ui-otp-container:has(.ui-otp-input[aria-invalid="true"])
    .ui-otp-group[data-appearance="grouped"] {
    border-color: hsl(var(--destructive));
  }
  .ui-otp-container:has(.ui-otp-input:disabled) .ui-otp-group[data-appearance="grouped"] {
    background: hsl(var(--muted));
  }

  .ui-otp-slot[data-active="true"] {
    z-index: 1;
  }
  .ui-otp-container:has(.ui-otp-input[aria-invalid="true"]) .ui-otp-slot {
    border-color: hsl(var(--destructive));
  }
  .ui-otp-container:has(.ui-otp-input:disabled) .ui-otp-slot {
    cursor: not-allowed;
    background: hsl(var(--muted));
    color: hsl(var(--muted-foreground));
  }
  .ui-otp-caret-wrapper {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .ui-otp-caret {
    width: var(--otp-caret-inline-size);
    height: var(--otp-caret-block-size);
    background: hsl(var(--foreground));
    animation: ui-otp-blink 1s step-end infinite;
  }
  @keyframes ui-otp-blink {
    50% {
      opacity: 0;
    }
  }
  .ui-otp-separator-icon {
    width: var(--otp-separator-icon-size);
    height: var(--otp-separator-icon-size);
    color: hsl(var(--muted-foreground));
  }

  .ui-rating {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);

    flex-wrap: wrap;
  }
  .ui-rating-star {

    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    min-height: 1.5rem;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    color: hsl(
      var(--rating-star-empty-color, var(--muted-foreground)) / var(--rating-star-empty-alpha)
    );
    line-height: 0;
  }
  .ui-rating-star:disabled {
    cursor: default;
  }
  .ui-rating-star svg {
    width: 1.25rem;
    height: 1.25rem;
  }

  .ui-rating-star-filled {
    color: hsl(var(--rating-star-filled-color, var(--warning)));
  }
  .ui-rating-star-filled svg {
    fill: currentColor;
  }
  .ui-rating-star:focus-visible {
    border-radius: var(--radius-sm);
  }

  .ui-segmented {

    --segmented-item-height: calc(var(--control-height) - var(--segmented-track-padding) * 2);
    display: inline-flex;
    max-width: 100%;

    flex-wrap: wrap;
    align-items: stretch;
    padding: var(--segmented-track-padding);
    border-radius: var(--segmented-track-radius);
    background: hsl(var(--segmented-track-background));
    color: hsl(var(--segmented-item-color));
    font-size: var(--font-size-base);
  }

  .ui-segmented-item {

    position: relative;
    display: inline-flex;
    min-width: 0;
    height: var(--segmented-item-height);
    align-items: center;
    justify-content: center;
    gap: var(--segmented-item-gap);
    padding-inline: var(--segmented-item-padding-inline);
    border: 0;
    border-radius: var(--segmented-item-radius);
    background: transparent;
    color: inherit;
    cursor: pointer;

    font: inherit;
    white-space: nowrap;

    transition: color var(--duration-fast);
  }

  .ui-segmented-item:not([data-state="checked"]):not([data-disabled]):hover {
    background: hsl(var(--segmented-item-hover-background, var(--accent)));
    color: hsl(var(--segmented-item-hover-color));
  }
  .ui-segmented-item:not([data-state="checked"]):not([data-disabled]):active {
    background: hsl(var(--segmented-item-active-background));
  }

  .ui-segmented-item[data-state="checked"] {
    background: hsl(var(--segmented-item-selected-background));
    box-shadow: var(--segmented-item-selected-shadow);
    color: hsl(var(--segmented-item-selected-color));
  }

  .ui-segmented-item[data-disabled] {
    opacity: var(--disabled-opacity);
    cursor: not-allowed;
  }

  .ui-segmented-item-label {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .ui-segmented-item-icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
  }
  .ui-segmented-item-icon > svg {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
    display: inline-block;
    vertical-align: middle;
  }

  .ui-segmented-count {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    min-inline-size: var(--segmented-count-min-width);
    margin-inline-start: var(--segmented-count-gap);
    border-radius: var(--segmented-count-radius);
    padding-inline: var(--segmented-count-space-inline);
    background: var(--segmented-count-background, hsl(var(--primary)));
    color: var(--segmented-count-color, hsl(var(--primary-foreground)));
    font-size: var(--segmented-count-font-size);
    line-height: 1;
    font-variant-numeric: tabular-nums;
  }

  .ui-tag-input {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--control-height);
    padding: var(--space-1) var(--control-padding-x);

    border: var(--control-border-width) solid var(--control-surface-border-color, hsl(var(--input)));
    border-radius: var(--control-radius);
    background: var(--control-surface-background, hsl(var(--background)));
    box-shadow: var(--control-shadow);
  }
  .ui-tag-input-disabled {
    opacity: var(--disabled-opacity);
    cursor: not-allowed;
  }

  .ui-tag-input-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .ui-tag-input-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--tag-input-chip-font-size);
    padding: 0.0625rem var(--space-2);
    border-radius: var(--radius-sm);
    background: hsl(var(--secondary));
    color: hsl(var(--secondary-foreground));
  }
  .ui-tag-input-remove,
  .ui-search-select-value-remove {

    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    min-height: 1.5rem;
    margin-inline-end: -0.25rem;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    color: inherit;
    opacity: 0.7;
  }
  .ui-tag-input-remove:hover,
  .ui-search-select-value-remove:hover {
    opacity: 1;
  }
  .ui-tag-input-remove svg,
  .ui-search-select-value-remove svg {
    width: 0.75rem;
    height: 0.75rem;
  }

  .ui-tag-input-clear {
    flex-shrink: 0;
    margin-inline-start: auto;
  }
  .ui-tag-input-field {
    flex: 1;
    min-width: 6rem;
    block-size: calc(var(--control-height) - var(--space-1) * 2 - var(--control-border-width) * 2);
    border: 0;
    outline: none;
    background: transparent;
    font-size: var(--control-font-size);
    color: inherit;
  }

  .ui-number-input {
    position: relative;
    display: inline-flex;
    align-items: stretch;
    inline-size: 100%;
  }
  .ui-number-input[data-size="xs"] {
    --control-height: var(--control-height-xs);
  }
  .ui-input[data-size="sm"] {
    --control-height: var(--control-height-sm);
  }

  .ui-control-trigger {
    cursor: pointer;
  }

  .ui-control-trigger:disabled,
  .ui-control-trigger[data-disabled] {
    cursor: not-allowed;
  }

  .ui-control-trigger[data-width="bounded"],

  .ui-control[data-width="bounded"] {
    inline-size: var(--control-bounded-width);
    max-inline-size: 100%;
  }

  .ui-control[data-size="sm"],
  .ui-control-surface[data-size="sm"] {
    --control-height: var(--control-height-sm);
  }

  .ui-control[data-size="lg"],
  .ui-control-surface[data-size="lg"] {
    --control-height: var(--control-height-lg);
  }

  .ui-control[data-size="xs"],
  .ui-control-surface[data-size="xs"] {
    --control-height: var(--control-height-xs);
  }

  .ui-control-surface {
    border-color: var(--control-surface-border-color, hsl(var(--input)));
    background: var(--control-surface-background, hsl(var(--background)));
  }

  .ui-control-surface[data-variant="filled"] {
    --control-shadow: var(--control-filled-shadow);
    border-color: var(--control-filled-border-color);
    background: var(--control-filled-background, hsl(var(--muted)));
  }

  .ui-control-surface[data-variant="borderless"] {
    --control-shadow: var(--control-borderless-shadow);
    border-color: var(--control-borderless-border-color);
    background: var(--control-borderless-background);
  }

  .ui-control-surface[data-status="error"],
  .ui-control-surface[aria-invalid="true"] {
    border-color: var(--control-status-error-border-color);
  }

  .ui-control-surface[data-status="warning"] {
    border-color: var(--control-status-warning-border-color, hsl(var(--text-warning)));
    --focus-ring-color: var(--warning);
    --focus-outline-color: var(--warning);
    --focus-ring-glow-color: var(--control-status-warning-outline-color, var(--text-warning));
  }

  .ui-number-input[data-size="sm"] {
    --control-height: var(--control-height-sm);
  }
  .ui-number-input[data-size="lg"] {
    --control-height: var(--control-height-lg);
  }

  .ui-number-input-field {
    inline-size: 100%;
    text-align: end;
    padding-inline-end: calc(var(--control-height) + var(--space-2));
  }

  .ui-number-input-affix {
    position: absolute;
    inset-block: 0;
    display: inline-flex;
    align-items: center;
    color: hsl(var(--muted-foreground));
    font-size: var(--font-size-base);
    pointer-events: none;
  }

  [data-slot="number-input-prefix"] {
    inset-inline-start: var(--control-padding-x);
  }

  .ui-number-input:has([data-slot="number-input-prefix"]) .ui-number-input-field {
    padding-inline-start: calc(var(--control-padding-x) + 1.25rem);
  }
  [data-slot="number-input-suffix"] {
    inset-inline-end: calc(var(--control-height) + var(--space-2));
  }
  .ui-number-input-steppers {
    position: absolute;
    inset-inline-end: var(--space-1);
    inset-block: 0;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.0625rem;
    pointer-events: none;
  }
  .ui-number-input-step {
    pointer-events: auto;
    block-size: calc(var(--control-height) / 2 - 0.1875rem);
    min-block-size: 0;
    inline-size: 1.5rem;
  }
  .ui-number-input-step svg {
    inline-size: 0.75rem;
    block-size: 0.75rem;
  }

  .ui-number-input-step {
    position: relative;
  }

  .ui-number-input-step::after {
    content: "";
    position: absolute;
    inset-inline-start: 50%;
    translate: -50% 0;
    inline-size: var(--touch-target-min);
    block-size: var(--touch-target-min);
  }

  .ui-number-input-step-up::after {
    inset-block-end: 0;
  }

  .ui-number-input-step-down::after {
    inset-block-start: 0;
  }

  @media (pointer: coarse) {
    .ui-number-input:not([data-size="xs"]):not([data-size="sm"]) {
      --control-height: var(--number-input-touch-height);
    }

    .ui-number-input-steppers {
      gap: 0;
    }

    .ui-number-input-step {
      block-size: calc(var(--control-height) / 2);
    }
  }
}

@layer components {

  .ui-control-affix {
    position: absolute;
    inset-block: 0;
    inset-inline-end: var(--control-affix-inset-inline-end);
    display: flex;
    align-items: center;
    pointer-events: none;
  }

  .ui-control-affix-action {
    pointer-events: auto;
    display: flex;
    inline-size: var(--control-affix-action-size);
    block-size: var(--control-affix-action-size);
    align-items: center;
    justify-content: center;
    border-radius: var(--control-affix-action-radius);
    opacity: var(--control-affix-rest-alpha);
  }

  .ui-control-affix-action:hover,
  .ui-control-affix-action:focus-visible {
    opacity: 1;
  }

  .ui-control-affix-icon {
    inline-size: var(--control-affix-icon-size);
    block-size: var(--control-affix-icon-size);
    flex-shrink: 0;
  }

  .ui-control-affix-indicator {
    opacity: var(--control-affix-rest-alpha);
  }

  .ui-control-trigger-affixed {
    padding-inline-end: var(--control-trigger-space-inline-end);
  }

  .ui-search-select-panel {
    --popover-surface-inline-size: max-content;
    --popover-space-inset: 0;
    display: flex;
    flex-direction: column;
    max-block-size: var(--radix-popover-content-available-height);
    max-inline-size: min(
      var(--search-select-panel-max-width),
      calc(100vw - var(--search-select-panel-viewport-inset))
    );
    min-inline-size: var(--radix-popover-trigger-width);
  }

  .ui-search-select-panel[data-popup-match="content"] {
    min-inline-size: auto;
  }

  .ui-search-select-panel[data-popup-match="fixed"] {
    min-inline-size: var(--search-select-panel-inline-size);
    inline-size: var(--search-select-panel-inline-size);
  }

  .ui-search-select-selected-icon {
    display: inline-flex;
    align-items: center;
    margin-inline-start: auto;
    flex-shrink: 0;
  }

  .ui-search-select-command {
    display: flex;
    min-block-size: 0;
    flex-direction: column;
  }

  .ui-search-select-search {
    flex-shrink: 0;
    border-block-end: 1px solid hsl(var(--border));
  }

  .ui-search-select-search-input {
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .ui-search-select-search-input:focus-visible {
    box-shadow: none;
  }

  .ui-search-select-list {
    max-block-size: var(--search-select-list-max-height);
    max-block-size: none;
    min-block-size: 0;
    flex: 1 1 0%;
    overflow-y: auto;
    padding: var(--search-select-list-space-inset);
  }

  .ui-command[data-split] .ui-search-select-list {
    padding: var(--command-list-split-padding);
  }

  .ui-search-select-option-slot {
    min-inline-size: 0;
    flex: 1 1 0%;
  }

  .ui-search-select-option-body {
    display: flex;
    min-inline-size: 0;
    flex: 1 1 0%;
    align-items: center;
    gap: var(--search-select-option-space-gap);
  }

  .ui-search-select-values {
    display: flex;
    min-inline-size: 0;
    flex: 1 1 0%;
    align-items: center;
    gap: var(--search-select-option-space-gap);
    overflow: hidden;
  }

  .ui-search-select-value {
    display: inline-flex;
    max-inline-size: 100%;
    align-items: center;
    overflow: hidden;
    border-radius: var(--radius-sm);
    background: hsl(var(--secondary));
    padding: 0.0625rem var(--space-2);
    color: hsl(var(--secondary-foreground));
    font-size: var(--tag-input-chip-font-size);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .ui-search-select-option-text {
    display: flex;
    min-inline-size: 0;
    flex-direction: column;
  }

  .ui-search-select-option-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--search-select-option-font-size);
  }

  .ui-search-select-option-sublabel {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--search-select-option-sublabel-font-size);
    color: hsl(var(--muted-foreground));
  }

  .ui-search-select-status {
    display: flex;
    align-items: center;
    gap: var(--search-select-option-space-gap);
    padding-inline: var(--search-select-status-space-inline);
    padding-block: var(--search-select-status-space-block);
    font-size: var(--search-select-status-font-size);
    color: hsl(var(--muted-foreground));
  }

  .ui-search-select-spinner {
    inline-size: var(--search-select-spinner-size);
    block-size: var(--search-select-spinner-size);
  }

  .ui-search-select-placeholder {
    padding-inline: var(--search-select-status-space-inline);
    padding-block: var(--search-select-placeholder-space-block);
    text-align: center;
    font-size: var(--search-select-status-font-size);
    color: hsl(var(--muted-foreground));
  }

  .ui-search-select-placeholder[data-tone="destructive"] {
    color: hsl(var(--text-error));
  }

  .ui-search-select-footer {
    flex-shrink: 0;
    padding: var(--search-select-footer-space-inset);
    border-block-start: 1px solid hsl(var(--border));
  }
}

@layer components {

  .ui-cascader-columns {
    display: flex;
    max-block-size: var(--cascader-columns-max-height);
  }

  .ui-cascader-column {
    min-inline-size: var(--cascader-column-min-width);
    border-inline-end: 1px solid hsl(var(--border));
  }

  .ui-cascader-column:last-child {
    border-inline-end: 0;
  }

  .ui-cascader-option {
    display: flex;
    inline-size: 100%;
    align-items: center;
    gap: var(--cascader-option-space-gap);
    padding-inline: var(--cascader-option-space-inline);
    padding-block: var(--cascader-option-space-block);
    font-size: var(--cascader-option-font-size);
    outline: none;
  }

  .ui-cascader-option-icon {
    margin-inline-end: var(--cascader-option-space-gap);
    inline-size: var(--cascader-option-icon-size);
    block-size: var(--cascader-option-icon-size);
    flex-shrink: 0;
  }

  .ui-cascader-option-chevron {
    inline-size: var(--cascader-option-icon-size);
    block-size: var(--cascader-option-icon-size);
    flex-shrink: 0;
    opacity: var(--control-affix-rest-alpha);
  }

  .ui-cascader-list {
    max-block-size: var(--cascader-list-max-height);
  }

  .ui-cascader-panel {
    padding: var(--cascader-panel-space-inset);
  }

  .ui-cascader-popover {
    --popover-surface-inline-size: auto;
    --popover-space-inset: 0;
    min-inline-size: var(--radix-popover-trigger-width);
  }

  .ui-cascader-empty {
    padding-block: var(--cascader-empty-space-block);
    text-align: center;
    font-size: var(--cascader-option-font-size);
    color: hsl(var(--muted-foreground));
  }

  .ui-cascader-result {
    display: flex;
    inline-size: 100%;
    align-items: center;
    border-radius: var(--cascader-result-radius);
    padding-inline: var(--cascader-result-space-inline);
    padding-block: var(--cascader-result-space-block);
    font-size: var(--cascader-option-font-size);
    outline: none;
  }

  .ui-cascader-result-icon {
    margin-inline-end: var(--cascader-result-icon-space-inline-end);
    inline-size: var(--cascader-option-icon-size);
    block-size: var(--cascader-option-icon-size);
    flex-shrink: 0;
  }

  .ui-cascader-result-icon[data-selected="false"] {
    opacity: 0;
  }

  .ui-cascader-affix {
    --control-affix-inset-inline-end: var(--space-3);
    --control-affix-action-size: var(--control-affix-icon-size);
  }

  .ui-cascader-option[data-disabled],
  .ui-cascader-trigger[data-disabled] {
    pointer-events: none;
    opacity: var(--disabled-opacity);
  }
}

@layer components {

  .ui-select-root {
    display: contents;
  }

  .ui-select-root > [data-react-aria-prevent-focus][aria-hidden="true"] {
    position: absolute !important;
    inset: auto !important;
  }

  .ui-select-content {
    position: relative;
    z-index: var(--overlay-z-index);
    display: flex;
    flex-direction: column;
    max-height: var(--select-content-max-height);

    min-width: max(
      var(--menu-content-min-width),
      var(--trigger-width, var(--menu-content-min-width))
    );
    overflow: hidden;
    border-radius: var(--radius-md);
    border: 1px solid hsl(var(--border));
    background: hsl(var(--popover));
    color: hsl(var(--popover-foreground));
    box-shadow: var(--shadow-md);
  }

  .ui-select-content[data-popup-match="content"] {
    min-width: var(--menu-content-min-width);
  }

  .ui-select-content[data-popup-match="fixed"] {
    min-width: var(--select-content-inline-size);
    width: var(--select-content-inline-size);
  }

  .ui-select-viewport {
    min-block-size: 0;
    max-block-size: var(--select-content-max-height);
    overflow-y: auto;
    padding: var(--menu-content-space-inset);
    outline: none;
  }

  .ui-select-empty {
    padding-inline: var(--select-item-space-inline);
    padding-block: var(--select-empty-space-block);
    color: hsl(var(--muted-foreground));
    font-size: var(--menu-item-font-size);
    text-align: center;
  }

  .ui-select-item,
  .ui-select-label {
    border-radius: var(--menu-item-radius);
    padding-inline: var(--menu-item-space-inline);
    height: var(--menu-item-height);
    display: flex;
    align-items: center;
    gap: var(--menu-item-space-gap);
    font-size: var(--menu-item-font-size);
  }

  .ui-select-item,
  .ui-select-label {
    border-radius: var(--menu-item-radius);
    padding-inline: var(--menu-item-space-inline);
    height: var(--menu-item-height);
    display: flex;
    align-items: center;
    gap: var(--menu-item-space-gap);
    font-size: var(--menu-item-font-size);
  }

  .ui-select-item {
    position: relative;
    inline-size: 100%;
    cursor: default;
    padding-inline: var(--select-item-space-inline);
    outline: none;
    user-select: none;
  }

  .ui-select-item[data-state="checked"] {
    background: hsl(var(--accent));
    color: hsl(var(--foreground));
    font-weight: var(--font-weight-medium);
  }

  .ui-select-item[data-highlighted] {
    background: hsl(var(--accent));
    color: hsl(var(--accent-foreground));
  }

  .ui-select-item[data-disabled] {
    pointer-events: none;
    opacity: var(--disabled-opacity);
  }

  .ui-select-item svg {
    pointer-events: none;
    flex-shrink: 0;
  }

  .ui-select-label {
    font-weight: var(--font-weight-medium);
  }

  .ui-select-scroll-button {
    display: flex;
    cursor: default;
    align-items: center;
    justify-content: center;
    padding-block: var(--select-scroll-button-space-block);
  }

  .ui-select-scroll-icon,
  .ui-select-chevron {
    inline-size: var(--control-affix-icon-size);
    block-size: var(--control-affix-icon-size);
  }

  .ui-select-chevron {
    flex-shrink: 0;
    opacity: var(--control-affix-rest-alpha);
  }

  .ui-select-prefix,
  .ui-select-suffix {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    color: hsl(var(--muted-foreground));
  }

  .ui-select-trigger-prefixed > [data-slot="select-value"] {
    flex: 1 1 auto;
    text-align: start;
  }
}

@layer components {

  .ui-time-picker-panel {
    inline-size: var(--time-picker-panel-width);
  }

  .ui-time-picker-panel[data-hour-cycle="h12"] {
    inline-size: var(--time-picker-panel-width-12h);
  }

  .ui-time-picker-column {
    display: flex;
    min-inline-size: 0;
    flex: 1 1 0%;
    flex-direction: column;
  }

  .ui-time-picker-column-heading {
    padding-inline: var(--time-picker-heading-space-inline);
    padding-block: var(--time-picker-heading-space-block);
    border-block-end: 1px solid hsl(var(--border));
    text-align: center;
    font-size: var(--time-picker-heading-font-size);
    font-weight: var(--font-weight-medium);
    color: hsl(var(--muted-foreground));
  }

  .ui-time-picker-column-scroll {
    block-size: var(--time-picker-column-height);
    padding: var(--time-picker-column-space-inset);
    overflow-y: scroll;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-gutter: stable;
  }

  .ui-time-picker-option {
    display: flex;
    inline-size: 100%;
    align-items: center;
    justify-content: center;
    border-radius: var(--time-picker-option-radius);
    padding-block: var(--time-picker-option-space-block);
    font-size: var(--time-picker-option-font-size);
    font-variant-numeric: tabular-nums;
    transition: background-color 150ms ease;
  }

  .ui-time-picker-option:hover {
    background: hsl(var(--accent));
  }

  .ui-time-picker-option[data-disabled] {
    opacity: var(--disabled-opacity);
    cursor: not-allowed;
  }

  .ui-time-picker-option[data-disabled]:hover {
    background: transparent;
  }

  .ui-time-picker-option[data-selected="true"] {
    background: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
  }

  .ui-time-picker-option[data-selected="true"]:hover {
    background: hsl(var(--primary) / 0.9);
  }

  .ui-time-picker-footer {
    display: flex;
    flex-direction: column;
    gap: var(--time-picker-footer-space-gap);
    padding: var(--time-picker-footer-space-inset);
    border-block-start: 1px solid hsl(var(--border));
  }

  .ui-time-picker-footer-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--time-picker-footer-space-gap);
  }

  .ui-time-picker-footer-actions > :only-child:last-child {
    margin-inline-start: auto;
  }

  .ui-time-picker-footer-actions > :first-child:not(:only-child) {
    margin-inline-end: auto;
  }

  .ui-time-picker-popover {
    --popover-surface-inline-size: auto;
    --popover-space-inset: 0;
  }

  .ui-control-panel-flush {
    --popover-surface-inline-size: auto;
    --popover-space-inset: 0;
  }

  .ui-time-picker-affix {
    display: inline-flex;
    align-items: center;
    gap: var(--time-picker-affix-space-gap);
  }

  .ui-control-inline-affix-action {
    display: inline-flex;
    inline-size: var(--control-inline-affix-size);
    block-size: var(--control-inline-affix-size);
    align-items: center;
    justify-content: center;
    border-radius: var(--control-affix-action-radius);
    color: hsl(var(--muted-foreground));
    opacity: var(--control-inline-affix-rest-alpha);
    transition: opacity 150ms ease;
  }

  .ui-control-inline-affix-action {
    position: relative;
  }

  .ui-control-inline-affix-action::after {
    content: "";
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    translate: -50% -50%;
    min-inline-size: var(--touch-target-min);
    min-block-size: var(--touch-target-min);
    inline-size: 100%;
    block-size: 100%;
  }

  .ui-control-inline-affix-action:hover,
  .ui-control-inline-affix-action:focus-visible {
    color: hsl(var(--foreground));
    opacity: 1;
  }

  .ui-control-inline-affix-icon {
    inline-size: var(--control-inline-affix-icon-size);
    block-size: var(--control-inline-affix-icon-size);
  }

  .ui-input::file-selector-button {
    display: inline-flex;
    block-size: var(--input-file-button-height);
    border: 0;
    background: transparent;
    color: hsl(var(--foreground));
    font-size: var(--input-file-button-font-size);
    font-weight: var(--font-weight-medium);
  }

  .ui-input {
    min-inline-size: 0;
  }

  .ui-input:disabled {
    pointer-events: none;
    cursor: not-allowed;
    opacity: var(--disabled-opacity);
  }

  .ui-input-affix-wrapper {
    position: relative;
    display: inline-flex;
    inline-size: 100%;
    align-items: center;
  }

  .ui-input-leading,
  .ui-input-trailing {
    position: absolute;
    inset-block: 0;
    display: inline-flex;
    align-items: center;
  }

  .ui-input-leading {
    inset-inline-start: var(--control-inline-affix-inset-inline);
    pointer-events: none;
    color: hsl(var(--muted-foreground));
  }

  .ui-input-trailing {
    inset-inline-end: var(--control-inline-affix-inset-inline);
  }

  .ui-textarea-clear {
    position: absolute;
    inset-block-start: var(--textarea-clear-inset-block-start);
    inset-inline-end: var(--control-inline-affix-inset-inline);
  }

  .ui-input--leading-affix {
    padding-inline-start: var(--control-inline-affix-space-inline-end);
  }

  .ui-input--trailing-affix {
    padding-inline-end: var(--control-inline-affix-space-inline-end);
  }
}

@layer components {

  .ui-chat-suggestion-panel {
    --popover-surface-inline-size: var(--radix-popover-trigger-width);
  }
}

@layer components {

  .ui-tree-select-popover {
    --popover-surface-inline-size: var(--radix-popover-trigger-width);
    --popover-space-inset: 0;
  }

  .ui-tree-select-list {
    max-block-size: var(--tree-select-list-max-height);
  }

  .ui-tree-select-panel {
    padding: var(--menu-content-space-inset);
  }

  .ui-tree-select-empty {
    padding-block: var(--tree-select-empty-space-block);
    text-align: center;
    font-size: var(--tree-select-row-font-size);
    color: hsl(var(--muted-foreground));
  }

  .ui-tree-select-row {
    display: flex;
    align-items: center;
    border-radius: var(--tree-select-row-radius);
    padding-block: var(--tree-select-row-space-block);
    padding-inline-end: var(--tree-select-row-space-inline-end);
    padding-inline-start: calc(
      var(--tree-select-depth-space-base) + var(--tree-select-depth, 0) *
        var(--tree-select-depth-space-step)
    );
    font-size: var(--tree-select-row-font-size);
    outline: none;
  }

  .ui-tree-select-row:hover {
    background: hsl(var(--accent));
    color: hsl(var(--accent-foreground));
  }

  .ui-tree-select-row[data-selected="true"] {
    background: hsl(var(--accent) / 0.6);
  }

  .ui-tree-select-row[data-disabled] {
    pointer-events: none;
    opacity: var(--disabled-opacity);
  }

  .ui-tree-select-toggle {
    display: flex;
    inline-size: var(--tree-select-toggle-size);
    block-size: var(--tree-select-toggle-size);
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    margin-inline-end: var(--tree-select-toggle-space-inline-end);
    border-radius: var(--tree-select-row-radius);
  }

  .ui-tree-select-toggle[data-leaf] {
    visibility: hidden;
  }

  .ui-tree-select-toggle-icon,
  .ui-tree-select-chevron {
    inline-size: var(--control-affix-icon-size);
    block-size: var(--control-affix-icon-size);
  }

  .ui-tree-select-chevron {
    opacity: var(--control-affix-rest-alpha);
  }

  .ui-tree-select-label {
    display: flex;
    flex: 1 1 0%;
    cursor: pointer;
    align-items: center;
    gap: var(--tree-select-label-space-gap);
  }

  .ui-tree-select-clear {
    position: absolute;
    inset-inline-end: var(--space-3);
    inset-block-start: 50%;
    translate: 0 -50%;
    z-index: 10;
    display: flex;
    inline-size: var(--control-affix-action-size);
    block-size: var(--control-affix-action-size);
    align-items: center;
    justify-content: center;
    border-radius: var(--control-affix-action-radius);
    opacity: var(--control-affix-rest-alpha);
  }

  .ui-tree-select-clear:hover,
  .ui-tree-select-clear:focus-visible {
    opacity: 1;
  }

  .ui-tree-select-trigger-affixed {
    padding-inline-end: var(--space-10);
  }
}

@layer components {

  .ui-calendar {
    position: relative;
    inline-size: fit-content;
    padding: var(--calendar-space-inset);
  }

  .ui-calendar-months {
    display: flex;
    flex-direction: column;
    gap: var(--calendar-month-space-gap);
  }

  @media (min-width: 40rem) {
    .ui-calendar-months {
      flex-direction: row;
    }
  }

  .ui-calendar[data-bordered="true"] .ui-calendar-day,
  .ui-calendar[data-bordered="true"] .ui-calendar-weekday {
    border-inline-start: 1px solid var(--calendar-grid-border-color, hsl(var(--border)));
    border-block-start: 1px solid var(--calendar-grid-border-color, hsl(var(--border)));
  }

  .ui-calendar[data-bordered="true"] .ui-calendar-week,
  .ui-calendar[data-bordered="true"] .ui-calendar-weekdays {
    border-inline-end: 1px solid var(--calendar-grid-border-color, hsl(var(--border)));
  }

  .ui-calendar[data-bordered="true"] .ui-calendar-weekday {
    background-color: hsl(var(--muted));

    border-radius: 0;

    padding-block: var(--calendar-bordered-weekday-padding-block);
  }

  .ui-calendar[data-bordered="true"] .ui-calendar-grid {
    border-block-end: 1px solid var(--calendar-grid-border-color, hsl(var(--border)));
  }

  .ui-calendar[data-bordered="true"] .ui-calendar-day.invisible {
    visibility: visible;
  }

  .ui-calendar[data-bordered="true"] .ui-calendar-day.invisible > * {
    visibility: hidden;
  }

  .ui-calendar[data-bordered="true"] .ui-calendar-day-disabled {
    opacity: 1;
  }

  .ui-calendar[data-bordered="true"] .ui-calendar-day-disabled .ui-calendar-day-button {
    opacity: var(--disabled-opacity);
  }

  .ui-calendar[data-bordered="true"] .ui-calendar-week-number,
  .ui-calendar[data-bordered="true"] .ui-calendar-week-number-header {
    border-inline-start: 1px solid var(--calendar-grid-border-color, hsl(var(--border)));
    border-block-start: 1px solid var(--calendar-grid-border-color, hsl(var(--border)));
  }

  .ui-calendar[data-bordered="true"] .ui-calendar-day {
    inline-size: var(--control-height);
  }

  .ui-calendar[data-bordered="true"] .ui-calendar-day-button {
    --button-radius: 0;
    inline-size: 100%;
  }

  .ui-calendar[data-bordered="true"] .ui-calendar-week {
    margin-block-start: 0;
  }

  .ui-calendar[data-bordered="true"] .ui-calendar-grid {
    margin-block-start: var(--calendar-grid-space-block-start);
  }

  .ui-calendar[data-width="full"] {
    inline-size: 100%;
  }

  .ui-calendar[data-width="full"] .ui-calendar-months {
    flex-direction: column;
  }

  .ui-calendar[data-width="full"] .ui-calendar-month {
    inline-size: 100%;
  }

  .ui-calendar[data-width="full"] .ui-calendar-weekday,
  .ui-calendar[data-width="full"] .ui-calendar-day {
    inline-size: auto;
    flex: 1 1 0;
  }

  .ui-calendar[data-width="full"] .ui-calendar-day-button {
    inline-size: 100%;
    max-inline-size: none;
    block-size: auto;
    min-block-size: var(--control-height);

    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    text-align: start;
    white-space: normal;
  }

  .ui-calendar-month {
    position: relative;
    display: flex;
    flex-direction: column;
  }

  .ui-calendar-caption {
    display: flex;
    block-size: var(--control-height);
    inline-size: 100%;
    align-items: center;
    justify-content: center;
    padding-inline: var(--calendar-caption-space-inline);
  }

  .ui-calendar-caption-label {
    font-size: var(--calendar-caption-font-size);
    font-weight: var(--font-weight-medium);
  }

  .ui-calendar-nav {
    position: absolute;
    inset-inline: 0;
    inset-block-start: var(--calendar-nav-space-block-start);
    block-size: var(--control-height);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline: var(--calendar-nav-space-inline);
  }

  .ui-calendar-nav-button {
    background: transparent;
    padding: 0;
    opacity: var(--calendar-nav-rest-alpha);
  }

  .ui-calendar-nav-button:hover {
    opacity: 1;
  }

  .ui-calendar-chevron {

    fill: none;
    inline-size: var(--calendar-chevron-size);
    block-size: var(--calendar-chevron-size);
  }

  .ui-calendar-grid {
    margin-block-start: var(--calendar-grid-space-block-start);
    inline-size: 100%;
    border-collapse: collapse;
  }

  .ui-calendar-weekday {
    inline-size: var(--control-height);
    border-radius: var(--calendar-weekday-radius);
    font-size: var(--calendar-weekday-font-size);
    font-weight: var(--font-weight-normal);
    color: hsl(var(--muted-foreground));
  }

  .ui-calendar-week {
    margin-block-start: var(--calendar-week-space-block-start);
    display: flex;
    inline-size: 100%;
  }

  .ui-calendar-day {
    position: relative;
    padding: 0;
    text-align: center;
    font-size: var(--calendar-day-font-size);
  }

  .ui-calendar-day:focus-within {
    position: relative;
    z-index: 20;
  }

  .ui-calendar .ui-calendar-day-button {

    color: inherit;
    inline-size: var(--control-height);
    block-size: var(--control-height);
    padding: 0;
    font-weight: var(--font-weight-normal);
    border-radius: var(--calendar-day-radius);
  }

  .ui-calendar .ui-calendar-day-button[aria-selected] {
    opacity: 1;
  }

  .ui-calendar .ui-calendar-day.day-selected .ui-calendar-day-button,
  .ui-calendar .ui-calendar-day.day-selected .ui-calendar-day-button:hover,
  .ui-calendar .ui-calendar-day.day-selected .ui-calendar-day-button:focus {
    background-color: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
  }

  .ui-calendar .ui-calendar-day.day-today:not(.day-selected) .ui-calendar-day-button {
    box-shadow: inset 0 0 0 1px hsl(var(--primary));
    color: hsl(var(--text-primary, from hsl(var(--primary)) var(--text-primary-channels)));
    font-weight: var(--font-weight-medium);
  }

  .ui-calendar .ui-calendar-day.day-outside:not(.day-selected) .ui-calendar-day-button {
    color: hsl(var(--muted-foreground));
  }

  .ui-calendar .ui-calendar-day.day-range-middle.day-selected .ui-calendar-day-button,
  .ui-calendar .ui-calendar-day.day-range-middle.day-selected .ui-calendar-day-button:hover,
  .ui-calendar .ui-calendar-day.day-range-middle.day-selected .ui-calendar-day-button:focus,
  .ui-calendar .ui-calendar-day.day-range-middle .ui-calendar-day-button {
    background-color: hsl(var(--accent));
    color: hsl(var(--accent-foreground));
    border-radius: 0;
  }

  .ui-calendar .ui-calendar-day.day-range-start:not(.day-range-end) .ui-calendar-day-button {
    border-start-end-radius: 0;
    border-end-end-radius: 0;
  }

  .ui-calendar .ui-calendar-day.day-range-end:not(.day-range-start) .ui-calendar-day-button {
    border-start-start-radius: 0;
    border-end-start-radius: 0;
  }

  .ui-calendar .ui-calendar-day.day-today:not(:has(button)) {
    box-shadow: inset 0 0 0 1px hsl(var(--primary));
    color: hsl(var(--text-primary, from hsl(var(--primary)) var(--text-primary-channels)));
    font-weight: var(--font-weight-medium);
    border-radius: var(--calendar-day-radius);
  }

  .ui-calendar .ui-calendar-day.day-outside:not(:has(button)) {
    color: hsl(var(--muted-foreground));
  }

  .ui-calendar .ui-calendar-day.day-selected:not(:has(button)) {
    background-color: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
    border-radius: var(--calendar-day-radius);
  }

  .ui-calendar-day-disabled {
    opacity: var(--disabled-opacity);
  }

  .ui-calendar .ui-calendar-day-disabled .ui-calendar-day-button {
    color: hsl(var(--muted-foreground));
  }

  .ui-calendar-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--calendar-footer-space-gap);
    margin-block-start: var(--calendar-footer-space-block-start);
    padding-block-start: var(--calendar-footer-space-block-start);
    border-block-start: var(--calendar-footer-border-width) solid hsl(var(--border));
  }

  .ui-calendar-footer-today {
    margin-inline-end: auto;
  }
}

@layer components {

  .ui-transfer {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: var(--transfer-panes-space-gap);
  }

  .ui-transfer-pane {
    display: flex;
    min-block-size: var(--transfer-pane-min-height);
    flex: 1 1 0%;
    flex-direction: column;
    border-radius: var(--transfer-pane-radius);
    border: 1px solid hsl(var(--border));
    background: hsl(var(--background));
  }

  .ui-transfer-pane-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline: var(--transfer-header-space-inline);
    padding-block: var(--transfer-header-space-block);
    border-block-end: 1px solid hsl(var(--border));
    font-size: var(--transfer-header-font-size);
  }

  .ui-transfer-pane-check {
    display: flex;
    cursor: pointer;
    align-items: center;
    gap: var(--transfer-header-space-gap);
    font-weight: var(--font-weight-medium);
  }

  .ui-transfer-search {
    padding: var(--transfer-search-space-inset);
    border-block-end: 1px solid hsl(var(--border));
  }

  .ui-transfer-search[data-disabled] {
    pointer-events: none;
    opacity: var(--disabled-opacity);
  }

  .ui-transfer-list {
    padding: var(--transfer-list-space-inset);
  }

  .ui-transfer-empty {
    padding-block: var(--transfer-empty-space-block);
    text-align: center;
    font-size: var(--transfer-row-font-size);
    color: hsl(var(--muted-foreground));
  }

  .ui-transfer-row {
    display: flex;
    cursor: pointer;
    align-items: flex-start;
    gap: var(--transfer-row-space-gap);
    border-radius: var(--transfer-row-radius);
    padding-inline: var(--transfer-row-space-inline);
    padding-block: var(--transfer-row-space-block);
    font-size: var(--transfer-row-font-size);
  }

  .ui-transfer-row-check {
    margin-block-start: var(--transfer-row-check-space-block-start);
  }

  .ui-transfer-row-body {
    min-inline-size: 0;
    flex: 1 1 0%;
  }

  .ui-transfer-row-description {
    font-size: var(--transfer-row-description-font-size);
  }

  .ui-transfer-actions {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--transfer-actions-space-gap);
  }

  .ui-transfer-action-icon {
    inline-size: var(--transfer-action-icon-size);
    block-size: var(--transfer-action-icon-size);
  }
}

@layer components {

  .ui-control-composite-field {
    display: flex;
    inline-size: 100%;
    min-inline-size: 0;
    align-items: center;
    gap: var(--control-composite-field-space-gap);
    border-radius: var(--control-radius);
    border-color: hsl(var(--input));
    background: hsl(var(--background));
    outline: none;
    transition:
      color 150ms ease,
      box-shadow 150ms ease;
  }

  .ui-control-composite-field[data-disabled] {
    pointer-events: none;
    cursor: not-allowed;
    opacity: var(--disabled-opacity);
  }

  .ui-month-picker-input {
    min-inline-size: 0;
    flex: 1 1 0%;
    background: transparent;
    font-variant-numeric: tabular-nums;
    outline: none;
  }

  .ui-month-picker-input::placeholder {
    color: hsl(var(--muted-foreground));
  }

  .ui-month-picker-input:disabled {
    cursor: not-allowed;
  }

  .ui-month-picker-icon {
    inline-size: var(--month-picker-icon-size);
    block-size: var(--month-picker-icon-size);
    flex-shrink: 0;
  }

  .ui-month-picker-separator-icon {
    inline-size: var(--month-picker-separator-icon-size);
    block-size: var(--month-picker-separator-icon-size);
    flex-shrink: 0;
    color: hsl(var(--muted-foreground));
  }

  .ui-month-picker-panel {
    --popover-surface-inline-size: auto;
    --popover-space-inset: var(--month-picker-panel-space-inset);
  }

  .ui-month-picker-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .ui-month-picker-nav-button {
    background: transparent;
    opacity: var(--month-picker-nav-rest-alpha);
  }

  .ui-month-picker-nav-button:hover {
    opacity: 1;
  }

  .ui-month-picker-nav-label {
    font-size: var(--month-picker-nav-font-size);
    font-weight: var(--font-weight-medium);
  }

  .ui-month-picker-grid {
    margin-block-start: var(--month-picker-grid-space-block-start);
    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--month-picker-grid-space-gap);
  }

  .ui-month-picker-row,
  .ui-month-picker-gridcell {
    display: contents;
  }

  .ui-month-picker-cell {
    padding-inline: var(--month-picker-cell-space-inline);
    font-weight: var(--font-weight-normal);
  }

  .ui-button--xs {
    height: var(--button-xs-height, var(--control-height-xs));
    gap: var(--button-xs-space-gap);
    padding-inline: var(--button-xs-space-inline);
    font-size: var(--button-xs-font-size);
  }

  .ui-button--default-size,
  .ui-button--md {
    padding-block: var(--button-space-block);
  }

  .ui-button--default-size:has(> svg),
  .ui-button--md:has(> svg) {
    padding-inline: var(--button-icon-space-inline-md);
  }

  .ui-button--sm:has(> svg) {
    padding-inline: var(--button-icon-space-inline-sm);
  }

  .ui-button--lg:has(> svg) {
    padding-inline: var(--button-icon-space-inline-lg);
  }

  .ui-button--xs:has(> svg) {
    padding-inline: var(--button-icon-space-inline-xs);
  }

  .ui-button-count {
    display: inline-flex;
    min-inline-size: var(--button-count-min-width);
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-pill);
    padding-inline: var(--button-count-space-inline);
    background: var(--button-count-background, hsl(var(--muted)));
    color: var(--button-count-color, hsl(var(--foreground)));
    font-size: var(--button-count-font-size);
    line-height: 1;
    font-variant-numeric: tabular-nums;
  }

  .ui-button--default .ui-button-count {
    background: var(--button-count-default-background, hsl(var(--primary-foreground)));
    color: var(--button-count-default-color, hsl(var(--primary)));
  }

  .ui-button--destructive .ui-button-count {
    background: var(--button-count-destructive-background, hsl(var(--destructive-foreground)));
    color: var(--button-count-destructive-color, hsl(var(--destructive)));
  }

  .ui-button--secondary .ui-button-count {
    background: var(--button-count-secondary-background, hsl(var(--secondary-foreground)));
    color: var(--button-count-secondary-color, hsl(var(--secondary)));
  }
}

@layer components {
  .ui-button[data-wrap] {
    --button-wrap-min-height: var(--control-height);
    height: auto;
    min-height: var(--button-wrap-min-height);
    max-inline-size: 100%;
    padding-block: var(--space-1);
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .ui-button[data-wrap][data-size="xs"] {
    --button-wrap-min-height: var(--control-height-xs);
  }
  .ui-button[data-wrap][data-size="sm"] {
    --button-wrap-min-height: var(--control-height-sm);
  }
  .ui-button[data-wrap][data-size="lg"] {
    --button-wrap-min-height: var(--control-height-lg);
  }
  .ui-button[data-align="start"] {
    justify-content: flex-start;
    text-align: start;
  }
  .ui-button[data-align="end"] {
    justify-content: flex-end;
    text-align: end;
  }
}

@layer components {

  .ui-control--filled {
    border-color: transparent;
    background-color: hsl(var(--control-variant-filled-background));
  }

  .ui-control--filled:hover:not(:disabled):not([readonly]):not([data-disabled]) {
    background-color: hsl(var(--control-variant-filled-hover-background, var(--accent)));
  }

  .ui-control--borderless {
    border-color: transparent;
    background-color: transparent;
    box-shadow: none;
  }

  .ui-control[data-status="warning"],
  .ui-control-multiline[data-status="warning"] {
    --focus-ring-color: var(--control-status-warning-outline-color, var(--text-warning));
    --focus-outline-color: var(--control-status-warning-outline-color, var(--text-warning));
    --focus-ring-glow-color: var(--control-status-warning-glow-color);
    --focus-ring-glow-alpha: var(--control-status-warning-glow-alpha);
  }

  .ui-input[data-size="lg"] {
    --control-height: var(--control-height-lg);
  }

  .ui-control-multiline[data-size="sm"] {
    --control-height: var(--control-height-sm);
  }

  .ui-control-multiline[data-size="lg"] {
    --control-height: var(--control-height-lg);
  }

  .ui-control-count {
    flex-shrink: 0;
    font-size: var(--control-count-font-size);
    color: hsl(var(--control-count-color));
    font-variant-numeric: tabular-nums;
    padding-inline-end: var(--control-count-space-inline);
  }

  .ui-control-count[data-exceeded="true"] {
    color: hsl(var(--control-count-exceeded-color, var(--text-error)));
  }

  .ui-textarea-count {
    position: absolute;
    inset-block-end: var(--textarea-count-inset-block-end);
    inset-inline-end: var(--textarea-count-inset-inline-end);
    padding-inline-end: 0;
  }

  .ui-input-group {
    display: inline-flex;
    inline-size: 100%;
    align-items: stretch;
  }

  .ui-input-addon {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    block-size: var(--control-height);
    padding-inline: var(--input-addon-padding-inline);
    font-size: var(--control-font-size);
    color: hsl(var(--input-addon-color));
    background-color: hsl(var(--input-addon-background));
    border: var(--control-border-width) solid hsl(var(--input));
    white-space: nowrap;
  }

  .ui-input-group > [data-slot="input-addon-before"] {
    border-start-start-radius: var(--control-radius);
    border-end-start-radius: var(--control-radius);
    border-inline-end: 0;
  }

  .ui-input-group > [data-slot="input-addon-after"] {
    border-start-end-radius: var(--control-radius);
    border-end-end-radius: var(--control-radius);
    border-inline-start: 0;
  }

  .ui-input-group:has(> [data-slot="input-addon-before"]) .ui-input,
  .ui-input-group:has(> [data-slot="input-addon-before"]) .ui-input-affix-wrapper {
    border-start-start-radius: 0;
    border-end-start-radius: 0;
  }

  .ui-input-group:has(> [data-slot="input-addon-after"]) .ui-input,
  .ui-input-group:has(> [data-slot="input-addon-after"]) .ui-input-affix-wrapper {
    border-start-end-radius: 0;
    border-end-end-radius: 0;
  }

  .ui-input-group[data-size="sm"] {
    --control-height: var(--control-height-sm);
  }

  .ui-input-group[data-size="lg"] {
    --control-height: var(--control-height-lg);
  }

  .ui-number-input[data-controls="off"] .ui-number-input-field {
    padding-inline-end: var(--control-padding-x);
  }

  .ui-switch[data-loading="true"] {
    cursor: progress;
  }

  .ui-switch-spinner {
    inline-size: var(--switch-spinner-size);
    block-size: var(--switch-spinner-size);
    color: hsl(var(--primary));
    animation: spin 1s linear infinite;
  }

  .ui-switch-content {
    flex: 1 1 auto;
    min-inline-size: calc(var(--switch-width) - var(--switch-thumb-size));
    order: 1;
    text-align: center;
    font-size: var(--switch-content-font-size);
    color: hsl(var(--primary-foreground));
    padding-inline: var(--switch-content-space-inline);
    line-height: 1;
  }

  .ui-switch:has(.ui-switch-content)[data-state="unchecked"] {
    background: var(--switch-unchecked-background, hsl(var(--muted-foreground)));
  }

  .ui-switch[data-state="unchecked"] .ui-switch-content {
    color: var(--switch-content-unchecked-foreground, hsl(var(--background)));
  }

  .ui-switch[data-state="checked"] .ui-switch-content {
    order: 0;
  }

  .ui-switch:has(.ui-switch-content) {
    inline-size: auto;
    min-inline-size: var(--switch-width);
  }

  .ui-switch:has(.ui-switch-content) .ui-switch-thumb {
    flex: 0 0 auto;
    order: 0;
    transform: none;
  }

  .ui-switch:has(.ui-switch-content)[data-state="checked"] .ui-switch-thumb {
    order: 1;
  }

  .ui-slider[data-has-marks="true"]:not([data-orientation="vertical"]) {
    margin-block-end: calc(
      var(--slider-mark-space-block-start) +
        var(
          --font-size-lg,
          calc(var(--font-size-base) * var(--font-size-ratio) * var(--font-size-ratio))
        )
    );
  }

  .ui-slider-marks {
    position: absolute;
    inset-inline: 0;
    inset-block-start: 100%;
    margin-block-start: var(--slider-mark-space-block-start);
    block-size: 0;
  }

  .ui-slider[data-orientation="vertical"] .ui-slider-marks {
    inset-block: 0;
    inset-inline-start: 100%;
    inset-inline-end: auto;
    margin-block-start: 0;
    margin-inline-start: var(--slider-mark-space-block-start);
    inline-size: 0;
    block-size: auto;
  }

  .ui-slider-mark {
    position: absolute;
    inset-inline-start: var(--slider-mark-offset-inline, 0%);
    display: flex;
    justify-content: center;
    inline-size: 0;
    font-size: var(--slider-mark-font-size);
    color: hsl(var(--slider-mark-color));
    white-space: nowrap;
    cursor: pointer;
  }

  .ui-slider[data-orientation="vertical"] .ui-slider-mark {
    inset-inline-start: 0;
    inset-block-end: var(--slider-mark-offset-block, 0%);
    align-items: center;
    justify-content: flex-start;
    inline-size: auto;
    block-size: 0;
  }

  .ui-slider-dot {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: var(--slider-mark-offset-inline, 0%);
    inline-size: var(--slider-dot-size);
    block-size: var(--slider-dot-size);
    margin-block-start: calc(var(--slider-dot-size) / -2);
    margin-inline-start: calc(var(--slider-dot-size) / -2);
    border-radius: var(--radius-pill);
    background: hsl(var(--slider-dot-background));
    border: var(--control-border-width) solid hsl(var(--slider-dot-border-color));
  }

  .ui-slider[data-orientation="vertical"] .ui-slider-dot {
    inset-block-start: auto;
    inset-block-end: var(--slider-mark-offset-block, 0%);
    inset-inline-start: 50%;
    margin-block-start: 0;
    margin-block-end: calc(var(--slider-dot-size) / -2);
  }

  .ui-slider-dot[data-active="true"] {
    border-color: hsl(var(--slider-dot-active-border-color, var(--primary)));
  }

  .ui-slider-tooltip {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity 150ms;
  }

  .ui-slider-tooltip[data-placement="top"],
  .ui-slider-tooltip[data-placement="bottom"] {
    inset-inline-start: 50%;
    inline-size: 0;
  }

  .ui-slider-tooltip[data-placement="top"] {
    inset-block-end: 100%;
    padding-block-end: var(--slider-tooltip-offset-block);
  }

  .ui-slider-tooltip[data-placement="bottom"] {
    inset-block-start: 100%;
    padding-block-start: var(--slider-tooltip-offset-block);
  }

  .ui-slider-tooltip[data-placement="left"],
  .ui-slider-tooltip[data-placement="right"] {
    inset-block-start: 50%;
    block-size: 0;
  }

  .ui-slider-tooltip[data-placement="left"] {
    inset-inline-end: 100%;
    padding-inline-end: var(--slider-tooltip-offset-block);
  }

  .ui-slider-tooltip[data-placement="right"] {
    inset-inline-start: 100%;
    padding-inline-start: var(--slider-tooltip-offset-block);
  }

  .ui-slider-tooltip-content {
    padding-inline: var(--slider-tooltip-padding-inline);
    border-radius: var(--slider-tooltip-radius);
    background: hsl(var(--slider-tooltip-background));
    color: hsl(var(--slider-tooltip-color));
    font-size: var(--slider-tooltip-font-size);
    white-space: nowrap;
  }

  .ui-slider-thumb:is([data-hovered], [data-focus-visible], [data-dragging])
    .ui-slider-tooltip:not([data-open="false"]),
  .ui-slider-tooltip[data-open="true"] {
    opacity: 1;
  }

  .ui-rating-symbol {
    position: relative;
    display: inline-flex;
  }

  .ui-rating-star-half {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    inline-size: 50%;
    z-index: 1;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
  }

  .ui-rating-star-half-filled {
    color: hsl(var(--rating-star-filled-color, var(--warning)));
  }

  .ui-radio-button-bar {
    display: inline-flex;
    align-items: stretch;
  }

  .ui-radio-button {

    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    block-size: var(--control-height);
    padding-inline: var(--control-padding-x);
    font-size: var(--control-font-size);
    color: hsl(var(--choice-button-color));
    background: hsl(var(--choice-button-background));
    border: var(--control-border-width) solid hsl(var(--choice-button-border-color));
    border-inline-start-width: 0;
    cursor: pointer;
  }

  .ui-radio-button:first-child {
    border-inline-start-width: var(--control-border-width);
    border-start-start-radius: var(--control-radius);
    border-end-start-radius: var(--control-radius);
  }

  .ui-radio-button:last-child {
    border-start-end-radius: var(--control-radius);
    border-end-end-radius: var(--control-radius);
  }

  .ui-radio-button[data-state="checked"] {
    color: hsl(var(--choice-button-selected-color, var(--primary)));
    border-color: hsl(var(--choice-button-selected-border-color, var(--primary)));
  }

  .ui-radio-button-bar[data-button-style="solid"] .ui-radio-button[data-state="checked"] {
    color: hsl(var(--choice-button-solid-color, var(--primary-foreground)));
    background: hsl(var(--choice-button-solid-background, var(--primary)));
    border-color: hsl(var(--choice-button-solid-background, var(--primary)));
  }

  .ui-radio-button[data-disabled] {
    cursor: not-allowed;
    opacity: var(--disabled-opacity);
  }

  .ui-segmented[data-block="true"] {
    display: flex;
    inline-size: 100%;
  }

  .ui-segmented[data-block="true"]:not([data-orientation="vertical"]) > .ui-segmented-item {
    flex: 1 1 0;
    min-inline-size: 0;
    justify-content: center;
  }

  .ui-segmented:not([data-orientation="vertical"]) {
    row-gap: var(--segmented-track-padding);
  }

  .ui-segmented[data-orientation="vertical"] {
    flex-direction: column;
  }

  .ui-segmented[data-orientation="vertical"] > .ui-segmented-item {
    block-size: var(--control-height);
    justify-content: flex-start;
  }

  .ui-segmented[data-size="xs"] {
    --control-height: var(--control-height-xs);
    --segmented-item-padding-inline: var(--segmented-xs-item-padding-inline);
    font-size: var(--segmented-xs-font-size);
  }

  .ui-segmented[data-size="sm"] {
    --control-height: var(--control-height-sm);
  }

  .ui-segmented[data-size="lg"] {
    --control-height: var(--control-height-lg);
  }
}