.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