// ----
// libsass (v3.5.4)
// ----

// conclusions:

// placeholders:
//  1. SASS is easier to read because no logic, but can be spread out
//  2. outputted CSS far harder to read due to long selector lists that
//      grow with each new extend

// mixins:
//  1. SASS harder to write because logic is necessary to keep mixins
//      simple and consistent, but is compact due to function.
//  2. outputted CSS way easier to read because it's grouped via
//      component and not selector

//  performance:
//    on pure performance placeholders win due to less generated code.
//    the real question: is the performance win high enough to offset
//      the cognitive load when viewing outputted CSS in inspector?



/*
  *** typography
*/
/*
  using placeholders
*/
/* these selector lists are going to get very long due to future code */
%body,
%small-head {
  font-family: arial;
  font-weight: 400;
}

%body,
%typography3 {
  font-style: italic;
}

%body,
%small-head,
%typography3 {
  color: black;
}

%body {
  font-size: 1.4rem;
  line-height: 1.2;
}

%small-head {
  font-size: 2rem;
  line-height: 1.5;
}

%typography3 {
  font-size: 1.2rem;
  line-height: 1.1;
}

.body         { @extend %body; }
.small-head   { @extend %small-head; }
.typography3  { @extend %typography3; }



/*
  using mixin
*/
@mixin typography($type: ''){
  color: black;

  @if $type == 'body' or $type == 'sm-head' {
    font-family: arial;
    font-weight: 400;
  }


  @if $type == 'body' or $type == 'typography3' {
    font-style: italic;
  }


  @if $type == 'sm-head' {
    font-size: 2rem;
    line-height: 1.5;
  }

  @elseif $type == 'typography3' {
    font-size: 1.2rem;
    line-height: 1.1;
  }

  @else {
    font-size: 1.4rem;
    line-height: 1.2;
  }
}

.component {
  p       {@include typography('body');}
  .title  {@include typography('sm-head');}
  .other  {@include typography('typography3');}
}



/*
  *** cards
*/
$major-component-buffer: 4rem;
$minor-component-buffer: 2rem;

/*
  mashing up mixins and placeholders
*/
%card {
  margin-bottom: $major-component-buffer;
  padding: 2rem;

  // mixing between placeholders and mixins to show diff in outputted CSS
  p         { @extend %body; }
  // only title will show up with card grouping, rest will be higher in output with previous typography selector groups */
  .title    { @include typography('sm-head'); }
  .sub-head { @extend %typography3; }
}

.mixed-card {
  &,
  &--variant1,
  &--variant2 {
    @extend %card;
  }

  &--variant1 {
    .img { float: right; }
  }

  &--variant2 {
    .img { float: left; }
  }
}

// all of these will be grouped with like selectors
/*
  using placeholders only - selectors grouped, not outputted CSS
*/
%placeholder-card {
  margin-bottom: $major-component-buffer;
  padding: 2rem;

  // mixing between placeholders and mixins to show diff in outputted CSS
  p         { @extend %body; }
  // only title will show up with card grouping, rest will be higher in output with previous typography selector groups */
  .title    { @extend %small-head; }
  .sub-head { @extend %typography3; }
}

.placeholder-card {
  &,
  &--variant1,
  &--variant2 {
    @extend %placeholder-card;
  }

  &--variant1 {
    .img { float: right; }
  }

  &--variant2 {
    .img { float: left; }
  }
}

/*
  using mixins only - outputted CSS grouped, not selectors
*/
@mixin card {
  margin-bottom: $major-component-buffer;
  padding: 2rem;

  // mixing between placeholders and mixins to show diff in outputted CSS
  p         { @include typography('body'); }
  // only title will show up with card grouping, rest will be higher in output with previous typography selector groups */
  .title    { @include typography('sm-head'); }
  .sub-head { @include typography('typography3'); }
}

.mixin-card {
  &,
  &--variant1,
  &--variant2 {
    @include card;
  }

  &--variant1 {
    .img { float: right; }
  }

  &--variant2 {
    .img { float: left; }
  }
}


// random playground tests
@mixin button(
  $background-color: gray,
  $invert: false
) {
  font-weight: bold;
  font-style: arial;
  background-color: #{$background-color};


  @if $invert == true {
    color: white;
  }

  @else {
    color: black;
  }
}

/*
  mixin buttons
*/
.button         {@include button};
.button-success,
// save this as a placeholder for component use
%button-success {@include button($background-color:'green')};
// just messing around with sending variables without keywords
.button-error   {@include button('red', true)};
.button-invert  {@include button($invert: true)};

// placeholder makes longer selector, mixin duplicates CSS
// placeholder harder to read in inspector, but better performance (would make smaller file)
.component .button  {@include button($background-color:'green')};
.component2 .button {@extend %button-success;}



/*
  placeholder buttons generated from list
*/
$buttons:
  // [name] [background-color] [font-color] [border-color]
  'foo'   gray  black green,
  'bar'   green blue  black,
  'magic' red   white orange;

@each $button-config in $buttons {
    %button-#{nth($button-config, 1)} {
        font-family: arial;
        font-weight: bold;
        background-color: nth($button-config, 2);
        color: nth($button-config, 3);
        border-color: nth($button-config, 4);
    }

    // separating class and placeholder to prevent potential weird nesting because SASS
    .button-#{nth($button-config, 1)} {
      @extend %button-#{nth($button-config, 1)};
    }
}

.simple-button-placeholder {@extend %button-magic; }



/*
  icon list - probably simpler than our current map implementation
*/
$icon-list:
  // [icon name], [icon image path]

  // group 1
  'check' 'check.svg',
  'foo' 'random-icon-name.svg',

  // group 2
  'bar' 'nested/test.svg';

@each $icon-configs in $icon-list {
    %icon-#{nth($icon-configs, 1)} {
        background-image: url('/path/to/image/#{nth($icon-configs, 2)}');
    }

    // separating class and placeholder to prevent potential weird nesting because SASS
    .icon-#{nth($icon-configs, 1)} {
      @extend %icon-#{nth($icon-configs, 1)};
    }
}

// allows swapping of icon via SASS rather than markup
.component .icon {@extend %icon-foo;}