/* Closed eye disabled */
.icon-view-visibleoff {
    #base-layer {
        fill: $gray-300;
    }
}

/* visible eyes can be colored from the parent */
.icon-view-visible svg {
    fill: currentColor;
}

/* Now style collections, this is temporary since I really want currentColor on all collections */

div[class*=" icon-misc"], div[class*=" icon-view"], div[class*=" icon-action"], div[class*=" icon-nav"] {
    #base-layer {
        fill: currentColor;
    }
}


/* Icon ports have states */
.icon-misc-port-mgmt, .icon-misc-port-data {
    &.is-ok {
        color: $green-200;
    }
    &.is-error {
        color: $red-300;
    }
    &:disabled {
        color: $gray-300;
    }
    #base-layer {
        fill: currentColor;
    }
}

/* Status Icons */

@each $status, $colorMap in $alert-color-theme {
    $icon: map-get($colorMap, icon);
    g#icon-status-#{$status} {
        #glyph {
            fill: $white;
        }
    
        #base-layer {
            fill: $icon;
        }
    }
}

.ontap-severity {
    @each $status, $color in $ntap-icon-colors {
        g#icon-status-#{$status} {
           #glyph {
               fill: $white;
           }
           #base-layer {
               fill: $color;
           }
       }
   }
}


/*OnTap Status Icons */

/* Protected status */
g[id$="action-protected"] {
    #base-layer {
        fill: $success;
    }
}

/* I have to expose these as classes since we use them in a non angular context like highcharts I 
dont apply this if i have an ng-bind-html so I can exclude angular.js, someday do to angular */
.icon-status-info:not(.nwf-icon) {
    content: ' ';
    width: 20px;
    height: 20px;
    display: inline-flex;
    background-repeat: no-repeat;
    background-image: url("~@netapp/nwfjs_theme/icons/png/icon-status-info.png");
}

.icon-status-warning:not(.nwf-icon) {
    content: ' ';
    width: 20px;
    height: 20px;
    display: inline-flex;
    background-repeat: no-repeat;
    background-image: url("~@netapp/nwfjs_theme/icons/png/icon-status-warning.png");
}

.icon-status-critical:not(.nwf-icon) {
    content: ' ';
    width: 20px;
    height: 20px;
    display: inline-flex;
    background-repeat: no-repeat;
    background-image: url("~@netapp/nwfjs_theme/icons/png/icon-status-critical.png");
}

.icon-status-error-full:not(.nwf-icon) {
    content: ' ';
    width: 20px;
    height: 20px;
    display: inline-flex;
    background-repeat: no-repeat;
    background-image: url("~@netapp/nwfjs_theme/icons/png/icon-status-error-full.png");
}

/* use .nwf-icon-label to do labels to the right of <nwf-icon> */
.nwf-icon-label {
    display: inline-block;
    margin-left: 4px;
}

/* Loading indicator icon */
.icon-info-loader.nwf-icon {
    width: 18px;
    height: 18px;
    background-image: url("~@netapp/nwfjs_theme/icons/icon-info-loader.gif");
}