@mixin darkIcon {
  &::v-deep {
    svg {
      * {
        &[stroke] {
          &[stroke]:not([stroke="white"]) {
            stroke: var(--active-color);
          }
        }

        &[fill] {
          &[fill]:not([fill="white"]) {
            fill: var(--active-color);
          }
        }
      }
    }
  }
}

@mixin defaultIcon {
  svg {
    * {
      &[stroke] {
        &[stroke]:not([stroke="white"]) {
          stroke: var(--icon-color);
        }
      }

      &[fill] {
        &[fill]:not([fill="white"]) {
          fill: var(--icon-color);
        }
      }
    }
  }
}

@mixin defaultIconWithoutWhite {
  svg {
    * {
      &[stroke] {
        stroke: var(--icon-color);
      }

      &[fill] {
        fill: var(--icon-color);
      }
    }
  }
}

.svgIcon {

  display: flex;
  align-items: center;

  > * {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  &:not(.inheritIconColor) {
    @include defaultIcon;

    &.ignoreWhite {
      @include defaultIconWithoutWhite;
    }

    &:not([classicHover]) {

      &.hovered {
        &::v-deep {
          svg {
            * {
              &[stroke] {
                &[stroke]:not([stroke="white"]) {
                  stroke: var(--hover-color);
                }
              }

              &[fill] {
                &[fill]:not([fill="white"]) {
                  fill: var(--hover-color);
                }
              }
            }
          }
        }
      }

      &.active {
        @include darkIcon;
      }
    }

    &[classicHover] {
      transition: 0.2s;

      &:hover {
        opacity: 0.8;
      }
    }

    &[dark] {
      @include darkIcon;
    }
  }

  .inheritIconColor {
    transition: 0.2s;

    &:hover {
      opacity: 0.8;
    }
  }

  &[noHover] {
    pointer-events: none;
  }

}