$pictos-background-default: white !default;
$pictos-default-border: null !default;
$pictos-default-gradient: null !default;

@mixin pictos($character,
    $color: #fff,
    $size: 24px,
    $glow: null, // (shadow 1)
    $border-color: $pictos-default-border,
    $border-color-over: $border-color,
    $border-color-active: $border-color,
    $color-hover: $bright-color,
    $gradient: matte,
    $gradient-over: $gradient,
    $gradient-active: recessed,
    $glow-hover: $bright-color 0 0 10px,
    $glow-active: $glow-hover,
    $shadow: rgba(#000, .5) 0 1px 1px,
    $include-states: true
) {
    @include background-clip(text);
    overflow: visible;
    @include text-shadow(rgba(#fff, .15) 0 1px 0);
    position: relative;
    height: $size;
    line-height: $size;

    &:after, &:before {
        @extend .base-pictos;
        font-size: $size;
        content: $character;
        @if $border-color != null {
            -webkit-text-stroke: 1px $border-color;
        }
        
        @include background-gradient($color, $gradient);
    }
    &:before {
        @include background-clip(padding-box);
        background: none;
    }
    
    @if $include-states {
        &:hover {
            @if $border-color-over != null {
                -webkit-text-stroke: 1px $border-color-over;
            }

            &:before {
                @include text-shadow($shadow, $glow-hover);
            }
            &:after {
                @include background-gradient($color-hover, $gradient-over);
            }
        }
        &:active {
            @if $border-color-active != null {
                -webkit-text-stroke: 1px $bright-color;
            }
            top: 1px;
            &:before {
                @include text-shadow($shadow, $glow-active);
            }
            &:after {
                @include background-gradient($bright-color, $gradient-active);
            }
        }
    }
}

@mixin simple-pictos($character, $color: #fff, $size: 24px) {
    overflow: visible;
//    @include text-shadow(rgba(#fff, .15) 0 1px 0);
    position: relative;
    
    &:after {
        @include background-clip(text);
        @extend .base-pictos;
        font-size: $size;
        content: $character;
        @include background-gradient($color, matte);
    }
}

.base-pictos {
    font-family: Pictos;
    color: transparent;
    @include background-clip(text);
    position: absolute;
    top: 0;
    left: 0;
}