//######################################################################################################################
// #ICONOGRAPHY#

// default font file generated by gulp
@font-face {
    font-family: "django-filer-iconfont";
    src: url("../fonts/django-filer-iconfont.eot?v=3.2.0");
    src: url("../fonts/django-filer-iconfont.eot?v=3.2.0#iefix") format("eot"),
         url("../fonts/django-filer-iconfont.woff2?v=3.2.0") format("woff2"),
         url("../fonts/django-filer-iconfont.woff?v=3.2.0") format("woff"),
         url("../fonts/django-filer-iconfont.ttf?v=3.2.0") format("truetype"),
         url("../fonts/django-filer-iconfont.svg?v=3.2.0#django-filer-iconfont") format("svg");
    font-weight: normal;
    font-style: normal;
}

%icon {
    display: inline-block;
    font-family: django-filer-iconfont;
    font-size: inherit;
    text-rendering: auto;
    line-height: 1;
    transform: translate(0, 0);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

@function icon-char($filename) {
    $char: "";

    @if $filename == arrow-down {
        $char: "E001";
    }
    @if $filename == caret-down {
        $char: "E002";
    }
    @if $filename == chevron-right {
        $char: "E003";
    }
    @if $filename == download {
        $char: "E004";
    }
    @if $filename == expand {
        $char: "E005";
    }
    @if $filename == link {
        $char: "E006";
    }
    @if $filename == move-to-folder {
        $char: "E007";
    }
    @if $filename == picture {
        $char: "E008";
    }
    @if $filename == remove-selection {
        $char: "E009";
    }
    @if $filename == select {
        $char: "E00A";
    }
    @if $filename == th-large {
        $char: "E00B";
    }
    @if $filename == th-list {
        $char: "E00C";
    }
    @if $filename == upload {
        $char: "E00D";
    }

    @return $char;
}

.filer-icon {
    @extend %icon;
}
@mixin icon($filename, $insert: before) {
    &:#{$insert} {
        content: #{"\"\\"}#{icon-char($filename) + "\""};
    }
}

// #####################################################################################################################
// #ICONS:start#
// use unicode characters for accessibility reasons and use aria-hidden="true" for decorative icons
// DOCS: http://filamentgroup.com/lab/bulletproof_icon_fonts.html

.filer-icon-arrow-down {
    @include icon(arrow-down);
}

.filer-icon-caret-down {
    @include icon(caret-down);
}

.filer-icon-chevron-right {
    @include icon(chevron-right);
}

.filer-icon-download {
    @include icon(download);
}

.filer-icon-expand {
    @include icon(expand);
}

.filer-icon-link {
    @include icon(link);
}

.filer-icon-move-to-folder {
    @include icon(move-to-folder);
}

.filer-icon-picture {
    @include icon(picture);
}

.filer-icon-remove-selection {
    @include icon(remove-selection);
}

.filer-icon-select {
    @include icon(select);
}

.filer-icon-th-large {
    @include icon(th-large);
}

.filer-icon-th-list {
    @include icon(th-list);
}

.filer-icon-upload {
    @include icon(upload);
}
