@import '../../utils'

#root
  --btn-border-radius: var(--general-border-radius)

.btn
  position: relative
  max-width: 100%
  font-size: rem(15)
  padding: 4px 12px
  white-space: nowrap
  text-overflow: ellipsis
  font-weight: 600
  overflow: hidden
  cursor: pointer
  text-align: center
  -moz-user-select: none
  color: var(--btn-fg)
  border-radius: var(--btn-border-radius)
  border: none
  outline: none
  background-color: transparent
  &.-focused
    box-shadow: 0 0 0 2px var(--toolbar-fg-active)
  &.-wide
    width: 100%
    min-width: auto
  &.-wrap
    white-space: normal
    text-overflow: clip
  &.-warn:after
  &:before
    content: ''
    position: absolute
    top: 0
    left: 0
    width: 100%
    height: 100%
    background-color: var(--btn-fg)
    border-radius: var(--btn-border-radius)
    opacity: .1
  &.-warn:after
    background-color: #ff2200
  &:hover:before
    opacity: .2
  &:active:before
    opacity: .08
  &.-inactive
    opacity: .3
    cursor: default
    &:before
      opacity: .2

  > input
    position: absolute
    top: 0
    left: 0
    width: 100%
    height: 100%
    opacity: 0
