@import 'variables';

img.icon {
  background-color: $gray-light;
  border: none;
  height: 24px;
  margin: -3px 4px -3px 0px;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  min-width: 24px;
  width: 24px;

  &.icon-color {
    background-color: $brand-color-3;
  }

  &.icon-dark {
    background-color: $text-medium;
  }

  // TODO - Add other icons here


  &.icon-alert {
    -webkit-mask-image: url('/static/images/icons/Alert-Triangle.svg');
    mask-image: url('/static/images/icons/Alert-Triangle.svg');
  }

   &.icon-bookmark {
    -webkit-mask-image: url('/static/images/icons/Favorite.svg');
    mask-image: url('/static/images/icons/Favorite.svg');
  }

   &.icon-bookmark-filled {
    -webkit-mask-image: url('/static/images/icons/Favorite-Filled.svg');
    mask-image: url('/static/images/icons/Favorite-Filled.svg');
  }

  &.icon-delete {
    -webkit-mask-image: url('/static/images/icons/Trash.svg');
    mask-image: url('/static/images/icons/Trash.svg');
  }

  &.icon-database {
    -webkit-mask-image: url('/static/images/icons/Database.svg');
    mask-image: url('/static/images/icons/Database.svg');
  }

  &.icon-down {
    -webkit-mask-image: url('/static/images/icons/Down.svg');
    mask-image: url('/static/images/icons/Down.svg');
  }

  &.icon-github {
    -webkit-mask-image: url('/static/images/icons/github.svg');
    mask-image: url('/static/images/icons/github.svg');
  }

  &.icon-left {
    -webkit-mask-image: url('/static/images/icons/Left.svg');
    mask-image: url('/static/images/icons/Left.svg');
  }

  &.icon-loading {
    -webkit-mask-image: url('/static/images/icons/Loader.svg');
    mask-image: url('/static/images/icons/Loader.svg');
  }

  &.icon-mail {
    -webkit-mask-image: url('/static/images/icons/mail.svg');
    mask-image: url('/static/images/icons/mail.svg');
  }

  &.icon-plus-circle {
    -webkit-mask-image: url('/static/images/icons/Plus-Circle.svg');
    mask-image: url('/static/images/icons/Plus-Circle.svg');
  }

  &.icon-preview {
    -webkit-mask-image: url('/static/images/icons/Preview.svg');
    mask-image: url('/static/images/icons/Preview.svg');
  }

  &.icon-refresh {
    -webkit-mask-image: url('/static/images/icons/Refresh-cw.svg');
    mask-image: url('/static/images/icons/Refresh-cw.svg');
  }

  &.icon-right {
    -webkit-mask-image: url('/static/images/icons/Right.svg');
    mask-image: url('/static/images/icons/Right.svg');
  }

  &.icon-search {
    -webkit-mask-image: url('/static/images/icons/Search.svg');
    mask-image: url('/static/images/icons/Search.svg');
  }

  &.icon-slack {
    -webkit-mask-image: url('/static/images/icons/slack.svg');
    mask-image: url('/static/images/icons/slack.svg');
  }

  &.icon-up {
    -webkit-mask-image: url('/static/images/icons/Up.svg');
    mask-image: url('/static/images/icons/Up.svg');
  }

  &.icon-users {
    -webkit-mask-image: url('/static/images/icons/users.svg');
    mask-image: url('/static/images/icons/users.svg');
  }

  &.icon-more {
    -webkit-mask-image: url('/static/images/icons/More.svg');
    mask-image: url('/static/images/icons/More.svg');
  }
}

.disabled,
:disabled {
  > img.icon,
  > img.icon.icon-color {
    background-color: $gray-light;
  }
}
