@font-face {
  font-family: "icomoon";
  // src: url("./fonts/sb-icons/icomoon.eot?q5fmh5");
  // src: url("./fonts/sb-icons/icomoon.eot?q5fmh5#iefix")
  //     format("embedded-opentype"),
  //   url("./fonts/sb-icons/icomoon.ttf?q5fmh5") format("truetype"),
  //   url("./fonts/sb-icons/icomoon.woff?q5fmh5") format("woff"),
  //   url("./fonts/sb-icons/icomoon.svg?q5fmh5#icomoon") format("svg");
  src: url("../fonts/sb-icons/icomoon.eot");
  src: url("../fonts/sb-icons/icomoon.eot")
      format("embedded-opentype"),
    url("../fonts/sb-icons/icomoon.ttf") format("truetype"),
    url("../fonts/sb-icons/icomoon.woff") format("woff"),
    url("../fonts/sb-icons/icomoon.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}

[class^="sb-icon-"],
[class*=" sb-icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: "icomoon" !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  font-size: inherit;
  text-transform: none;
  line-height: inherit;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.sb-icon-preview:before {
  content: "\e909";
}
.sb-icon-refresh:before {
  content: "\e90c";
}
.sb-icon-reviewer:before {
  content: "\e90a";
}
.sb-icon-folder:before {
  content: "\e902";
}
.sb-icon-comment:before {
  content: "\e908";
}
.sb-icon-send:before {
  content: "\e90b";
}
.sb-icon-book:before {
  content: "\e900";
}
.sb-icon-content:before {
  content: "\e901";
}
.sb-icon-collection:before {
  content: "\e903";
}
.sb-icon-doc:before {
  content: "\e904";
}
.sb-icon-mp3:before {
  content: "\e905";
}
.sb-icon-open-book:before {
  content: "\e906";
}
.sb-icon-video:before {
  content: "\e907";
}
.sb-lock-icon {
  cursor: pointer;
}
/*[class*="sb-icon-"] {
  -webkit-mask-size: contain;
  -webkit-mask-position: 50% 50%;
  -webkit-mask-repeat: no-repeat;
  mask-size: contain;
  mask-position: 50% 50%;
  mask-repeat: no-repeat;
  background-color: $primary-color;
  width: 16px;
  height: 16px;
  display: inline-block;
  cursor: pointer;
}
*/
[class*="sb-icon-primary"] {
  background-color: $primary-color;
}

[class*="sb-icon-secondary"] {
  background-color: $secondary-color;
}

[class*="sb-icon-warning"] {
  background-color: $tertiary-color;
}

[class*="sb-icon-error"] {
  background-color: $red;
}

// [class*="sb-icon-edit-user"] {
//   -webkit-mask-image: url(../../assets/images/edit-icon.svg);
//   mask-image: url(../../assets/images/edit-icon.svg);
// }

// [class*="sb-icon-delete-user"] {
//   -webkit-mask-image: url(../../assets/images/delete-icon.svg);
//   mask-image: url(../../assets/images/delete-icon.svg);
// }

// [class*="sb-icon-info"] {
//   -webkit-mask-image: url(../../assets/images/info-icon.svg);
//   mask-image: url(../../assets/images/info-icon.svg);
// }
[class*="sb-icon-edit-user"] {
  -webkit-mask-image: url(../../images/edit-icon.svg);
  mask-image: url(../../images/edit-icon.svg);
}

[class*="sb-icon-delete-user"] {
  -webkit-mask-image: url(../../images/delete-icon.svg);
  mask-image: url(../../images/delete-icon.svg);
}

[class*="sb-icon-info"] {
  -webkit-mask-image: url(../../images/info-icon.svg);
  mask-image: url(../../images/info-icon.svg);
}

.info-icon {
  background-color: $gray-400;
  -webkit-mask-size: contain;
  -webkit-mask-position: 50% 50%;
  -webkit-mask-repeat: no-repeat;
  mask-size: contain;
  mask-position: 50% 50%;
  mask-repeat: no-repeat;
  width: 16px;
  height: 16px;
  margin-left: 4px;
  display: inline-block;
  vertical-align: bottom;
}

//common consumption library

// icons
.icon-arrow-round-down {
  transform: rotate(90deg);
}
.icon-svg {
  position: relative;
  top: 1px;
  display: inline-block;
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  opacity: 1;
  svg.icon {
    width: 100%;
    height: inherit;
  }
  //sizes
  &--xxs {
    width: var(--icon-svg-xxs);
    height: var(--icon-svg-xxs);
  }
  &--xs {
    width: var(--icon-svg-xs);
    height: var(--icon-svg-xs);
  }
  &--sm {
    width: var(--icon-svg-sm);
    height: var(--icon-svg-sm);
  }
  &--md {
    width: var(--icon-svg-md);
    height: var(--icon-svg-md);
  }
  &--lg {
    width: var(--icon-svg-lg);
    height: var(--icon-svg-lg);
  }
  &--xl {
    width: var(--icon-svg-xl);
    height: var(--icon-svg-xl);
  }

  //colors
  &--white {
    fill: var(--white);
  }
  &--primary,
  &--info {
    fill: var(--primary-color);
  }
  &--secondary,
  &--success {
    fill: var(--secondary-color);
  }
  &--tertiary,
  &--warning {
    fill: var(--tertiary-color);
  }
  &--red,
  &--error {
    fill: var(--red-400);
  }
  &--gray {
    fill: var(--gray-800);
  }
}