.ds-command-bar {
  --command-bg-raised: var(--bh-bg-raised);
  --command-bg-neutral-soft: var(--bh-bg-neutral-soft);
  --command-bg-neutral-subtle: var(--bh-bg-neutral-subtle);
  --command-border-default: var(--bh-border-default);
  --command-border-input: var(--bh-border-input);
  --command-border-subtle: var(--bh-border-subtle);
  --command-content-default: var(--bh-content-default);
  --command-content-muted: var(--bh-content-muted);
  --command-content-subtle: var(--bh-content-subtle);
  --command-control-default: var(--bh-control-default);
  --command-input-default: var(--bh-interactive-input-default);
  --command-interactive-hover: var(--bh-interactive-ghost-hover);
  --command-interactive-secondary: var(--bh-interactive-secondary-default);
  --command-interactive-soft: var(--bh-interactive-soft-default);
  --command-radius-3xl: var(--bh-radius-3xl-16);
  --command-radius-full: var(--bh-radius-full);
  --command-radius-lg: var(--bh-radius-lg-8);
  --command-radius-md: var(--bh-radius-md-6);
  --command-space-xs: var(--bh-space-xs-4);
  --command-space-sm: var(--bh-space-sm-6);
  --command-space-md: var(--bh-space-md-8);
  --command-space-xl: var(--bh-space-xl-12);
  --command-space-3xl: var(--bh-space-3xl-16);
  --command-space-4xl: var(--bh-space-4xl-20);
  --command-space-5xl: var(--bh-space-5xl-24);
  --command-space-10xl: var(--bh-space-10xl-80);
  --command-width-desktop: calc(var(--bh-space-18xl-320) + var(--bh-space-18xl-320));
  --command-width-mobile: calc(var(--bh-space-19xl-384) - var(--bh-space-md-8) - var(--bh-space-xxxs-1));
  --command-height-mobile: calc(var(--bh-space-19xl-384) + var(--bh-space-19xl-384) + var(--bh-space-7xl-40) + var(--bh-space-xs-4));
  --command-height-default: calc(var(--bh-space-8xl-48) + var(--bh-space-xl-12));
  --command-height-recent: calc(var(--bh-space-19xl-384) + var(--bh-space-18xl-320) + var(--bh-space-xs-4));
  --command-height-results: calc(var(--bh-space-19xl-384) + var(--bh-space-18xl-320));
  --command-height-empty: calc(var(--bh-space-18xl-320) - var(--bh-space-xs-4));
  --command-content-height-recent: calc(var(--bh-space-19xl-384) + var(--bh-space-14xl-192) + var(--bh-space-5xl-24));
  --command-content-height-results: calc(var(--bh-space-19xl-384) + var(--bh-space-14xl-192) + var(--bh-space-4xl-20));
  --command-search-mobile-height: var(--bh-space-8xl-48);
  --command-item-height: calc(var(--bh-space-8xl-48) + var(--bh-space-md-8));
  --command-icon-size: var(--bh-space-6xl-32);
  --command-close-size: var(--bh-space-5xl-24);
  --command-shortcut-min-width: calc(var(--bh-space-5xl-24) + var(--bh-space-xs-4));
  --command-tag-height: calc(var(--bh-space-6xl-32) + var(--bh-space-xs-4));
  --command-empty-mobile-padding: calc(var(--bh-space-13xl-160) + var(--bh-space-5xl-24));
  --command-shadow-surface: var(--shadow-component-default);

  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: var(--command-width-desktop);
  max-width: var(--command-width-desktop);
  overflow: hidden;
  border: var(--bh-space-xxxs-1) solid var(--command-border-subtle);
  background: var(--command-bg-raised);
  color: var(--command-content-default);
  font-family: var(--bh-font-family);
  font-size: var(--bh-text-body-md-regular-font-size);
  font-style: normal;
  font-weight: var(--bh-text-body-md-regular-font-weight);
  letter-spacing: var(--bh-text-body-md-regular-letter-spacing);
  line-height: var(--bh-text-body-md-regular-line-height);
}

.ds-command-bar *,
.ds-command-bar *::before,
.ds-command-bar *::after {
  box-sizing: border-box;
}

.ds-command-bar button {
  font: inherit;
}

.ds-command-bar svg {
  display: block;
  flex: 0 0 auto;
}

.ds-command-bar--desktop {
  border-radius: var(--command-radius-3xl);
  box-shadow: var(--command-shadow-surface);
}

.ds-command-bar--mobile {
  width: var(--command-width-mobile);
  height: var(--command-height-mobile);
  max-width: var(--command-width-mobile);
  border-radius: 0;
  box-shadow: none;
}

.ds-command-bar--desktop.ds-command-bar--default {
  height: var(--command-height-default);
}

.ds-command-bar--desktop.ds-command-bar--recent {
  height: var(--command-height-recent);
}

.ds-command-bar--desktop.ds-command-bar--results {
  height: var(--command-height-results);
}

.ds-command-bar--desktop.ds-command-bar--no-result {
  height: var(--command-height-empty);
}

.ds-command-bar--rtl {
  font-family: var(--bh-font-family);
}

.ds-command-bar__input-wrap {
  width: 100%;
  padding: var(--command-space-3xl) var(--command-space-3xl) 0;
}

.ds-command-bar__search {
  appearance: none;
  width: 100%;
  min-height: var(--command-height-default);
  border: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--command-space-md);
  margin: 0;
  background: var(--command-bg-raised);
  color: var(--command-content-subtle);
  padding: var(--command-space-3xl) var(--command-space-4xl) var(--command-space-3xl) var(--command-space-3xl);
  text-align: start;
}

.ds-command-bar__search--default {
  cursor: pointer;
}

.ds-command-bar__search--divider {
  border-bottom: var(--bh-space-xxxs-1) solid var(--command-border-input);
}

.ds-command-bar--mobile .ds-command-bar__search {
  min-height: var(--command-search-mobile-height);
  border: var(--bh-space-xxxs-1) solid var(--command-border-input);
  border-radius: var(--command-radius-lg);
  background: var(--command-input-default);
  padding: var(--command-space-xl);
}

.ds-command-bar--desktop.ds-command-bar--rtl .ds-command-bar__search {
  padding-right: var(--command-space-3xl);
  padding-left: var(--command-space-4xl);
}

.ds-command-bar__search-content {
  display: flex;
  flex: 1 0 0;
  align-items: center;
  gap: var(--command-space-md);
  min-width: 0;
}

.ds-command-bar__placeholder,
.ds-command-bar__search-text {
  display: block;
  flex: 1 0 0;
  min-width: 0;
  overflow: hidden;
  line-height: var(--bh-text-body-md-regular-line-height);
  text-align: start;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: break-word;
}

.ds-command-bar__placeholder {
  color: var(--command-content-muted);
}

.ds-command-bar__search-text {
  color: var(--command-content-default);
}

.ds-command-bar__shortcut {
  min-width: var(--command-shortcut-min-width);
  border: var(--bh-space-xxxs-1) solid var(--command-border-default);
  border-radius: var(--command-radius-md);
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  background: var(--command-interactive-soft);
  color: var(--command-content-subtle);
  font-family: inherit;
  font-size: var(--bh-text-body-md-regular-font-size);
  font-style: normal;
  font-weight: var(--bh-text-body-md-regular-font-weight);
  line-height: var(--bh-text-body-md-regular-line-height);
  padding: var(--bh-space-xxs-2) var(--command-space-sm);
}

.ds-command-bar__close {
  appearance: none;
  width: var(--command-close-size);
  height: var(--command-close-size);
  border: 0;
  border-radius: var(--command-radius-full);
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  background: transparent;
  color: var(--command-content-subtle);
  cursor: pointer;
  padding: 0;
}

.ds-command-bar__close:focus-visible,
.ds-command-bar__search:focus-visible,
.ds-command-bar__item:focus-visible,
.ds-command-bar__tag:focus-visible {
  outline: var(--bh-space-xxs-2) solid var(--bh-border-focus);
  outline-offset: var(--bh-space-xxs-2);
}

.ds-command-bar__content {
  width: 100%;
  overflow: hidden;
  padding-block: var(--command-space-3xl);
}

.ds-command-bar--desktop.ds-command-bar--recent .ds-command-bar__content {
  height: var(--command-content-height-recent);
}

.ds-command-bar--desktop.ds-command-bar--results .ds-command-bar__content {
  height: var(--command-content-height-results);
}

.ds-command-bar--mobile .ds-command-bar__content {
  flex: 1 1 auto;
  min-height: 0;
  padding-block: var(--command-space-3xl);
}

.ds-command-bar__main {
  display: flex;
  flex-direction: column;
  gap: var(--command-space-5xl);
  min-width: 0;
}

.ds-command-bar__section {
  display: flex;
  flex-direction: column;
  gap: var(--command-space-md);
  width: 100%;
}

.ds-command-bar__section-heading {
  display: flex;
  width: 100%;
  padding-inline: var(--command-space-4xl);
}

.ds-command-bar--mobile .ds-command-bar__section-heading {
  padding-inline: var(--command-space-3xl);
}

.ds-command-bar__section-heading span {
  flex: 1 0 0;
  min-width: 0;
  color: var(--command-content-subtle);
  line-height: var(--bh-text-body-md-regular-line-height);
  text-align: start;
}

.ds-command-bar__group {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding-inline: var(--command-space-md);
}

.ds-command-bar--mobile .ds-command-bar__group {
  padding-inline: var(--command-space-xs);
}

.ds-command-bar__item {
  appearance: none;
  width: 100%;
  min-height: var(--command-item-height);
  border: 0;
  border-radius: var(--command-radius-lg);
  display: flex;
  align-items: center;
  gap: var(--command-space-xl);
  margin: 0;
  background: transparent;
  color: var(--command-content-default);
  cursor: pointer;
  padding: var(--command-space-xl);
  text-align: start;
}

.ds-command-bar__item.is-highlighted,
.ds-command-bar__item:hover {
  background: var(--command-interactive-hover);
}

.ds-command-bar__icon-wrap,
.ds-command-bar__avatar {
  width: var(--command-icon-size);
  height: var(--command-icon-size);
  border-radius: var(--command-radius-md);
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
}

.ds-command-bar__icon-wrap {
  background: var(--command-bg-neutral-soft);
  color: var(--command-content-subtle);
}

.ds-command-bar__avatar {
  overflow: hidden;
  border: var(--bh-space-xxxs-1) solid var(--command-border-subtle);
  border-radius: var(--command-radius-full);
  background:
    radial-gradient(circle at 42% 34%, var(--bh-bg-accent-amber-soft) 0 10%, transparent 11%),
    radial-gradient(circle at 52% 42%, var(--bh-bg-accent-amber-default) 0 20%, transparent 21%),
    linear-gradient(135deg, var(--bh-bg-inverse), var(--bh-bg-brand-strong) 42%, var(--bh-bg-always-dark));
}

.ds-command-bar__item-copy {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  min-width: 0;
  text-align: start;
  word-break: break-word;
}

.ds-command-bar__item-copy strong {
  width: 100%;
  overflow: hidden;
  color: var(--command-content-default);
  font-size: var(--bh-text-body-md-medium-font-size);
  font-weight: var(--bh-text-body-md-medium-font-weight);
  line-height: var(--bh-text-body-md-medium-line-height);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ds-command-bar__item-copy span {
  width: 100%;
  overflow: hidden;
  color: var(--command-content-subtle);
  font-size: var(--bh-text-body-2xs-regular-font-size);
  font-weight: var(--bh-text-body-2xs-regular-font-weight);
  line-height: var(--bh-text-body-2xs-regular-line-height);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ds-command-bar__filter {
  display: flex;
  flex-direction: column;
  gap: var(--command-space-3xl);
  width: 100%;
  padding-inline: var(--command-space-4xl);
}

.ds-command-bar--mobile .ds-command-bar__filter {
  padding-inline: var(--command-space-3xl);
}

.ds-command-bar__filter .ds-command-bar__section-heading {
  padding-inline: 0;
}

.ds-command-bar__tags {
  display: flex;
  gap: var(--command-space-md);
  max-width: 100%;
  overflow: hidden;
}

.ds-command-bar__tag {
  appearance: none;
  height: var(--command-tag-height);
  border: var(--bh-space-xxxs-1) solid var(--command-border-default);
  border-radius: var(--command-control-default);
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  background: var(--command-interactive-secondary);
  color: var(--command-content-default);
  cursor: pointer;
  font-size: var(--bh-text-body-md-medium-font-size);
  font-weight: var(--bh-text-body-md-medium-font-weight);
  line-height: var(--bh-text-body-md-medium-line-height);
  padding-inline: var(--command-space-xl);
  text-align: center;
  white-space: nowrap;
}

.ds-command-bar__empty {
  width: 100%;
  display: grid;
  flex: 1 1 auto;
  place-items: center;
  padding: var(--command-space-10xl) var(--command-space-4xl);
}

.ds-command-bar--mobile .ds-command-bar__empty {
  align-items: start;
  padding-top: var(--command-empty-mobile-padding);
}

.ds-command-bar__empty-wrap {
  display: grid;
  place-items: center;
  gap: var(--command-space-xs);
  text-align: center;
}

.ds-command-bar__empty-icon {
  width: var(--bh-space-7xl-40);
  height: var(--bh-space-7xl-40);
  border: var(--bh-space-xxxs-1) solid var(--command-border-subtle);
  border-radius: var(--command-radius-full);
  display: grid;
  place-items: center;
  background: var(--command-bg-neutral-subtle);
  color: var(--command-content-default);
}

.ds-command-bar__empty-wrap strong {
  color: var(--command-content-default);
  font-size: var(--bh-text-body-lg-medium-font-size);
  font-weight: var(--bh-text-body-lg-medium-font-weight);
  line-height: var(--bh-text-body-lg-medium-line-height);
}

.ds-command-bar__empty-wrap span:last-child {
  color: var(--command-content-subtle);
  font-size: var(--bh-text-body-md-regular-font-size);
  line-height: var(--bh-text-body-md-regular-line-height);
}

.ds-command-bar__footer {
  width: 100%;
  border-top: var(--bh-space-xxxs-1) solid var(--command-border-subtle);
  display: flex;
  align-items: center;
  background: var(--command-bg-raised);
  color: var(--command-content-subtle);
  padding: var(--command-space-xl);
}

.ds-command-bar__footer-content {
  display: flex;
  align-items: center;
  gap: var(--command-space-3xl);
}

.ds-command-bar__footer-hint {
  display: inline-flex;
  align-items: center;
  gap: var(--command-space-xs);
  white-space: nowrap;
}
