// Dependencies.
@import '../normalize';
@import 'components/divider/divider';

// Grouping content
//
// Weight: 1
//
// Style guide: base.grouping

// Blockquotes
//
// For quoting blocks of content from another source within your document. Wrap
// <code>&lt;blockquote&gt;</code> around any <abbr
// title="HyperText Markup Language">HTML</abbr> as the quote. For straight
// quotes, we recommend a <code>&lt;p&gt;</code>.
//
// Optionally, add a <code>&lt;footer&gt;</code> to identify the source of the
// quote. Wrap the name of the source work in <code>&lt;cite&gt;</code>.
//
// Markup: grouping-blockquote.hbs
//
// Style guide: base.grouping.blockquote

blockquote {
  // Set 1 unit of vertical rhythm on the top and bottom margin.
  // Also indent the quote on both sides.
  @include margin(1 0);
  font-style: italic;
  padding-left: 30px;
  border-left: 10px solid color(border);
}

// Figures
//
// The element can thus be used to annotate illustrations, diagrams, photos,
// code listings, etc.
//
// Optionally, a &lt;figcaption&gt; element inside the &lt;figure&gt; represents
// the caption of the figure.
//
// Markup: grouping-figure.hbs
//
// Style guide: base.grouping.figure

figure {
  // Address margin not present in IE 8/9 and Safari.
  @include margin(1 0);
}

figcaption {
  // Add your styles.
}

// Horizontal rule
//
// The hr element represents a paragraph-level thematic break, e.g. a scene
// change in a story, or a transition to another topic within a section of a
// reference book.
//
// Markup: grouping-hr.hbs
//
// Style guide: base.grouping.hr

hr {
  @extend %divider;
  // Address differences between Firefox and other browsers.
  @include box-sizing(content-box);
  height: 0;
}

// Body copy
//
// The default <code>font-size</code> and <code>line-height</code> are applied to the <code>&lt;body&gt;</code> and all paragraphs. In addition, <code>&lt;p&gt;</code> (paragraphs) receive a top and bottom margin.</p>
//
// Markup: grouping-p.hbs
//
// Style guide: base.grouping.p

p,
pre {
  // Set 1 unit of vertical rhythm on the top and bottom margin.
  @include margin(1 0);
}

// Preformatted text
//
// The &lt;pre&gt; tag represents a block of preformatted text, such as
// fragments of computer code, ASCII art, etc.
//
// Markup: grouping-pre.hbs
//
// Style guide: base.grouping.pre

%monospace {
  // Address odd `em`-unit font size rendering in all browsers.
  // The value of $font-monospace ends with ", serif".
  @include font-size(m);
  font-family: $font-monospace;
  @if support-legacy-browser(ie, '6') {
    _font-family: 'courier new', monospace;
  }
}

pre {
  @extend %monospace;
  // Contain overflow in all browsers.
  overflow: auto;
}

// Lists
//
// Style guide: base.grouping.lists

// Unordered list
//
// A list of items in which the order does <em>not</em> explicitly matter.
//
// Markup: grouping-lists-ul.hbs
//
// Style guide: base.grouping.lists.ul

// Ordered list
//
// A list of items in which the order <em>does</em> explicitly matter.
//
// Markup: grouping-lists-ol.hbs
//
// Style guide: base.grouping.lists.ol

// Description list
//
// A list of terms with their associated descriptions.
//
// Markup: grouping-lists-dl.hbs
//
// Style guide: base.grouping.lists.dl
ul {
  list-style-type: disc;
  text-indent: 6px;
}

ol {
  list-style-type: decimal;
  text-indent: 10px;

  ol {
    list-style-type: lower-alpha;
  }
}

dl,
menu,
ol,
ul {
  // Address margins set differently in IE 6/7.
  @include margin(1 0);
}

// Turn off margins on nested lists.
ol,
ul {
  ol,
  ul {
    //@include output-rhythm(margin, rhythm(.32) 0);
    //@include output-rhythm(padding-left, rhythm(1.6));

    @include margin(.32 0);
    @include padding-left(1.6);
  }
}

dt {
  // Add your styles.
}

dd {
  margin: 0 0 0 $indent-amount;

  @include rtl {
    margin: 0 $indent-amount 0 0;
  }
}

// Address paddings set differently in IE 6/7
menu,
ol,
ul {
  padding: 0 0 0 $indent-amount;

  @include rtl {
    padding: 0 $indent-amount 0 0;
  }
}

// Correct list images handled incorrectly in IE 7.
@if support-legacy-browser(ie, '7') {
  nav ul,
  nav ol {
    list-style: none;
    list-style-image: none;
  }
}
