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

.iconButton
  width: 1em
  height: 1em
  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)

  &.base-no-default
    &: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)

  &.favorite
    color: var(--favorite-icon-color)

.iconDropdown
  display: none
  position: absolute
  text-align: center
  list-style-type: none
  z-index: 3
  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

  &:focus
    display: inline

  &.left
    right: calc(50% - 10px)

  &.right
    left: calc(50% - 10px)

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

  .listItem
    padding: 8px 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

  .listItemDivider
    width: 95%
    margin: 1px auto
    border-top: 1px solid var(--tertiary-text-color)
    // Too "visible" with current color
    opacity: 50%