/* Triangle
   ========================================================================== */
.triangle-down {
    display: inline-block;
    @util triangle(12px, gray, down);
    margin-right: 10px;
}

.triangle-up {
    display: inline-block;
    @util triangle(12px, gray, up);
}

.triangle-left {
    display: inline-block;
    @util triangle(12px, gray, left);
}

.triangle-right {
    display: inline-block;
    @util triangle(12px, gray, right);
}

.triangle-up-left {
    display: inline-block;
    @util triangle(20px, gray, up-left);
}

.triangle-up-right {
    display: inline-block;
    @util triangle(20px, gray, up-right);
}

.triangle-down-left {
    display: inline-block;
    @util triangle(20px, gray, down-left);
}

.triangle-down-right {
    display: inline-block;
    @util triangle(20px, gray, down-right);
}

.triangle-default {
    @util triangle;
}