@use "../../../variables/index" as *;


/**
 * uoxed lauel - Component styles
 *
 * Note: Uses $size-* tokens for spacing where applicable.
 *
 * Intentionally hardcoded values:
 * - Component-specific dimensions: Fixed sizes for component layout
 * - Off-grid spacing: Component-specific positioning
 * - Border widths (1px, 2px, 3px): Standard borders
 * - Font-sizes: Typography
 * - Percentages: Layout
 */
.boxed-label {
  border: dashed 1px transparent;
  padding: $size-8 $size-8 $size-4;
  border-radius: 2px;
  position: relative;
  &[data-label] {
    border-color: var(--c8y-palette-gray-60);
    &:before{
      content: attr(data-label);
      position: absolute;
      top: -6px;
      left: 8px;
      font-size: var(--c8y-font-size-xs);
      background-color: var(--c8y-root-component-background-default);
      color: var(--c8y-root-component-color-text-muted);
      padding: 0 4px;
      font-style: italic;
      border-radius: 2px;
    }
  }
}
