// This is a comment. Comments start with two slashes //
// End of line comments are not supported

// -------- GLOBAL VARIABLES --------
// Declared before any overlay blocks
// Syntax: @name=value or @name=@other_var
// When assigning one variable to another, its value is copied
@a=10
@b=@a
@a=20
// at this point @a=20, @b=10

// For example, these values are reused throughout the config,
// so it makes sense to declare them as global variables.
// Also it would allow to easily change them from one place
@margin=16dp
@avatar=56dp
@content=72dp

// Rhythm supports "magic variables", which allow to specify layer defaults.
// Magic variables must be named @{layer_type}_{arg_name}
// and explicitly enabled for a RhythmOverlayInflater instance.
// They work with custom layers as well.
@fill_color=#400091EA
@keyline_thickness=1dp
@layout_bounds_crosshair_size=16dp

// --------- OVERLAY BLOCKS ---------
// Separated by an empty line
// May start with an optional title (line begins with #)
// May declare local variables and override global variables

# Standard grid
@step=8dp
grid-lines step=@step from=top
grid-lines step=@step from=left

# Typography grid w/keylines
grid-lines step=4dp from=top
keyline distance=@margin from=left
keyline distance=@margin from=right
keyline distance=@content from=left

// A bunch of comments between overlay blocks
// is not associated with any of them

# Avatar list
grid-lines step=8dp from=top
grid-lines step=8dp from=left
// Inset is a layer group - it can nest other layers
inset no-clip left=0dp width=@margin
  // Nested layers must be indented with extra spaces
  fill
inset no-clip left=@avatar width=16dp
  fill
// You can simply write 0 instead of 0dp
// Integer values are treated as pixels
inset no-clip right=0 width=@margin
  fill
keyline distance=@margin from=left
keyline distance=@margin from=right
keyline distance=@content from=left
keyline distance=@avatar from=left outside

# Hybrid grid
grid-lines step=8dp from=top
grid-lines step=8dp from=left
inset left=@content right=@margin
  grid-lines step=8dp from=top offset=4dp color=@fill_color
keyline distance=@margin from=left
keyline distance=@margin from=right
keyline distance=@content from=left

# Four columns w/8dp gutters
// Change these variables to set up columns count, margins, and gutters
// Sorry to have it like this - expressions are coming in the next update
@count=4
@half_gutter=4dp
@margin_minus_half_gutter=12dp
// Magic variables can too be defined locally and override globals
@keyline_thickness=0.6dp
// --------------------------------------------------------------------
inset left=@margin_minus_half_gutter right=@margin_minus_half_gutter
  // A new columns layer divides the width into @count equal areas
  // and draws child layers into each of them
  columns count=@count
    inset left=@half_gutter right=@half_gutter
      grid-lines step=8dp from=top
      grid-lines step=8dp from=left  limit=2
      grid-lines step=8dp from=right limit=2
    inset left=0 width=@half_gutter
      fill
    inset right=0 width=@half_gutter
      fill
    keyline distance=@half_gutter from=left
    keyline distance=@half_gutter from=right
inset left=0 width=@margin_minus_half_gutter
  fill
inset right=0 width=@margin_minus_half_gutter
  fill

# Content card w/ 80dp image
@card_margin=16dp
@action_margin_width=8dp
@action_margin_color=#60F50057
inset right=96dp bottom=56dp
  inset height=24dp left=@card_margin
    fill
  inset width=@card_margin
    fill
  inset left=@card_margin top=24dp
    grid-lines step=4dp from=top color=@action_margin_color
  keyline distance=24dp from=top
inset right=0 width=96dp bottom=56dp
  inset height=@card_margin right=@card_margin
    fill
  inset width=@card_margin right=0
    fill
  keyline distance=16dp from=top
inset bottom=0 height=56dp
  // Drawing margins with keylines instead of insets/fills for flatter hierarchy.
  // We don't mind overlapping fills here because that's how it's drawn in the spec.
  keyline distance=0 from=top    thickness=@action_margin_width outside color=@action_margin_color
  keyline distance=0 from=left   thickness=@action_margin_width outside color=@action_margin_color
  keyline distance=0 from=right  thickness=@action_margin_width outside color=@action_margin_color
  keyline distance=0 from=bottom thickness=@action_margin_width outside color=@action_margin_color
keyline distance=@card_margin from=left
keyline distance=@card_margin from=right
// Here's the custom layer
image-box gravity=top|right width=80dp height=80dp distance-x=@card_margin distance-y=@card_margin

# Text view size & bounds
layout-bounds
dimensions-label gravity=bottom|right text-size=12dp