public/components/icons/_icons.scss

/**
 * Workflow global icons.
 */

.wf-icon {
    width: 100%;
    height: 100%;
    vertical-align: middle;

    fill: $c-grey-600;

    &--active {
        @extend .wf-icon;
    }

    &--inactive {
        @extend .wf-icon;

        fill: $c-grey-300;
    }

    &-type {
        &--priority-urgent {
            fill: $c-yellow;
        }

        &--priority-very-urgent {
            fill: $c-red;
        }

        &--priority-low,
        &--priority-very-low {
            transform: rotate(180deg);
        }

        &--priority-low {
            fill: $c-composer-blue;
        }

        &--priority-very-low {
            fill: $c-composer-dark-blue;
        }

        // custom dimensions
        &--view-versions,
        &--optimised-for-web-changed,
        &--optimised-for-web {
            height: 16px;
            width: 16px;
        }
    }
}

// TODO: Move css that references these to use new linked svg icons
$i-arrow-down: url("/assets/components/icons/src/arrow-down.svg");
$i-arrow-up: url("/assets/components/icons/src/arrow-up.svg");