/**
 * Project Sidewalk API Documentation - Raw Labels Component Styles
 *
 * Contains styles specific to the Raw Labels component and works in conjunction with the main api-docs.css file.
 */

/* Uses the .map-container class from api-docs.css */
#raw-labels-preview {
  width: 100%;
  height: 500px;
  margin: var(--space-lg) 0;
  border: 1px solid var(--color-border-light);
  border-radius: var(--border-radius);
  overflow: hidden;
  position: relative;
}

/* No labels message */
.no-labels-message {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--color-neutral-white);
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  z-index: var(--z-index-dropdown);
}

/* Responsive adjustments: var(--breakpoint-sm)). */
@media (width <= 768px) {
  #raw-labels-preview {
    height: 400px;
  }
}