@use 'sass:map'
@use '../../styles/settings'
@use './variables' as *

.v-icon
  --v-icon-size-multiplier: 1
  align-items: center
  display: inline-flex
  font-feature-settings: 'liga'
  height: $icon-size
  justify-content: center
  letter-spacing: $icon-letter-spacing
  line-height: $icon-line-height
  position: relative
  text-indent: $icon-text-indent
  text-align: center
  user-select: none
  vertical-align: $icon-vertical-align
  width: $icon-size
  min-width: $icon-size

  &--clickable
    cursor: pointer

  @each $name in settings.$sizes
    &--size-#{$name}
      font-size: calc(var(--v-icon-size-multiplier) * #{map.get($icon-sizes, $name)})

.v-icon__svg
  fill: currentColor
  width: 100%
  height: 100%

.v-icon--start
  margin-inline-end: $icon-margin-start

.v-icon--end
  margin-inline-start: $icon-margin-end