@import "../css/colors"
@import "../css/vars"

:local(.floorControl) {
  list-style: none
  display: flex
  flex-direction: column-reverse
  margin: 0
  padding: 0
  position: absolute
  top: 10px
  right: 10px
  box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2)
}

:local(.floorControlItemIconButton) i {
  vertical-align: middle
  line-height: 22px
  font-size: 22px
  margin-left: -10px
}

li button:local(.floorControlItemIconButton) {
  width: 20px
}

:local(.floorControlItemSelected) button:local(.floorControlItemIconButton) {
  border-right: 1px solid $white
  margin-left: -1px
}

:local(.floorControlItemSelected) button:local(.floorControlItemIconButton):hover {
  background: $cyan
  border-color: $cyan
}

li button:local(.floorControlItemIconButtonRenaming) {
  background: $cyan
  border-color: $cyan
}

:local(.floorControlItem) button, :local(.floorControlItem) span {
  transition: top 100ms
  position: relative
  box-sizing: border-box
  height: 50px
  width: calc(100% - 30px)
  text-align: left
  cursor: pointer
  white-space: nowrap
  border: transparent
  background-color: $lightGray
  padding: 15px
  outline: none
  border-top: 1px solid transparent
  border-bottom: 1px solid transparent
  user-select: none
  font-size: 14px
  font-family: $sansserif
  opacity: 0.9
}

:local(.floorControlItem) span:focus {
  background-color: $cyan
  color: $white
  display: inline-block
}

:local(.floorControlItem:not(.floorControlItemSelected)) button {
  border-color: transparent
}

:local(.floorControlItemSelected) button {
  border-color: $blue
  background-color: $blue
  color: $white
}

:local(.floorControlDelete) {
  position: absolute
  top: 100%
  margin-top: 1px
  background: linear-gradient(to bottom, $red, rgba(0, 0, 0, 0))
  height: 40px
  line-height: 40px
  vertical-align: center
  text-align: center
  width: 100%
  box-sizing: border-box
}

:local(.floorControlDelete:before) {
  color: $white
  font-family: $iconfont
  font-size: 32px
  content: $doka-icon-recyclebin
}

:local(.floorControlItem.floorControlItemDelete) button {
  border-color: $red
  background-color: $red
  color: $white
}