$icon16-sprite-base-class: ".icon16";
@import "icon16/*.png";
@include all-icon16-sprites;
$icon32-sprite-base-class: ".icon32";
@import "icon32/*.png";
@include all-icon32-sprites;
$icon50-sprite-base-class: ".icon50";
@import "icon50/*.png";
@include all-icon50-sprites;

$EXTRA_SMALL_ICON_SIZE: $DEFAULT_FONT_SIZE;
$DEFAULT_ICON_SIZE: $LARGE_FONT_SIZE;
$MEDIUM_ICON_SIZE: 22px;
$LARGE_ICON_SIZE: 32px;

// ********************* Custom Fonts *********************
@font-face {
  font-family: 'Platform Icons';
  src:url('/static/fonts/platform_icons.eot');
  src:url('/static/fonts/platform_icons.eot?#iefix') format('embedded-opentype'),
    url('/static/fonts/platform_icons.woff') format('woff'),
    url('/static/fonts/platform_icons.ttf') format('truetype'),
    url('/static/fonts/platform_icons.svg#Platform Icons') format('svg');
  font-weight: normal;
  font-style: normal;
}
@mixin common-font-icon-base($char-code) {
    font-family: 'Platform Icons';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    content: $char-code;
    display: inline-block;
}

@mixin common-font-icon($char-code) {
  display: inline-block;
  &:before {
    @include common-font-icon-base($char-code);
  }
  &:hover {
    text-decoration: none;
  }

  &.icon-disabled {
    cursor: default;
    opacity: $DISABLED_ICON_OPACITY;
    color: $BLACK;
    &:hover {
      color: $BLACK;
    }
  }
}

@mixin common-font-icon-after($char-code) {
  display: inline-block;
  &:after {
    @include common-font-icon-base($char-code);
  }
  &:hover {
    text-decoration: none;
  }
}

@mixin common-clickable-font-icon($char-code) {
  @include common-font-icon($char-code);
  @include transition-property();
  @include transition-duration(.3s);
  cursor: pointer;
  color: $LINK_COLOR;
  &:hover {
    color: $LINK_HOVER_COLOR;
  }
}

@mixin table-sort-icon($char-code, $color-code) {
    float: right;
    text-shadow: none;
    font-size: $DEFAULT_ICON_SIZE;
    color: $color-code;
    @include common-font-icon-base($char-code);
}

// ********************* Source Icons *********************
.icon16 {
  display: inline-block;
  height: 16px;
  width: 16px;
  vertical-align: middle;
}

.icon32 {
  display: inline-block;
  height: 32px;
  width: 32px;
  vertical-align: middle;
}

.icon50 {
  display: inline-block;
  height: 50px;
  width: 50px;
  vertical-align: middle;
}

.alert-icon {
  display: inline-block;
  font-size: 1.333em;
  color: $ERROR_COLOR;
  @include common-font-icon('\e059');
  &:after{
    content: " "attr(message)" ";
  }
}

.icon-box {
  @include column(3);
  &:nth-child(4n) {
    @include column(3, last);
  }
  span {
    margin: 0 10px;
  }
}

// ********************* Common Icon Classes *********************
.refresh-icon {
  color: $SECONDARY_FONT_COLOR;
  font-size: $DEFAULT_ICON_SIZE;
  @include common-font-icon('\e073');
}
.hover-icon {
  font-size: 1em;
  @include common-clickable-font-icon('\e078');
}
.collapse-icon {
  color: $SECONDARY_FONT_COLOR;
  font-size: $DEFAULT_ICON_SIZE;
  @include common-font-icon('\e041');
}
.expand-icon {
  color: $SECONDARY_FONT_COLOR;
  font-size: $DEFAULT_ICON_SIZE;
  @include common-font-icon('\e040');
}
.side-expand-icon {
  color: $SECONDARY_FONT_COLOR;
  font-size: $DEFAULT_ICON_SIZE;
  @include common-font-icon('\e039');
}
.calendar-icon {
  font-size: $DEFAULT_ICON_SIZE;
  @include common-clickable-font-icon('\e090');
}
.link-icon {
  font-size: $DEFAULT_ICON_SIZE;
  @include common-clickable-font-icon('\e093');
}
.settings-icon {
  font-size: $DEFAULT_ICON_SIZE;
  @include common-clickable-font-icon('\e024');
}
.clipboard-copy-icon {
  font-size: $DEFAULT_ICON_SIZE;
  @include common-clickable-font-icon('\e014');
}
.page-icon {
  font-size: $DEFAULT_ICON_SIZE;
  @include common-clickable-font-icon('\e012');
}
.remove-page-icon {
  font-size: $DEFAULT_ICON_SIZE;
  @include common-clickable-font-icon('\e009');
}
.add-page-icon {
  font-size: $DEFAULT_ICON_SIZE;
  @include common-clickable-font-icon('\e010');
}
.printer-icon {
  font-size: $DEFAULT_ICON_SIZE;
  @include common-clickable-font-icon('\e037');
}
.add-icon {
  font-size: $DEFAULT_ICON_SIZE;
  @include common-clickable-font-icon('\e056');
}
.edit-icon {
  font-size: $DEFAULT_ICON_SIZE;
  @include common-clickable-font-icon('\e086');
}
.compose-icon {
  font-size: $LARGE_ICON_SIZE;
  @include common-clickable-font-icon('\e087');
}
.edit-note-icon {
  font-size: $DEFAULT_ICON_SIZE;
  @include common-clickable-font-icon('\e011');
}
.delete-icon, a.delete-icon {
  color: $SECONDARY_FONT_COLOR;
  font-size: $DEFAULT_ICON_SIZE;
  @include common-font-icon('\e061');
  &:hover:before {
    color: $SECONDARY_FONT_COLOR;
    content: '\e063';
  }
}
.view-icon {
  font-size: $DEFAULT_ICON_SIZE;
  @include common-clickable-font-icon('\e092');
}
.impersonate-icon {
  font-size: $DEFAULT_ICON_SIZE;
  @include common-clickable-font-icon('\e003');
}
.user-icon-label {
  color: $SECONDARY_FONT_COLOR;
  font-size: $DEFAULT_ICON_SIZE;
  @include common-font-icon('\e001');
}
.people-icon {
  font-size: $DEFAULT_ICON_SIZE;
  @include common-font-icon('\e007');
}
.email-icon-label {
  color: $SECONDARY_FONT_COLOR;
  font-size: $DEFAULT_ICON_SIZE;
  @include common-font-icon('\e107');
}
.email-sent-icon {
  color: $SUCCESS_COLOR;
  font-size: $DEFAULT_ICON_SIZE;
  @include common-font-icon("\e602");
}
.send-email-icon {
  color: $LINK_COLOR;
  font-size: $DEFAULT_ICON_SIZE;
  @include common-font-icon("\e603");
}

.screen-icon-label {
  color: $SECONDARY_FONT_COLOR;
  font-size: $DEFAULT_ICON_SIZE;
  @include common-font-icon('\e031');
}
.mobile-icon-label {
  color: $SECONDARY_FONT_COLOR;
  font-size: $DEFAULT_ICON_SIZE;
  @include common-font-icon('\e033');
}
.rss-icon {
  color: $SECONDARY_FONT_COLOR;
  font-size: $DEFAULT_ICON_SIZE;
  @include common-font-icon('\e121');
}

.manage-biz-icon {
  @include common-font-icon('\e143');
}

.create-biz-icon {
  @include common-font-icon('\e147');
}

.success-icon {
  color: $SUCCESS_COLOR;
  font-size: 2.667em;
  @include common-font-icon('\e070');
}
.check-icon {
  color: $SECONDARY_FONT_COLOR;
  font-size: $DEFAULT_ICON_SIZE;
  @include common-font-icon('\e070');
}
.warning-icon {
  color: $ALERT_COLOR;
  font-size: 2.667em;
  @include common-font-icon('\e058');
}
.warning-icon-small {
  color: $ALERT_COLOR;
  font-size: $DEFAULT_ICON_SIZE;
  @include common-font-icon('\e058');
}
.error-icon {
  color: $ERROR_COLOR;
  font-size: 2.667em;
  @include common-font-icon('\e063');
}
.tooltip-icon {
  font-size: $DEFAULT_ICON_SIZE;
  @include common-clickable-font-icon('\e060');
}
.form-success-icon {
  color: $SUCCESS_COLOR;
  font-size: 48px;
  @include common-font-icon('\e069');
}
.form-error-icon {
  color: $ERROR_COLOR;
  font-size: 48px;
  @include common-font-icon('\e062');
}
.attach-icon {
  color: $SECONDARY_FONT_COLOR;
  font-size: $DEFAULT_ICON_SIZE;
  @include common-font-icon('\e127');
}
.colorpick-icon {
  color: $SECONDARY_FONT_COLOR;
  font-size: $DEFAULT_ICON_SIZE;
  @include common-font-icon('\e128');
}
.comment-icon{
  font-size: $DEFAULT_ICON_SIZE;
  @include common-clickable-font-icon("\e129");
}
.commented-icon {
  font-size: $DEFAULT_ICON_SIZE;
  @include common-clickable-font-icon("\e130");
}
.reply-icon {
  font-size: $DEFAULT_ICON_SIZE;
  @include common-clickable-font-icon('\e053');
}
.back-icon {
  color: $LINK_COLOR;
  font-size: $DEFAULT_ICON_SIZE;
  vertical-align: top;
  @include common-font-icon('\e053');
}
.pagepost-icon {
  color: $SECONDARY_FONT_COLOR;
  font-size: $DEFAULT_ICON_SIZE;
  @include common-font-icon("\e131");
}
.sync-icon {
  color: $SECONDARY_FONT_COLOR;
  font-size: $DEFAULT_ICON_SIZE;
  @include common-font-icon("\e132");
}
.reputation-icon {
  color: $SECONDARY_FONT_COLOR;
  font-size: $DEFAULT_ICON_SIZE;
  @include common-font-icon("\e133");
}
.brand-icon {
  color: $SECONDARY_FONT_COLOR;
  font-size: $DEFAULT_ICON_SIZE;
  @include common-font-icon("\e134");
}
.socialmarket-icon {
  color: $SECONDARY_FONT_COLOR;
  font-size: $DEFAULT_ICON_SIZE;
  @include common-font-icon("\e135");
}
.presence-icon {
  color: $SECONDARY_FONT_COLOR;
  font-size: $DEFAULT_ICON_SIZE;
  @include common-font-icon("\e136");
}
.presence-without-border-icon {
  color: $SECONDARY_FONT_COLOR;
  font-size: $DEFAULT_ICON_SIZE;
  @include common-font-icon("\e100");
}
.concierge-icon {
  color: $SECONDARY_FONT_COLOR;
  font-size: $DEFAULT_ICON_SIZE;
  @include common-font-icon("\e137");
}
.reputation-icon-colored {
  color: $REPUTATION_INTELLIGENCE_COLOR;
  font-size: $DEFAULT_ICON_SIZE;
  @include common-font-icon("\e133");
}
.brand-icon-colored {
  color: $BRAND_ANALYTICS_COLOR;
  font-size: $DEFAULT_ICON_SIZE;
  @include common-font-icon("\e134");
}
.socialmarket-icon-colored {
  color: $SOCIAL_MARKETING_COLOR;
  font-size: $DEFAULT_ICON_SIZE;
  @include common-font-icon("\e135");
}
.presence-icon-colored {
  color: $PRESENCE_BUILDER_COLOR;
  font-size: $DEFAULT_ICON_SIZE;
  @include common-font-icon("\e136");
}
.concierge-icon-colored {
  color: $CONCIERGE_COLOR;
  font-size: $DEFAULT_ICON_SIZE;
  @include common-font-icon("\e137");
}
.accounts-icon {
  color: $SECONDARY_FONT_COLOR;
  font-size: $DEFAULT_ICON_SIZE;
  @include common-font-icon("\e157");
}
.accounts-without-border-icon {
  color: $SECONDARY_FONT_COLOR;
  font-size: $DEFAULT_ICON_SIZE;
  @include common-font-icon("\e113");
}
.users-icon {
  color: $SECONDARY_FONT_COLOR;
  font-size: $DEFAULT_ICON_SIZE;
  @include common-font-icon("\e161");
}
.sales-icon {
  color: $SECONDARY_FONT_COLOR;
  font-size: $DEFAULT_ICON_SIZE;
  @include common-font-icon("\e160");
}
.dashboard-icon {
  color: $SECONDARY_FONT_COLOR;
  font-size: $DEFAULT_ICON_SIZE;
  @include common-font-icon("\e158");
}
.vertical-bar-chart-icon {
  color: $SECONDARY_FONT_COLOR;
  font-size: $DEFAULT_ICON_SIZE;
  @include common-font-icon('\e082');
}
.horizontal-bar-chart-icon {
  color: $SECONDARY_FONT_COLOR;
  font-size: $DEFAULT_ICON_SIZE;
  @include common-font-icon('\e081');
}
.line-chart-icon {
  color: $SECONDARY_FONT_COLOR;
  font-size: $DEFAULT_ICON_SIZE;
  @include common-font-icon('\e085');
}
.data-grid-icon {
  color: $SECONDARY_FONT_COLOR;
  font-size: $DEFAULT_ICON_SIZE;
  @include common-font-icon('\e084');
}
.in-progress-icon {
  font-size: $DEFAULT_ICON_SIZE;
  @include common-clickable-font-icon('\e077');
}
.open-icon {
  font-size: $DEFAULT_ICON_SIZE;
  @include common-clickable-font-icon('\e098');
}
.waiting-icon {
  font-size: $DEFAULT_ICON_SIZE;
  @include common-clickable-font-icon('\e071');
}
.on-icon {
  color: $SUCCESS_COLOR;
  font-size: $DEFAULT_ICON_SIZE;
  @include common-font-icon('\e138');

}
.off-icon {
  color: $ERROR_COLOR;
  font-size: $DEFAULT_ICON_SIZE;
  @include common-font-icon('\e139');
}
.android-icon {
  color: $ICON_ANDROID_COLOR;
  font-size: $DEFAULT_ICON_SIZE;
  @include common-font-icon('\e140');
}
.apple-icon {
  color: $SECONDARY_FONT_COLOR;
  font-size: $DEFAULT_ICON_SIZE;
  @include common-font-icon('\e141');
}
.edituser-icon {
  font-size: $DEFAULT_ICON_SIZE;
  @include common-clickable-font-icon('\e142');
}
.commercial-icon {
  font-size: $DEFAULT_ICON_SIZE;
  @include common-clickable-font-icon('\e143');
}
.notconnected-icon {
  font-size: $DEFAULT_ICON_SIZE;
  @include common-clickable-font-icon('\e144');
}
.permission-icon {
  font-size: $DEFAULT_ICON_SIZE;
  @include common-clickable-font-icon('\e145');
}
.market-icon {
  font-size: $DEFAULT_ICON_SIZE;
  @include common-clickable-font-icon("\e146");
}
.logout-icon {
  font-size: $DEFAULT_ICON_SIZE;
  @include common-clickable-font-icon("\e159");
}
.mention-icon {
  color: $ICON_COLOR_TWO;
  font-size: $LARGE_ICON_SIZE;
  @include common-font-icon("\e103");
}
.socialize-icon {
  color: $GREEN_HOVER_COLOR;
  font-size: $LARGE_ICON_SIZE;
  @include common-font-icon("\e104");
}
.social-post-icon {
  color: $SUCCESS_COLOR;
  font-size: $LARGE_ICON_SIZE;
  @include common-font-icon("\e105");
}
.support-icon {
  color: $RED;
  font-size: $DEFAULT_ICON_SIZE;
  @include common-font-icon("\e106");
}
.custom-icon {
  color: $BADGE_COLOR_TWO;
  font-size: $LARGE_ICON_SIZE;
  @include common-font-icon("\e006");
}
.onboard-icon {
  color: $ICON_COLOR_THREE;
  font-size: $LARGE_ICON_SIZE;
  @include common-font-icon("\e102");
}
.star-icon {
  color: $ICON_COLOR_ONE;
  font-size: $DEFAULT_ICON_SIZE;
  @include common-font-icon("\e089");
}
.review-icon {
  color: $ICON_COLOR_ONE;
  font-size: $LARGE_ICON_SIZE;
  @include common-font-icon("\e154");
}
.visibility-icon {
  color: $CHART_COLOR_FIVE;
  font-size: $LARGE_ICON_SIZE;
  @include common-font-icon("\e101");
}
.report-icon {
  color: $CHART_COLOR_TWO;
  font-size: $DEFAULT_ICON_SIZE;
  @include common-font-icon("\e012");
}
.stats-icon {
  color: $CHART_COLOR_ONE;
  font-size: $DEFAULT_ICON_SIZE;
  @include common-font-icon('\e085');
}
.completed-task-icon {
  color: $CHART_COLOR_FOUR;
  font-size: $DEFAULT_ICON_SIZE;
  @include common-font-icon('\e166');
}
.incomplete-task-icon {
  color: $LINK_COLOR;
  font-size: $DEFAULT_ICON_SIZE;
  @include common-font-icon('\e167');
}
.business-profile-icon {
  color: $TERTIARY_FONT_COLOR;
  font-size: $DEFAULT_ICON_SIZE;
  @include common-font-icon('\e147');
}
.lead-icon {
  color: $SECONDARY_FONT_COLOR;
  font-size: $DEFAULT_ICON_SIZE;
  @include common-font-icon('\e163');
}
.fan-icon {
  color: $SECONDARY_FONT_COLOR;
  font-size: $DEFAULT_ICON_SIZE;
  @include common-font-icon('\e162');
}
.nosort-icon {
  color: $LIGHT_GREY;
  font-size: $DEFAULT_ICON_SIZE;
  cursor: pointer;
  @include common-font-icon-after("\e148");
}
.sortbottom-icon {
  color: $LINK_COLOR;
  font-size: $DEFAULT_ICON_SIZE;
  cursor: pointer;
  @include common-font-icon-after("\e149");
}
.sorttop-icon {
  color: $LINK_COLOR;
  font-size: $DEFAULT_ICON_SIZE;
  cursor: pointer;
  @include common-font-icon-after("\e150");
}
.home-icon {
  font-size: $DEFAULT_ICON_SIZE;
  @include common-clickable-font-icon("\e000");
}

.search-icon {
  font-size: $DEFAULT_ICON_SIZE;
  @include common-font-icon("\e018");
  color: $LINK_COLOR;
}
.browse-icon {
  font-size: $LARGE_ICON_SIZE;
  @include common-font-icon("\e019");
  color: $LINK_COLOR;
}

.left-icon {
  font-size: $DEFAULT_ICON_SIZE;
  @include common-clickable-font-icon("\e042");
}

.right-icon {
  font-size: $DEFAULT_ICON_SIZE;
  @include common-clickable-font-icon("\e043");
}

.up-icon {
  font-size: $DEFAULT_ICON_SIZE;
  @include common-clickable-font-icon("\e044");
}

.down-icon {
  font-size: $DEFAULT_ICON_SIZE;
  @include common-clickable-font-icon("\e045");
}

.right-chevron-icon {
  font-size: $DEFAULT_ICON_SIZE;
  @include common-clickable-font-icon("\e046");
}

.active-icon {
  font-size: $DEFAULT_ICON_SIZE;
  @include common-font-icon("\e064");
  color: $SUCCESS_COLOR;
}

.paused-icon {
  font-size: $DEFAULT_ICON_SIZE;
  @include common-font-icon("\e065");
  color: $TERTIARY_FONT_COLOR;
}

.disabled-icon {
  font-size: $DEFAULT_ICON_SIZE;
  @include common-font-icon("\e066");
  color: $ERROR_COLOR;
}

.coupon-icon {
  font-size: $DEFAULT_ICON_SIZE;
  @include common-clickable-font-icon('\e152');
}

.website-icon {
  font-size: $DEFAULT_ICON_SIZE;
  @include common-clickable-font-icon('\e156');
}

.plus-icon {
  font-size: $DEFAULT_ICON_SIZE;
  @include common-clickable-font-icon('\e079');
}

.minus-icon {
  font-size: $DEFAULT_ICON_SIZE;
  @include common-clickable-font-icon('\e080');
}

.adduser-icon {
  font-size: $DEFAULT_ICON_SIZE;
  @include common-clickable-font-icon('\e004');
  color: $SUCCESS_COLOR;
  &:hover {
    color: $SUCCESS_HOVER_COLOR;
  }
}

.photo-icon {
  font-size: $DEFAULT_ICON_SIZE;
  @include common-clickable-font-icon('\e022');
}

.indent-icon {
  color: $TERTIARY_FONT_COLOR;
  font-size: $DEFAULT_ICON_SIZE;
  @include common-font-icon('\e151');
}

.download-icon {
  font-size: $DEFAULT_ICON_SIZE;
  @include common-clickable-font-icon('\e029');
}

.video-play-icon {
  font-size: $LARGE_ICON_SIZE;
  @include common-font-icon('\e094');
}

.not-relevant-icon {
  color: $TERTIARY_FONT_COLOR;
  font-size: $LARGE_ICON_SIZE;
  @include common-font-icon('\e057');
}

.list-icon {
  font-size: $DEFAULT_ICON_SIZE;
  @include common-clickable-font-icon('\e112');
}

.increase-icon {
  font-size: $DEFAULT_ICON_SIZE;
  @include common-font-icon('\e051');
  color: $SUCCESS_COLOR;
}

.decrease-icon {
  font-size: $DEFAULT_ICON_SIZE;
  @include common-font-icon('\e052');
  color: $ERROR_COLOR;
}

.back-to-top-icon {
  color: $WHITE_FONT_COLOR;
  font-size: $MEDIUM_ICON_SIZE;
  @include common-font-icon('\e051');

  &:hover {
    color: $WHITE_FONT_COLOR;
  }
}

.lock-icon {
  color: $SECONDARY_FONT_COLOR;
  font-size: $DEFAULT_ICON_SIZE;
  @include common-font-icon('\e109');
}

.hotness-icon {
  font-size: $DEFAULT_ICON_SIZE;
  @include common-font-icon("\e118");
  color: $ICON_HOTNESS_COLOR;
}

.twitter-icon {
  font-size: $DEFAULT_ICON_SIZE;
  @include common-font-icon("\e124");
  color: $TWITTER_COLOR;
}

.facebook-icon {
  font-size: $DEFAULT_ICON_SIZE;
  @include common-font-icon("\e123");
  color: $FACEBOOK_COLOR;
}

.googleplus-icon {
  font-size: $DEFAULT_ICON_SIZE;
  @include common-font-icon("\e125");
  color: $GOOGLEPLUS_COLOR;
}

.linkedin-icon {
  font-size: $DEFAULT_ICON_SIZE;
  @include common-font-icon("\e122");
  color: $LINKEDIN_COLOR;
}

.foursquare-icon {
  font-size: $DEFAULT_ICON_SIZE;
  @include common-font-icon("\e126");
  color: $FOURSQUARE_COLOR;
}

.clock-icon {
  font-size: $DEFAULT_ICON_SIZE;
  @include common-font-icon("\e071");
  color: $LINK_COLOR;
}

.shopping-cart-icon {
  font-size: $DEFAULT_ICON_SIZE;
  @include common-font-icon("\e116");
  color: $LINK_COLOR;
}

.gift-icon {
  font-size: $DEFAULT_ICON_SIZE;
  @include common-font-icon("\e170");
  color: $SUCCESS_COLOR;
}

.burger-icon {
  font-size: $DEFAULT_ICON_SIZE;
  @include common-clickable-font-icon("\e168");
}

.detail-icon {
  font-size: $DEFAULT_ICON_SIZE;
  @include common-clickable-font-icon("\e169");
}

.trash-can-icon {
  font-size: $DEFAULT_ICON_SIZE;
  @include common-clickable-font-icon("\e111");
}

.arrow-left-icon {
  font-size: $DEFAULT_ICON_SIZE;
  color: $TERTIARY_FONT_COLOR;
  @include common-font-icon("\e600");
}

.asterisk-icon {
  font-size: $DEFAULT_ICON_SIZE;
  color: $ERROR_COLOR;
  @include common-font-icon("\e601");
}

.viewall-icon {
  font-size: $DEFAULT_FONT_SIZE;
  color: $SECONDARY_FONT_COLOR;
  @include common-clickable-font-icon("\e604");
}

.chevron-right-icon {
  font-size: $LARGE_ICON_SIZE;
  color: $WHITE_FONT_COLOR;
  @include common-font-icon("\e046");
}

.products-icon {
  font-size: $DEFAULT_ICON_SIZE;
  color: $SECONDARY_FONT_COLOR;
  @include common-font-icon("\e606");
}

.snapshot-icon {
  font-size: $DEFAULT_ICON_SIZE;
  color: $SECONDARY_FONT_COLOR;
  @include common-font-icon("\e012");
}

.share-icon {
  font-size: $DEFAULT_ICON_SIZE;
  color: $DARK_BLUE;
  @include common-clickable-font-icon("\e801");
}

.shared-icon {
  font-size: $DEFAULT_ICON_SIZE;
  @include common-clickable-font-icon("\e802");
  color: $SUCCESS_COLOR;
  &:hover {
    color: $SUCCESS_HOVER_COLOR;
  }
}

.publish-icon {
  font-size: $DEFAULT_ICON_SIZE;
  color: $DARK_BLUE;
  @include common-clickable-font-icon("\e803");
}

.published-icon {
  font-size: $DEFAULT_ICON_SIZE;
  @include common-clickable-font-icon("\e804");
  color: $SUCCESS_COLOR;
  &:hover {
    color: $SUCCESS_HOVER_COLOR;
  }
}

.missing-icon {
  font-size: $DEFAULT_ICON_SIZE;
  @include common-font-icon("\e805");
}

.powerpoint-icon {
  font-size: $DEFAULT_ICON_SIZE;
  color: $PPT_COLOR;
  @include common-font-icon("\e806");
}

.pdf-icon {
  font-size: $DEFAULT_ICON_SIZE;
  color: $PDF_COLOR;
  @include common-font-icon("\e807");
}

.kebab-icon {
  font-size: $DEFAULT_FONT_SIZE;
  color: $SECONDARY_FONT_COLOR;
  @include common-clickable-font-icon("\e808");
}

.open-email-icon {
  font-size: $DEFAULT_ICON_SIZE;
  color: $SECONDARY_FONT_COLOR;
  @include common-clickable-font-icon("\e108");
}

.listing-directory-icon {
  font-size: $DEFAULT_FONT_SIZE;
  color: $SECONDARY_FONT_COLOR;
  @include common-clickable-font-icon("\e809");
}

.mine-icon {
  font-size: $DEFAULT_ICON_SIZE;
  color: $DARK_BLUE;
  @include common-clickable-font-icon("\e120");
}

.not-mine-icon {
  font-size: $DEFAULT_ICON_SIZE;
  @include common-clickable-font-icon("\e120");
  color: $SUCCESS_COLOR;
  &:hover {
    color: $SUCCESS_HOVER_COLOR;
  }
}

.data-missing-icon {
  font-size: $DEFAULT_ICON_SIZE;
  color: $ERROR_COLOR;
  @include common-font-icon("\e810");
}

.medium-icon{
  font-size: $MEDIUM_ICON_SIZE;
}
.small-icon {
  font-size: $DEFAULT_ICON_SIZE;
}
.extra-small-icon {
  font-size: $EXTRA_SMALL_ICON_SIZE;
}

// ********************* Common Header Menu Icon Classes *********************
#shared-header-menu {
  [class *= 'icon'] {
    color: $WHITE_FONT_COLOR;
    font-size: inherit;
    text-shadow: 1px 1px 0px $TERTIARY_FONT_COLOR;
    cursor: auto;
  }

  li.current {
    [class *= 'icon'] {
      color: $PRIMARY_FONT_COLOR;
      text-shadow: none;
    }
  }
}


@mixin spin-animation($time, $keyframes) {
  -webkit-animation: spin $time steps($keyframes) infinite;
     -moz-animation: spin $time steps($keyframes) infinite;
       -o-animation: spin $time steps($keyframes) infinite;
          animation: spin $time steps($keyframes) infinite;
}

@-webkit-keyframes spin {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}
@-moz-keyframes spin {
    from { -moz-transform: rotate(0deg); }
    to { -moz-transform: rotate(360deg); }
}
@-o-keyframes spin {
    from { -o-transform: rotate(0deg); }
    to { -o-transform: rotate(360deg); }
}
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.spinner-icon {
  font-size: $LARGE_FONT_SIZE;
  @include common-font-icon('\e072');
  &:before{
    @include spin-animation(0.7s, 8);
  }
}