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

@include tools.layer('components')
  .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
    opacity: var(--v-icon-opacity, 1)
    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

    &--disabled
      pointer-events: none
      opacity: $icon-disabled-opacity

    @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