bs5-icon {
  display: inline-flex;

  svg {
    width: 100%;
    height: 100%;
  }

  // black
  &.color-black {
    color: $black;
  }
  &.color-stroke-black {
    svg {
      path {
        stroke: $black !important;
      }
    }
  }

  // gray
  &.color-gray {
    color: colors('gray');
  }
  &.color-stroke-gray {
    svg {
      path {
        stroke: colors('gray') !important;
      }
    }
  }

  // gray-light
  &.color-gray-light {
    color: colors('gray-light');
  }
  &.color-stroke-gray-light {
    svg {
      path {
        stroke: colors('gray-light') !important;
      }
    }
  }

  // gray-lighter
  &.color-gray-lighter {
    color: colors('gray-lighter');
  }
  &.color-stroke-gray-lighter {
    svg {
      path {
        stroke: colors('gray-lighter') !important;
      }
    }
  }

  // white
  &.color-white {
    color: $white;
  }
  &.color-stroke-white {
    svg {
      path {
        stroke: $white !important;
      }
    }
  }

  &.color-primary {
    color: $primary;
  }
  &.color-stroke-primary {
    svg {
      stroke: $primary !important;
      * {
        stroke: $primary !important;
      }
    }
  }
  
  &.color-success {
    color: $success;
  }
  &.color-stroke-success {
    svg {
      stroke: $success !important;
      * {
        stroke: $success !important;
      }
    }
  }
  
  &.color-info {
    color: $info;
  }
  &.color-stroke-info {
    svg {
      stroke: $info !important;
      * {
        stroke: $info !important;
      }
    }
  }
  
  &.color-warning, &.warning {
    color: $warning;
  }
  &.color-stroke-warning {
    svg {
      stroke: $warning !important;
      * {
        stroke: $warning !important;
      }
    }
  }

  &.color-danger, &.danger {
    color: $danger;
  }
  &.color-stroke-danger {
    svg {
      stroke: $danger !important;
      * {
        stroke: $danger !important;
      }
    }
  }
}