.icon
  --icon-bg-margin-left: 3px
  --icon-bg-margin-top: 8px
  --icon-bg-gap-size: 1px
  --icon-bg-size: 20px

  /* Default values.*/
  --icon-bg-column-x: 1
  --icon-bg-column-y: 1

  /* Calculate */
  --icon-offset-gap-x: calc(var(--icon-bg-column-x) * var(--icon-bg-gap-size))
  --icon-offset-size-x: calc(var(--icon-bg-column-x) * var(--icon-bg-size))

  --icon-offset-gap-y: calc(var(--icon-bg-column-y) * var(--icon-bg-gap-size))
  --icon-offset-size-y: calc(var(--icon-bg-column-y) * var(--icon-bg-size))

  --icon-offset-x: calc(calc(calc(var(--icon-bg-margin-left) + calc(var(--icon-offset-gap-x) + var(--icon-offset-size-x))) * -1) + var(--icon-bg-size) + var(--icon-bg-gap-size))
  --icon-offset-y: calc(calc(calc(var(--icon-bg-margin-top) + calc(var(--icon-offset-gap-y) + var(--icon-offset-size-y))) * -1) + var(--icon-bg-size) + var(--icon-bg-gap-size) )

  /* Generate variable names based on column and assign them a number.
   * This number will be used to multiply * times the size and offset the background image. */
  $rows: 'a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z','aa','ba','ca','da'

  @each $row in $rows
    $i: index($rows, $row)
    --icon-svg-column-#{$row}: #{$i}

  align-items: center
  background-image: url('../../assets/img/blender_icons.svg')
  background-position-x: var(--icon-offset-x)
  background-position-y: var(--icon-offset-y)
  background-repeat: no-repeat
  display: inline-flex
  height: var(--icon-size)
  justify-content: center
  opacity: .7
  width: var(--icon-size)

  /* UI. */
  &.icon-blender-logo
    --icon-bg-column-x: 25
    --icon-bg-column-y: var(--icon-svg-column-c)

  &.icon-canvas
    --icon-bg-column-x: 2
    --icon-bg-column-y: var(--icon-svg-column-a)
 
  &.icon-outliner
    --icon-bg-column-x: 3
    --icon-bg-column-y: var(--icon-svg-column-z)

  &.icon-plus
    --icon-bg-column-x: 6
    --icon-bg-column-y: var(--icon-svg-column-ca)

  &.icon-overlay
    --icon-bg-column-x: 6
    --icon-bg-column-y: var(--icon-svg-column-f)

  &.icon-orthomode
    --icon-bg-column-x: 4
    --icon-bg-column-y: var(--icon-svg-column-l)

  &.icon-snap-off
    --icon-bg-column-x: 6
    --icon-bg-column-y: var(--icon-svg-column-h)

  &.icon-snap-options
    --icon-bg-column-x: 13
    --icon-bg-column-y: var(--icon-svg-column-h)

  &.icon-snap-off
    --icon-bg-column-x: 5
    --icon-bg-column-y: var(--icon-svg-column-h)

  &.icon-x
    --icon-bg-column-x: 8
    --icon-bg-column-y: var(--icon-svg-column-ca)

  &.icon-dropdown
    --icon-bg-column-x: 21
    --icon-bg-column-y: var(--icon-svg-column-ca)

  &.icon-drag
    --icon-bg-column-x: 17
    --icon-bg-column-y: var(--icon-svg-column-da)
    +is_last_row_icon

  &.icon-angle-left,
  &.icon-angle-right
    --icon-bg-column-x: 3
    --icon-bg-column-y: var(--icon-svg-column-ca)

  &.icon-angle-left
    transform: scaleX(-1)

  &.icon-collapse
    --icon-bg-column-x: 12
    --icon-bg-column-y: var(--icon-svg-column-da)
    +is_last_row_icon
    &.on
      --icon-bg-column-x: 11

  &.icon-dots
    --icon-bg-column-x: 23
    --icon-bg-column-y: var(--icon-svg-column-ba)

  &.icon-fake-user
    --icon-bg-column-x: 25
    --icon-bg-column-y: var(--icon-svg-column-aa)
    &.on
      --icon-bg-column-x: 26

  &.icon-duplicate
    --icon-bg-column-x: 21
    --icon-bg-column-y: var(--icon-svg-column-da)
    +is_last_row_icon

  &.icon-trash
    --icon-bg-column-x: 22
    --icon-bg-column-y: var(--icon-svg-column-da)
    +is_last_row_icon

  &.icon-info
    --icon-bg-column-x: 7
    --icon-bg-column-y: var(--icon-svg-column-z)

  &.icon-pin
    --icon-bg-column-x: 17
    --icon-bg-column-y: var(--icon-svg-column-ca)
    &.on
      --icon-bg-column-x: 18

  &.icon-selected
    --icon-bg-column-x: 22
    --icon-bg-column-y: var(--icon-svg-column-u)
    &.on
      --icon-bg-column-x: 23

  &.icon-mute
    --icon-bg-column-x: 23
    --icon-bg-column-y: var(--icon-svg-column-k)
    &.on
      --icon-bg-column-x: 22

  &.icon-search
    --icon-bg-column-x: 5
    --icon-bg-column-y: var(--icon-svg-column-ca)

  /* Data. */
  &.icon-mesh
    --icon-bg-column-x: 2
    --icon-bg-column-y: var(--icon-svg-column-t)

  /* Restrict. */
  &.icon.icon-restrict-view
    --icon-bg-column-x: 21
    --icon-bg-column-y: var(--icon-svg-column-u)

  &.icon-restrict-edit-mode
    --icon-bg-column-x: 2
    --icon-bg-column-y: var(--icon-svg-column-y)

  &.icon-restrict-screen
    --icon-bg-column-x: 25
    --icon-bg-column-y: var(--icon-svg-column-t)

  &.icon-restrict-render
    --icon-bg-column-x: 25
    --icon-bg-column-y: var(--icon-svg-column-u)

  /* Modifiers. */
  &.icon-modifier
    --icon-bg-column-x: 1
    --icon-bg-column-y: var(--icon-svg-column-m)
    --icon-bg-margin-left: 5px

  &.icon-mod-decimate
    --icon-bg-column-x: 4
    --icon-bg-column-y: var(--icon-svg-column-m)

  &.icon-editor-node, &.icon-mod-node
    --icon-bg-column-x: 16
    --icon-bg-column-y: var(--icon-svg-column-z)

  &.icon-mod-triangulate
    --icon-bg-column-x: 14
    --icon-bg-column-y: var(--icon-svg-column-l)

  /* Editors. */
  &.icon-editor-properties
    --icon-bg-column-x: 4
    --icon-bg-column-y: var(--icon-svg-column-z)

  &.icon-editor-terminal
    --icon-bg-column-x: 18
    --icon-bg-column-y: var(--icon-svg-column-z)

  &.icon-editor-svgcad
    --icon-bg-column-x: 4
    --icon-bg-column-y: var(--icon-svg-column-m)

  &.icon-properties-collection
    --icon-bg-column-x: 16
    --icon-bg-column-y: var(--icon-svg-column-x)

  /* Properties. */


  &.icon-properties-element
    width: var(--icon-size)
    height: var(--icon-size)
    background-image: url('../../assets/img/icons/properties-element.svg')
    background-position-x: 3px
    background-position-y: 3px
    fill: yellow
    display: inline-flex
    align-items: center
    justify-content: center
    background-repeat: no-repeat
