@import '../bootstrap'
@import '../theme'

/* Themes */
icon($material)
  color: $material.icons.active

  &.icon--disabled:not(.input-group__append-icon)
    color: $material.icons.inactive !important

theme(icon, "icon")

.icon
  align-items: center
  display: inline-flex
  font-feature-settings: 'liga'
  font-size: 24px
  justify-content: center
  line-height: 1
  transition: $primary-transition
  vertical-align: middle

  &.icon--large
    font-size: 2.5rem

  &.icon--medium
    font-size: 2rem

  &.icon--x-large
    font-size: 3rem

  &.icon--disabled
    pointer-events: none