@import "settings";
@import "font-awesome/scss/font-awesome";

/* --- Bonsai Variables --- */

/// Set to false to not include default Icons CSS classes
/// @type Bool
$bonsai-include-icons: $bonsai-include-components !default;

/// Color of twitter icon
/// @type Color
$twitter-color: #00aced !default;

/// Color of facebook icon
/// @type Color
$facebook-color: #3b5998 !default;

/// List of icon names
/// @type String | List
$icon-names: (
  archive,
  arrow-circle-down,
  arrow-circle-right,
  arrow-circle-up,
  arrow-down,
  arrow-left,
  arrow-right,
  arrow-up,
  bold,
  book,
  check,
  check-circle,
  check-circle-o,
  chevron-down,
  chevron-left,
  chevron-right,
  circle,
  clipboard,
  close,
  commenting,
  download,
  ellipsis-h,
  envelope,
  exclamation,
  exclamation-circle,
  expand,
  external-link,
  facebook,
  facebook-official,
  file,
  file-text,
  file-text-o,
  files-o,
  folder,
  globe,
  info-circle,
  italic,
  laptop,
  link,
  list-ol,
  list-ul,
  long-arrow-up,
  long-arrow-down,
  minus,
  paperclip,
  pencil,
  phone,
  plus,
  plus-circle,
  plus-square,
  question,
  question-circle,
  quote-left,
  quote-right,
  search,
  search-minus,
  search-plus,
  share,
  share-alt,
  shopping-cart,
  square,
  sticky-note,
  th,
  th-large,
  thumbs-down,
  thumbs-up,
  thumbs-o-down,
  thumbs-o-up,
  times-circle,
  trash,
  tumblr,
  twitter,
  underline,
  unlock-alt
);

/* --- Mixins --- */

/// Social Media Icon Styling
@mixin social-media-icons {
  .twitter-styling {
    & {
      color: $twitter-color !important;
    }
  }

  .facebook-styling {
    & {
      color: $facebook-color !important;
    }
  }
}

/// Small Icon Styling
@mixin small-icon-styling {
  font-size: $bonsai-icon-size / $bonsai-icon-scale;
}

/// Large Icon Styling
@mixin large-icon-styling {
  font-size: $bonsai-icon-size * $bonsai-icon-scale;
}

/// Icons Default Class Patterns
///
/// This will generate all default CSS classes when $bonsai-include-icons is true
@mixin icons {
  @if $bonsai-include-icons {
    @each $color-name, $color in $bonsai-palette {
      .icon-color-#{$color-name} {
        color: get-color($color-name);
      }
    }

    @each $name in $icon-names {
      $fontawesome-class: ".fa-" + $name;

      .icon-#{$name} {
        @extend .fa;
        @extend #{$fontawesome-class};

        font-size: $bonsai-icon-size;
      }
    }

    .icon-small {
      @include small-icon-styling;
    }

    .icon-large {
      @include large-icon-styling;
    }

    @include social-media-icons;
  }
}