.adm-search-bar {
  --height: 64px;
  --padding-left: 16px;
  --background: var(--ldkj-color-fill-content);
  --border-radius: 12px;
  --placeholder-color: var(--ldkj-color-weak);
  ---placeholder-color: var(--placeholder-color);
  display: flex;
  justify-content: center;
  align-items: center;
  height: var(--height);
}

.adm-search-bar .adm-search-bar-input-box {
  flex: auto;
  background: var(--background);
  border-radius: var(--border-radius);
  border: solid 2px transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-left: var(--padding-left);
}

.adm-search-bar .adm-search-bar-input-box .adm-search-bar-input-box-icon {
  flex: none;
  color: var(--ldkj-color-light);
  font-size: var(--ldkj-font-size-8);
}

.adm-search-bar .adm-search-bar-input-box .adm-search-bar-input {
  flex: auto;
  padding: 8px 16px 8px 8px;
  height: calc(var(--height) - 4px);
  box-sizing: border-box;
}

.adm-search-bar .adm-search-bar-input-box .adm-search-bar-input.adm-input {
  --placeholder-color: var(---placeholder-color);
  --font-size: var(--ldkj-font-size-7);
}

.adm-search-bar .adm-search-bar-input-box .adm-search-bar-input .adm-input-element {
  line-height: 38px;
}

.adm-search-bar .adm-search-bar-input-box .adm-search-bar-input.adm-search-bar-input-without-icon {
  padding-left: 16px;
}

.adm-search-bar .adm-search-bar-suffix {
  flex: none;
  margin-left: 8px;
}

.adm-search-bar .adm-search-bar-cancel-button.adm-button {
  padding: 6px 24px;
}

.adm-search-bar-active .adm-input.adm-input.adm-input {
  --placeholder-color: var(--ldkj-color-light);
}

.adm-search-bar-active .adm-search-bar-input-box {
  border-color: var(--ldkj-color-primary);
  background: var(--ldkj-color-background);
}