@import '~styles/variables'
@import '~styles-lib/mixins'

.-options-wrap
	display: flex
	align-items: flex-start
	justify-content: center
	width: var(--fireside-host-size)
	height: var(--fireside-host-size)

.-options
	elevate-1()
	img-circle()
	display: flex
	align-items: center
	justify-content: center
	width: calc(var(--fireside-host-size) - 12px)
	height: calc(var(--fireside-host-size) - 12px)
	cursor: pointer
	user-select: none
	color: var(--theme-fg)
	background-color: var(--theme-bg-offset)

	&:hover
		background-color: var(--theme-bi-bg)
		color: var(--theme-bi-fg)

.-icon
	font-size: 20px
