@import '../../anthology';

@include A(configure,
  (
    'breakpoints': (
      'small': 500px,
      'medium': 1200px,
      'large': 1800px
    ),
    'separator': '-',
  )
);

$adjectives: (
  'red': red,
  'greyscale': (
    'default': rgb(50, 50, 50),
    'small': rgb(100, 100, 100),
    'medium': rgb(150, 150, 150),
    'large': rgb(200, 200, 200),
  )
);

@include A(define, 'bg', background-color, $adjectives,
  (
    'pseudos': (':hover', ':before'),
    'themes': ('night', 'day'),
  )
);

@include A(emit, (important: true, silent: false));
@include A(emit-responsive, (important: true, silent: false));

@include A(with-namespace, 'hello', 'world') {
  @include A(extend, 'bg', 'red', (breakpoint: 'small'));
}

$example-grid-config: (
  'default': (
    columns: 1fr 1fr 1fr,
    rows: 75px 1fr 75px,
    gap: 1px,
    template:
      'navigation    navigation  navigation   '
      'left-sidebar  content     right-sidebar'
      'footer        footer      footer       '
  ),
);

@include A(grid, example, $example-grid-config);