/*!
 * @file searchbox_info.css
 * @brief Searchbox info message styling for Shibuya theme
 * @details Styles the informational message for multi-tab search behavior
 *          when breathe post-processing is enabled (hal_breathe)
 * @author STMicroelectronics
 * @copyright Copyright (c) 2026 STMicroelectronics.
 *            All rights reserved.
 *            This software is licensed under SLA0044 terms that can be found at:
 *            https://www.st.com/SLA0044
 *            or in the LICENSE.md file in the root directory of this software component.
 */

/* ============================================
   SEARCH RESULTS PAGE - Always visible info
   ============================================ */

.searchbox-info.search-page-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
  margin-bottom: 1rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--sy-c-text-light);
  background-color: var(--sy-c-bg-soft);
  border: 1px solid var(--sy-c-border);
  border-radius: 6px;
  max-width: 100%;
}

.searchbox-info-icon {
  flex-shrink: 0;
  font-size: 1rem;
}

.searchbox-info-text {
  flex: 1;
}

/* Light mode colors for search page info */
.light .searchbox-info.search-page-info {
  color: #555;
  background-color: #f8f9fa;
  border-color: #dee2e6;
}

/* Dark mode colors for search page info */
.dark .searchbox-info.search-page-info {
  color: #b0b0b0;
  background-color: #1e1e1e;
  border-color: #3a3a3a;
}

/* ============================================
   FRONT PAGE - Tooltip on hover
   ============================================ */

.searchbox-wrapper {
  position: relative;
  display: inline-block;
  width: 100%;
}

.searchbox-tooltip {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  display: none;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.82rem;
  line-height: 1.4;
  white-space: nowrap;
  color: #fff;
  background-color: #333;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  pointer-events: none;
}

/* Arrow pointing up to searchbox */
.searchbox-tooltip::after {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-bottom-color: #333;
}

.searchbox-tooltip-icon {
  flex-shrink: 0;
  font-size: 1rem;
}

.searchbox-tooltip-text {
  flex: 1;
}

/* Show tooltip on hover */
.searchbox-wrapper:hover .searchbox-tooltip,
.searchbox-wrapper:focus-within .searchbox-tooltip {
  display: flex;
}

/* Dark mode tooltip colors */
.dark .searchbox-tooltip {
  background-color: #2a2a2a;
  color: #e0e0e0;
}

.dark .searchbox-tooltip::after {
  border-bottom-color: #2a2a2a;
}

/* ============================================
   RESPONSIVE BEHAVIOR
   ============================================ */

/* Adjust tooltip for smaller screens */
@media (max-width: 768px) {
  .searchbox-tooltip {
    white-space: normal;
    max-width: 280px;
    left: 0;
    right: 0;
    margin: 0 auto;
    transform: translateY(8px);
  }
}

/* Very small screens - reduce sizes */
@media (max-width: 380px) {
  .searchbox-info.search-page-info {
    font-size: 0.75rem;
    padding: 0.4rem 0.6rem;
  }

  .searchbox-tooltip {
    font-size: 0.75rem;
    padding: 0.4rem 0.6rem;
    max-width: 240px;
  }
}

