/**
 * box.css
 *
 * The "Swiss Army Knife" utility component.
 * ------------------------------------------------------------------------------
 * This component provides a declarative way to control dozens of CSS
 * properties via HTML attributes. It's perfect for one-off layouts,
 * spacers, and custom-styled containers without writing new CSS.
 *
 * @feature {attr() Level 5} - Extensively uses `attr()` with type-or-unit
 *   and fallback values for dynamic and robust styling.
 * @feature {Logical Properties} - Uses `padding-inline`, `margin-block`, etc.
 */

:is(box, [data-box], .box) {
  /*
   * For each CSS property, we define a custom property that reads its value
   * from an HTML attribute using attr(). A fallback value is always provided.
   */

  /* Display & Layout */
  --display: attr(display type(*), block);
  --gap: attr(gap type(*), 0);

  /* Spacing (using logical properties) */
  --padding:         attr(p type(*), 0);
  --padding-inline:  attr(px type(*), var(--padding));
  --padding-block:   attr(py type(*), var(--padding));
  --margin:          attr(m type(*), 0);
  --margin-inline:   attr(mx type(*), var(--margin));
  --margin-block:    attr(my type(*), var(--margin));

  /* Sizing */
  --width:  attr(width type(*), auto);
  --height: attr(height type(*), auto);
  --max-width: attr(max-width type(*), none);

  /* Appearance */
  --color:      attr(color type(*), inherit);
  --border:     attr(border type(*), none);
  --radius:     attr(radius type(*), 0);

  /* Typography */
  --text-align: attr(align type(*), start);

  /* Apply the variables to the actual CSS properties */
  display: var(--display);
  gap: var(--gap);
  padding-inline: var(--padding-inline);
  padding-block: var(--padding-block);
  margin-inline: var(--margin-inline);
  margin-block: var(--margin-block);
  width: var(--width);
  height: var(--height);
  max-width: var(--max-width);
  background: attr(bg type(*), transparent);
  color: var(--color);
  border: var(--border);
  border-radius: var(--radius);
  text-align: var(--text-align);

  /*
   * Example of using a mixin for more complex styles.
   * A box with `elevation="2"` would receive a pre-defined shadow.
   */
  &[elevation] {
    /* @apply --elevation(attr(elevation type(*))); */
  }

  /* Only propagate --bg when a bg attribute is explicitly set.
     This lets --bg inherit through non-bg boxes to reach <text> etc. */
  &[bg] {
    --bg: attr(bg type(*));
  }
}