@{dotPrefix}@{component--prefix}-icon,
@{component--prefix}-icon {
  display: inline-block;
  vertical-align: middle;
}

@{dotPrefix}@{component--prefix}-icon @{dotPrefix}@{component--prefix}-icon__icon,
@{component--prefix}-icon svg {
  width: @icon--size;
  height: @icon--size;
  display: block;
}

@{dotPrefix}@{component--prefix}-icon__icon {
  display: inline-block;
}

@{component--prefix}-icon svg * {
  fill: #000 !important;
}

@{dotPrefix}@{component--prefix}-icon--small @{dotPrefix}@{component--prefix}-icon__icon,
@{component--prefix}-icon[small] svg {
  height: @icon-small--size;
  width: @icon-small--size;
}

@{dotPrefix}@{component--prefix}-icon--medium @{dotPrefix}@{component--prefix}-icon__icon,
@{component--prefix}-icon[medium] svg {
  height: @icon-medium--size;
  width: @icon-medium--size;
}

@{dotPrefix}@{component--prefix}-icon--large @{dotPrefix}@{component--prefix}-icon__icon,
@{component--prefix}-icon[large] svg {
  height: @icon-large--size;
  width: @icon-large--size;
}

@{component--prefix}-icon[iconset="pom"][small] svg {
  height: @icon-small--size + @icon-extra--size;
  width: @icon-small--size + @icon-extra--size;
}

@{component--prefix}-icon[iconset="pom"][medium] svg {
  height: @icon-medium--size + @icon-extra--size;
  width: @icon-medium--size + @icon-extra--size;
}

@{component--prefix}-icon[iconset="pom"][large] svg {
  height: @icon-large--size + @icon-extra--size;
  width: @icon-large--size + @icon-extra--size;
}

@{component--prefix}-icon[iconset="pom"] svg {
  background: #000;
  border-radius: 50%;
  width: @icon--size + @icon-extra--size;
  height: @icon--size + @icon-extra--size;
}

@{component--prefix}-icon[iconset="pom"] svg * {
  fill: #fff !important;
}

// CIRCULAR BACKGROUND
// =============================================================================
@{component--prefix}-icon[circle] {
  svg {
    border-radius: 50%;
  }
}

// DIFFERENT BACKGROUNDS
// =============================================================================
@{component--prefix}-icon[bg-color]:not([iconset="pom"]) {
  svg {
    padding: @gutter--width / 2;
  }
}

@{component--prefix}-icon[bg-color="champagne"] {
  svg {
    background-color: @champagne;
    * {
      fill: @black !important;
    }
  }
}

@{component--prefix}-icon[bg-color="champagne-25"] {
  svg {
    background-color: @champagne-25;
    * {
      fill: @champagne !important;
    }
  }
}

@{component--prefix}-icon[bg-color="black"] {
  svg {
    background-color: @black;
    * {
      fill: @white !important;
    }
  }
}

@{component--prefix}-icon[bg-color="blue"] {
  svg {
    background-color: @beyerdynamic-blue;
    * {
      fill: @white !important;
    }
  }
}

@{component--prefix}-icon[bg-color="white"] {
  svg {
    background-color: @white;
    * {
      fill: @black !important;
    }
  }
}

// DIFFERENT COLORS
// =============================================================================
@{component--prefix}-icon[color="champagne"] {
  svg {
    * {
      fill: @champagne !important;
    }
  }
}

@{component--prefix}-icon[color="champagne-25"] {
  svg {
    * {
      fill: @champagne-25 !important;
    }
  }
}

@{component--prefix}-icon[color="black"] {
  svg {
    * {
      fill: @black !important;
    }
  }
}

@{component--prefix}-icon[color="blue"] {
  svg {
    * {
      fill: @beyerdynamic-blue !important;
    }
  }
}

@{component--prefix}-icon[color="white"] {
  svg {
    * {
      fill: @white !important;
    }
  }
}

/* generate icon classes */
.make-icon54-icons-classes();
//.make-material-icons-classes();
