@use "../../../styles/mixins/scrollbar" as *;

.EmbeddedSearchH5 {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: var(--uikit-bg-color-operate);
  color: var(--uikit-text-color-primary);
}

// Search bar
.EmbeddedSearchH5__bar {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  gap: 10px;
  flex-shrink: 0;
}

.EmbeddedSearchH5__input {
  flex: 1;
  min-width: 0;
}

.EmbeddedSearchH5__clear {
  display: flex;
  align-items: center;
  cursor: pointer;
}

// Status line (loading / error / empty)
.EmbeddedSearchH5__status {
  padding: 16px;
  font-size: 14px;
  text-align: center;
  color: var(--uikit-text-color-secondary);

  &--error {
    color: var(--uikit-text-color-error);
  }
}

// Result count summary — centered text with decorative dashes on both sides
.EmbeddedSearchH5__count {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px calc(20%);
  font-size: 12px;
  color: var(--uikit-text-color-secondary);

  &::before,
  &::after {
    content: '';
    flex: 1;
    height: 1px;
    background-color: var(--uikit-stroke-color-primary);
  }
}

// Scrollable result list
.EmbeddedSearchH5__results {
  flex: 1;
  @include scrollbar-default;
}