/* docara-shell-source: runtime/component/kbd/css/kbd.css */
@layer sf.components {
  :where(kbd:not(.sf-kbd--group), .sf-kbd:not(.sf-kbd--group)) {
    --sf-kbd--min-block-size: var(--sf-text-height-1\/3);
    --sf-kbd--min-inline-size: var(--sf-text-height-1\/3);
    --sf-kbd--padding-block: var(--sf-space-1\/4);
    --sf-kbd--padding-inline: var(--sf-space-1\/2);
    --sf-kbd--color: var(--sf-on-surface);
    --sf-kbd--background: var(--sf-surface-container);
    --sf-on-surface-variant: var(--sf-on-surface-container--variant);
    --sf-kbd--border-color: var(--sf-outline-variant);
    --sf-kbd--border-width: var(--sf-px);
    --sf-kbd--radius: var(--sf-radius--ui);
    --sf-kbd--font-family: var(--sf-mono);
    --sf-kbd--font-size: var(--sf-text-size-1\/3);
    --sf-kbd--font-weight: var(--sf-font-weight-medium);
    --sf-kbd--line-height: var(--sf-text-height-1\/3);
    display: inline-flex;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    min-height: var(--sf-kbd--min-block-size);
    min-block-size: var(--sf-kbd--min-block-size);
    min-width: var(--sf-kbd--min-inline-size);
    min-inline-size: var(--sf-kbd--min-inline-size);
    padding-top: var(--sf-kbd--padding-block);
    padding-bottom: var(--sf-kbd--padding-block);
    padding-block: var(--sf-kbd--padding-block);
    padding-left: var(--sf-kbd--padding-inline);
    padding-right: var(--sf-kbd--padding-inline);
    padding-inline: var(--sf-kbd--padding-inline);
    color: var(--sf-kbd--color);
    background: var(--sf-kbd--background);
    border: var(--sf-kbd--border-width) solid var(--sf-kbd--border-color);
    border-radius: var(--sf-kbd--radius);
    font-family: var(--sf-kbd--font-family);
    font-size: var(--sf-kbd--font-size);
    font-weight: var(--sf-kbd--font-weight);
    line-height: var(--sf-kbd--line-height);
    unicode-bidi: -webkit-isolate;
    unicode-bidi: -moz-isolate;
    unicode-bidi: isolate;
    vertical-align: baseline;
    white-space: nowrap;
  }
  kbd[\:has\(\%3E\%20kbd\)],
  .sf-kbd--group {
    display: inline-flex;
    box-sizing: border-box;
    align-items: center;
    gap: var(--sf-space-1\/4);
    min-height: var(--sf-0);
    min-block-size: var(--sf-0);
    min-width: var(--sf-0);
    min-inline-size: var(--sf-0);
    margin: var(--sf-0);
    padding: var(--sf-0);
    color: inherit;
    background: var(--sf-transparent);
    border: none;
    border-radius: var(--sf-0);
    font: inherit;
    line-height: inherit;
    unicode-bidi: -webkit-isolate;
    unicode-bidi: -moz-isolate;
    unicode-bidi: isolate;
    vertical-align: baseline;
    white-space: nowrap;
  }
  kbd[\:has\(\%3E\%20kbd\)],
  .sf-kbd--group {
    display: inline-flex;
    box-sizing: border-box;
    align-items: center;
    gap: var(--sf-space-1\/4);
    min-height: var(--sf-0);
    min-height: var(--sf-0);
    min-block-size: var(--sf-0);
    min-width: var(--sf-0);
    min-width: var(--sf-0);
    min-inline-size: var(--sf-0);
    margin: var(--sf-0);
    padding: var(--sf-0);
    color: inherit;
    background: var(--sf-transparent);
    border: none;
    border-radius: var(--sf-0);
    font: inherit;
    line-height: inherit;
    unicode-bidi: -webkit-isolate;
    unicode-bidi: -moz-isolate;
    unicode-bidi: isolate;
    vertical-align: baseline;
    white-space: nowrap;
  }
  kbd:has(> kbd),
  .sf-kbd--group {
    display: inline-flex;
    box-sizing: border-box;
    align-items: center;
    gap: var(--sf-space-1\/4);
    min-height: var(--sf-0);
    min-block-size: var(--sf-0);
    min-width: var(--sf-0);
    min-inline-size: var(--sf-0);
    margin: var(--sf-0);
    padding: var(--sf-0);
    color: inherit;
    background: var(--sf-transparent);
    border: none;
    border-radius: var(--sf-0);
    font: inherit;
    line-height: inherit;
    unicode-bidi: -webkit-isolate;
    unicode-bidi: -moz-isolate;
    unicode-bidi: isolate;
    vertical-align: baseline;
    white-space: nowrap;
  }
  @media (forced-colors: active) {
    :where(kbd:not(.sf-kbd--group), .sf-kbd:not(.sf-kbd--group)) {
      border-color: CanvasText;
    }
  }
}

/* docara-shell-source: smart/smart/inputs/css/inputs.css */
@layer sf.components {
  .sf-input.sf-input--bordered > .sf-input-field > .sf-input-hint > sf-icon > .sf-icon, .sf-input.sf-input--filled > .sf-input-field > .sf-input-hint > sf-icon > .sf-icon {
    --sf-icon--color: var(--sf-on-surface-variant);
  }
  .sf-input.sf-input--size-1 > .sf-input-field > .sf-input-hint > sf-icon > .sf-icon, .sf-input.sf-input--size-1 > .sf-input-field > .sf-input-left > sf-icon > .sf-icon {
    --sf-icon--font-size: var(--sf-text-height-1);
    --sf-icon--height: var(--sf-text-height-1);
    --sf-icon--width: var(--sf-text-height-1);
  }
  .sf-input.sf-input--size-2 > .sf-input-field > .sf-input-hint > sf-icon > .sf-icon, .sf-input.sf-input--size-2 > .sf-input-field > .sf-input-left > sf-icon > .sf-icon {
    --sf-icon--font-size: var(--sf-text-height-2);
    --sf-icon--height: var(--sf-text-height-2);
    --sf-icon--width: var(--sf-text-height-2);
  }
  .sf-input.sf-input--size-1\/2 > .sf-input-field > .sf-input-hint > sf-icon > .sf-icon, .sf-input.sf-input--size-1\/2 > .sf-input-field > .sf-input-left > sf-icon > .sf-icon {
    --sf-icon--font-size: var(--sf-text-height-1\/2);
    --sf-icon--height: var(--sf-text-height-1\/2);
    --sf-icon--width: var(--sf-text-height-1\/2);
  }
  .sf-input.error > .sf-input-field > .sf-input-hint > sf-icon > .sf-icon {
    --sf-icon--color: var(--sf-error);
  }
}
@layer sf.states {
  .sf-input[\:has\(input\:enabled\:not\(\:disabled\)\:not\(.disabled\)\:hover\)] > .sf-input-field > .sf-input-hint > sf-icon > .sf-icon, .sf-input[\:has\(input\:enabled\:not\(\:disabled\)\:not\(.disabled\)\:active\)] > .sf-input-field > .sf-input-hint > sf-icon > .sf-icon, .sf-input[\:has\(input\:enabled\:not\(\:disabled\)\:not\(.disabled\).focus-visible\)] > .sf-input-field > .sf-input-hint > sf-icon > .sf-icon {
    --sf-icon--color: var(--sf-on-surface-variant);
  }
  .sf-input:has(input:enabled:not(:disabled):not(.disabled):hover) > .sf-input-field > .sf-input-hint > sf-icon > .sf-icon, .sf-input:has(input:enabled:not(:disabled):not(.disabled):active) > .sf-input-field > .sf-input-hint > sf-icon > .sf-icon, .sf-input:has(input:enabled:not(:disabled):not(.disabled).focus-visible) > .sf-input-field > .sf-input-hint > sf-icon > .sf-icon {
    --sf-icon--color: var(--sf-on-surface-variant);
  }
  .sf-input[\:has\(input\:enabled\:not\(\:disabled\)\:not\(.disabled\)\:hover\)] > .sf-input-field > .sf-input-hint > sf-icon > .sf-icon, .sf-input[\:has\(input\:enabled\:not\(\:disabled\)\:not\(.disabled\)\:active\)] > .sf-input-field > .sf-input-hint > sf-icon > .sf-icon, .sf-input[\:has\(input\:enabled\:not\(\:disabled\)\:not\(.disabled\)\:focus-visible\)] > .sf-input-field > .sf-input-hint > sf-icon > .sf-icon {
    --sf-icon--color: var(--sf-on-surface-variant);
  }
  .sf-input:has(input:enabled:not(:disabled):not(.disabled):hover) > .sf-input-field > .sf-input-hint > sf-icon > .sf-icon, .sf-input:has(input:enabled:not(:disabled):not(.disabled):active) > .sf-input-field > .sf-input-hint > sf-icon > .sf-icon, .sf-input:has(input:enabled:not(:disabled):not(.disabled):focus-visible) > .sf-input-field > .sf-input-hint > sf-icon > .sf-icon {
    --sf-icon--color: var(--sf-on-surface-variant);
  }
  .sf-input[\:has\(input\:disabled\)] > .sf-input-field > .sf-input-hint > sf-icon > .sf-icon, .sf-input[\:has\(input\:disabled\)] > .sf-input-field > .sf-input-left > sf-icon > .sf-icon {
    --sf-icon--color: var(--sf-on-disable);
  }
  .sf-input:has(input:disabled) > .sf-input-field > .sf-input-hint > sf-icon > .sf-icon, .sf-input:has(input:disabled) > .sf-input-field > .sf-input-left > sf-icon > .sf-icon {
    --sf-icon--color: var(--sf-on-disable);
  }
}