// _setsymbol.scss

/** Setsymbol Base Class ========================
 */
.#{$keyrune_prefix} {
  display: $setsymbol_display;
  font: $setsymbol_font;
  font-size: $setsymbol_font_size;
  line-height: $setsymbol_line_height;
  text-rendering: $setsymbol_text_rendering;
  transform: $setsymbol_transform;
  speak: $setsymbol_speak;
  text-transform: $setsymbol_text_transform;
  vertical-align: $setsymbol_vertical_align;
  // Better font rendering
  -webkit-font-smoothing: $setsymbol_webkit_font_smoothing;
  -moz-font-smoothing: $setsymbol_moz_font_smoothing;

  // default symbol if the set does not exist yet, or setcode does not match
  &:before {
    content: "#{$setsymbol_default_content}";
  }
}

/** Setsymbol Glyphs ============================
 * | Originally, this was inside of the .#{$keyrune_prefix} class above,
 * | and used a '&' parent selector.
 * | However, the loop caused a strange
 * | interatction and printed all of the the set name comments above all
 * | of the set glyh classes; making a giant block of comments on top of
 * | a huge list of classes.
 * |
 * | Temporary solution for proper selector specificity was to prefix the
 * | class with the same variable as the main .ss class above. Not really
 * | best practice (DRY, etc...) but fixes weird compilation.
 */
@each $set in $mtg_setlist {
  /* #{nth($set, 1)} */
  .#{$keyrune_prefix}.#{$keyrune_prefix}-#{nth($set, 2)}:before {
    content: "#{nth($set, 3)}";
  }
}