// // icon.scss // Dashkit component //

// Icon // // General styles

.icon {

display: inline-block;
// Feather icon
> .fe {
  display: block;
  min-width: 1em * $line-height-base;
  min-height: 1em * $line-height-base;
  text-align: center;
  font-size: $font-size-lg;
}
// Active state
&.active {
  position: relative;
  // Feather icon
  > .fe {
    mask-image: url(image-path("desk_front/icon-status.svg"));
    mask-size: 100% 100%;
  }
  // Indicator
  &::after {
    content: "";
    position: absolute;
    top: 10%; right: 20%;
    width: 20%; height: 20%;
    border-radius: 50%;
    background-color: $primary;
  }
}

}

// Feather icons // // Fixes icon / font vertical alignment issue

.fe {

line-height: inherit;

}