/* Mixins */

@mixin nwfjsChevron($direction, $fill:#454545) {
    content: ' ' !important;
    width: 18px;
    height: 18px;
    background-repeat: no-repeat;

    @if $direction == "up" {
        background-image: str-replace(url("data:image/svg+xml,%3C?xml version='1.0' encoding='UTF-8'?%3E %3Csvg width='18px' height='18px' viewBox='0 0 18 18' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E %3C!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch --%3E %3Ctitle%3Eicon-misc-chevronup%3C/title%3E %3Cdesc%3ECreated with Sketch.%3C/desc%3E %3Cdefs%3E%3C/defs%3E %3Cg id='icon-misc-chevronup' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E %3Cpolygon id='base-layer' fill='#{$fill}' fill-rule='nonzero' transform='translate(8.705000, 8.000000) rotate(-90.000000) translate(-8.705000, -8.000000) ' points='6.41 2 5 3.41 9.58 8 5 12.59 6.41 14 12.41 8'%3E%3C/polygon%3E %3C/g%3E %3C/svg%3E"), "#", "%23") !important;
    }
    @else if $direction == "down" {
        background-image: str-replace(url("data:image/svg+xml,%3C?xml version='1.0' encoding='UTF-8'?%3E %3Csvg width='18px' height='18px' viewBox='0 0 18 18' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E %3C!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch --%3E %3Ctitle%3Eicon-misc-chevrondown%3C/title%3E %3Cdesc%3ECreated with Sketch.%3C/desc%3E %3Cdefs%3E%3C/defs%3E %3Cg id='icon-misc-chevrondown' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E %3Cpolygon id='base-layer' fill='#{$fill}' fill-rule='nonzero' transform='translate(8.705000, 8.000000) scale(1, -1) rotate(-90.000000) translate(-8.705000, -8.000000) ' points='6.41 2 5 3.41 9.58 8 5 12.59 6.41 14 12.41 8'%3E%3C/polygon%3E %3C/g%3E %3C/svg%3E"), "#", "%23") !important;
    }
    @else if $direction == "left" {
        background-image: str-replace(url("data:image/svg+xml,%3C?xml version='1.0' encoding='UTF-8'?%3E %3Csvg width='18px' height='18px' viewBox='0 0 18 18' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E %3C!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch --%3E %3Ctitle%3Eicon-misc-chevronleft%3C/title%3E %3Cdesc%3ECreated with Sketch.%3C/desc%3E %3Cdefs%3E%3C/defs%3E %3Cg id='icon-misc-chevronleft' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E %3Cpolygon id='base-layer' fill='#{$fill}' fill-rule='nonzero' transform='translate(9.295000, 9.000000) scale(-1, 1) translate(-9.295000, -9.000000) ' points='7 3 5.59 4.41 10.17 9 5.59 13.59 7 15 13 9'%3E%3C/polygon%3E %3C/g%3E %3C/svg%3E"), "#", "%23") !important;
    }
    @else {
        background-image: str-replace(url("data:image/svg+xml,%3C?xml version='1.0' encoding='UTF-8'?%3E %3Csvg width='18px' height='18px' viewBox='0 0 18 18' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E %3C!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch --%3E %3Ctitle%3Eicon-misc-chevronright%3C/title%3E %3Cdesc%3ECreated with Sketch.%3C/desc%3E %3Cdefs%3E%3C/defs%3E %3Cg id='icon-misc-chevronright' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E %3Cpolygon id='base-layer' fill='#{$fill}' fill-rule='nonzero' points='7 3 5.59 4.41 10.17 9 5.59 13.59 7 15 13 9'%3E%3C/polygon%3E %3C/g%3E %3C/svg%3E"), "#", "%23") !important;
    }
}

/* States */
@mixin states {
    @each $color, $value in $theme-colors {
        &.is-#{$color} {
            background-color: $value;
        }
    }
}