.#{$icon} {
  --icon-radius: var(--radius-lg);
  --icon-size: #{size(map.get($conf_icon, 'size'))};
  --icon-bg-color: var(--bg-hover);
  display: inline-flex;
  position: relative;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  font-style: normal;
  width: var(--icon-size);
  height: var(--icon-size);
  flex-shrink: 0;
  flex-grow: 0;
  color: var(--icon-color);
  &.disabled {
    color: var(--form-disabled-font-color);
  }
  .icon-system {
    --stroke-width: #{map.get($conf_icon, 'stroke-width')};
    --fill-opacity: #{map.get($conf_icon, 'opacity')};  
    g {
      fill-opacity: var(--fill-opacity);
      stroke-width: var(--stroke-width);
      stroke-linecap: round;
      stroke-linejoin: round;
      fill-rule: evenodd;
      fill: currentColor;
    }
  }

  svg {
    width: 100%;
    height: 100%;
    display: block;
    color: currentColor;
  }

  &.fill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--icon-size) * 2);
    height: calc(var(--icon-size) * 2);
    background-color: var(--icon-bg-color);

    &.radius {
      border-radius: var(--icon-radius);
    }

    &.round {
      border-radius: var(--radius-round);
    }

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

  &.transition {
    &:hover {
      path {
        stroke-dasharray: 100;
        stroke-dashoffset: 100;
        animation: dash 2s ease-out forwards;
      }
      @keyframes dash {
        to {
          stroke-dashoffset: 0;
        }
      }
    }
  }
}