// glyphs
.wj-glyph {
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    text-align: center;
    opacity: .75;
    cursor: pointer;
}

.wj-glyph-asterisk {
    @extend .wj-glyph;
    &:after {
        content: '\2731\fe0e'
    }
}

.wj-glyph-calendar {
    @extend .wj-glyph;
    width: 1em;
    height: 1em;
    border: .1em solid;
    border-top: .3em solid;
    transform: translateY(.15em);
    &:after {
        position: absolute;
        font-size: 50%;
        left: .5em;
        content: '1';
    }
}

.wj-glyph-check {
    @extend .wj-glyph;
    &:after {
        content: '\2714\fe0e';
        font-weight: bold
    }
}

.wj-glyph-circle {
    @extend .wj-glyph;
    border: .3em solid;
    border-radius: 50%;
    transform: translateY(-.1em);
}

.wj-glyph-clipboard {
    @extend .wj-glyph;
    &:after {
        content: '\1f4cb\fe0e'
    }
}

.wj-glyph-clock {
    @extend .wj-glyph;
    width: 1em;
    height: 1em;
    border: .1em solid;
    border-radius: 50%;
    transform: translateY(.15em);
    &:after {
        position: absolute;
        border-left: .1em solid;
        border-bottom: .1em solid;
        width: .25em;
        height: .3em;
        top: .1em;
        left: .35em;
        content: '';
    }
}

.wj-glyph-diamond {
    @extend .wj-glyph;
    &:after {
        content: '\25c6\fe0e'
    }
}

.wj-glyph-dimension {
    @extend .wj-glyph;
    &:after {
        content: '\27c0\fe0e'
    }
}

.wj-glyph-down {
    @extend .wj-glyph;
    top: -1px;
    border-top: .5em solid;
    border-right: .4em solid transparent;
    border-left: .4em solid transparent;
}

.wj-glyph-down-left {
    @extend .wj-glyph;
    border-top: .65em solid transparent;
    border-left: .65em solid;
}

.wj-glyph-down-right {
    @extend .wj-glyph;
    top: -2px;
    border-bottom: .65em solid;
    border-left: .65em solid transparent;
}

.wj-glyph-file {
    @extend .wj-glyph;
    border-left: .7em solid;
    height: .85em;
    &:after {
        position: absolute;
        transform: translateX(-100%);
        border-top: .3em solid transparent;
        border-left: .3em solid white;
        content: '';
    }
}

.wj-glyph-left {
    @extend .wj-glyph;
    border-top: .4em solid transparent;
    border-right: .5em solid;
    border-bottom: .4em solid transparent;
}

.wj-glyph-measure {
    @extend .wj-glyph;
    &:after {
        content: '\1f4ca\fe0e'
    }
}

.wj-glyph-plus, .wj-glyph-minus {
    @extend .wj-glyph;
    border-top: .25em solid;
    width: .9em;
    top: -.3em;
}
.wj-glyph-plus:after {
    position: absolute;
    box-sizing: border-box;
    border-left: .25em solid;
    width: .25em;
    height: .95em;
    left: .3em;
    top: -.6em;
    content: '';
}

.wj-glyph-pencil {
    @extend .wj-glyph;
    &:after {
        content: '\270e\fe0e'
    }
}

.wj-glyph-right {
    @extend .wj-glyph;
    border-top: .4em solid transparent;
    border-bottom: .4em solid transparent;
    border-left: .5em solid;
}

.wj-glyph-square {
    @extend .wj-glyph;
    border: .25em solid;
}

.wj-glyph-step-backward {
    @extend .wj-glyph;
    border-top: .4em solid transparent;
    border-right: .5em solid;
    border-bottom: .4em solid transparent;
    transform: translateX(.12em);

    &:after {
        position: absolute;
        border-left: .2em solid;
        height: .75em;
        transform: translate(-100%,-50%);
        content: '';
    }
}
[dir=rtl] .wj-glyph-step-backward:after {
    transform: translate(0, -50%);
}

.wj-glyph-step-forward {
    @extend .wj-glyph;
    border-top: .4em solid transparent;
    border-bottom: .4em solid transparent;
    border-left: .5em solid;

    &:after {
        position: absolute;
        border-left: .2em solid;
        height: .75em;
        transform: translateY(-50%);
        content: '';
    }
}
[dir=rtl] .wj-glyph-step-forward:after {
    transform: translate(100%, -50%);
}

.wj-glyph-up {
    @extend .wj-glyph;
    border-right: .4em solid transparent;
    border-bottom: .5em solid;
    border-left: .4em solid transparent;
}

.wj-glyph-up-left {
    @extend .wj-glyph;
    border-bottom: .65em solid transparent;
    border-left: .65em solid;
}

.wj-glyph-up-right {
    @extend .wj-glyph;
    border-top: .65em solid;
    border-left: .65em solid transparent;
}

.wj-glyph-filter {
    @extend .wj-glyph;
    top: -.2em;
    width: .5em;
    border-top: .5em solid;
    border-right: .4em solid transparent;
    border-left: .4em solid transparent;
    &:after {
        position: absolute;
        border-left: .2em solid;
        height: .4em;
        transform: translateX(-50%);
        top: -.2em;
        content: '';
    }
}
[dir=rtl] .wj-glyph-filter:after {
    transform: translateX(50%);
}


