.ftIconButton
  display: flex
  flex-flow: row wrap
  justify-content: space-evenly
  position: relative

.iconButton
  width: 1em
  height: 1em
  padding: 10px
  font-size: 20px
  border-radius: 50%
  cursor: pointer
  transition: background 0.15s ease-out

  &.shadow
    box-shadow: 0 1px 2px rgba(0,0,0,.5)

  &.base
    background-color: var(--card-bg-color)
    color: var(--primary-text-color)

    &:hover
      background-color: var(--side-nav-hover-color)

    &:active
      background-color: var(--side-nav-active-color)

  &.primary
    background-color: var(--primary-color)
    color: var(--text-with-main-color)

    &:hover
      background-color: var(--primary-color-hover)

    &:active
      background-color: var(--primary-color-active)

  &.secondary
    background-color: var(--accent-color)
    color: var(--text-with-accent-color)

    &:hover
      background-color: var(--accent-color-hover)

    &:active
      background-color: var(--accent-color-active)

.iconDropdown
  position: absolute
  text-align: center
  list-style-type: none
  z-index: 100
  margin-top: 45px
  font-size: 12px
  box-shadow: 0 1px 2px rgba(0,0,0,.5)
  background-color: var(--side-nav-color)
  color: var(--secondary-text-color)
  user-select: none

  &.left
    right: 50%

  &.right
    left: 50%

  .list
    margin: 0
    padding: 0
    list-style-type: none

  .listItem
    padding: 10px
    margin: 0
    white-space: nowrap
    cursor: pointer
    transition: background 0.2s ease-out

    &:hover
      background-color: var(--side-nav-hover-color)
      transition: background 0.2s ease-in

    &:active
      background-color: var(--side-nav-active-color)
      transition: background 0.1s ease-in