@import 'compass';

@import 'shared';
@import 'background/gradients';

/**
 * @class Webfont Icon
 * Great to use with the [Pictos font](http://pictos.drewwilson.com/)
 * 
 */

/**
 * @cfg {color} $webfont-icon-base-color
 * The default color of icons when using the {@link #webfont-icon} mixin.
 * 
 * Defaults to `white`.
 */
$webfont-icon-base-color: #999 !default;

/**
 * @cfg {color} $webfont-icon-default-stroke
 * The default color to use on the border of icons, when using the {@link #webfont-icon} mixin.
 * 
 * Defaults to `null`.
 */
$webfont-icon-default-stroke: darken($webfont-icon-base-color, 10) !default;

$webfont-icon-highlight-color: #3778E5 !default;

/**
 * @cfg {string} $webfont-icon-default-gradient
 * The default gradient to use when using the {@link #webfont-icon} mixin.
 * 
 * Defaults to `matte`.
 */
$webfont-icon-default-gradient: matte !default;

// Base style for pseudo-selectors
// @todo Doc me yo

.webfont-icon-base {
    color: transparent;
    @include background-clip(text);
    position: absolute;
    top: 0;
    left: 0;
    text-indent: 0;
    @include text-shadow(none);
    @include user-select(none);
}

// @todo Doc me yo

@mixin include-font-websymbols {
    @include font-face(
        "websymbols",
        font-files(
            "websymbols/websymbols-regular-webfont.ttf", truetype,

            "websymbols/websymbols-regular-webfont.eot", opentype
        )
    );
    .webfont-icon-websymbols {
        font-family: websymbols;
        @extend .webfont-icon-base;
    }
}

@mixin include-font-heydings {
    @include font-face(
        "heydings",
        font-files(
            "heydings/heydings_icons.ttf", truetype
        )
    );
    .webfont-icon-heydings {
        font-family: heydings;
        @extend .webfont-icon-base;
    }
}

@mixin include-font-iconic {
    @include font-face(
        "iconic",
        font-files(
            "iconic/iconic_stroke.ttf", truetype,
            "iconic/iconic_stroke.otf", opentype
        )
    );
    .webfont-icon-iconic {
        font-family: iconic;
        @extend .webfont-icon-base;
    }
}

/**
 * Includes a character into the specified selector, styled as an icon.
 * 
 *     @include webfont-icon('a');
 * 
 * @param {color} $color
 * The color of the icon. Defaults to {@link #$webfont-icon-default-background $webfont-icon-default-background}.
 * 
 * @param {measurement} $size
 * The size of the icon
 * 
 * @param {color} $stroke
 * The color of the border. Defautls to {@link #$webfont-icon-default-border $webfont-icon-default-border}.
 * 
 * @param {boolean} $include-staes
 * True to include states for hover and active. Defaults to `true`.
 */
@mixin webfont-icon(
    $character: attr(data-icon),
    $class: 'base',
    
    $color: $webfont-icon-base-color,
    $color-hover: $webfont-icon-highlight-color,
    $color-active: darken($color-hover, 7%),

    $size: 48px,
    
    $glow: null,
    $glow-hover: $webfont-icon-highlight-color 0 0 10px,
    $glow-active: $glow-hover,

    $shadow: rgba(#000, .5) 0 1px 3px, // Shadow doesn't change, but hover does

    $stroke: false,
    $stroke-hover: 1px darken($color-hover, 5),
    $stroke-active: 1px darken($color-active, 5),

    $gradient: $webfont-icon-default-gradient,
    $gradient-hover: $gradient,
    $gradient-active: recessed,

    $include-states: true,
    $hide-text: true,
    $text-align: right,
    $text-spacing: 4px
) {
    @include background-clip(text);
    overflow: visible;
    position: relative;
    display: inline-block;
    line-height: $size;

    @if $hide-text == true {
        text-indent: -9000px;  
        width: $size;
        height: $size;
    } @else {
        @if $text-align == right {
            padding-left: $size + $text-spacing;
        } @else {
            padding-right: $size + $text-spacing;
        }
    }

    @if $stroke {
        -webkit-text-stroke: if($stroke == true, darken($color, 10), $stroke);
    }
    &:after, &:before {
        @extend .webfont-icon-#{$class};

        @if ($hide-text != true and $text-align == left) {
            left: auto;
            right: 0;
        }

        font-size: $size;
        content: $character;
        
        @include background-gradient($color, $gradient);
    }
    &:before {
        // @include background-clip(padding-box);
        background: none;
        @include text-shadow($shadow);
    }
    
    @if $include-states {
        &:hover {
            @if $stroke-hover and $stroke {
                -webkit-text-stroke: $stroke-hover;
            }
            color: $color-hover;

            &:before {
                @include text-shadow($shadow, $glow-hover);
            }
            &:after {
                @include background-gradient($color-hover, $gradient-hover);
            }
        }
        &:active {            
            @if $stroke-active and $stroke {
                -webkit-text-stroke: $stroke-active;
            }
            color: $color-active;
            &:before {
                @include text-shadow($shadow, $glow-active);
            }
            &:after {
                @include background-gradient($color-active, $gradient-active);
            }
        }
    }
}