@import '../../../utils'

.Settings .keybinding
  position: relative
  display: flex
  flex-direction: row
  justify-content: space-between
  align-items: flex-start
  padding: 0 16px
  margin: 3px 0 0
  cursor: pointer
  &:before
    content: ''
    position: absolute
    top: 0
    left: 0
    width: 100%
    height: 100%
    border-radius: 3px
    background-color: var(--toolbar-fg)
    opacity: 0
  &:after
    content: ''
    position: absolute
    top: -2px
    left: 4px
    width: calc(100% - 8px)
    height: 1px
    background-color: var(--toolbar-fg)
    opacity: .1
  &:hover:before
    opacity: .06
  &:active:before
    opacity: .03
  &[is-focused="true"]
    opacity: 1
    > .value:before
      opacity: 1
    &:before
      opacity: .2
  &[data-error="true"]
    opacity: 1
    > .value
      color: var(--status-err)
      &:before
        box-shadow: inset 0 0 0 1px var(--status-err)
    > .label
      color: var(--status-err)

.Settings .keybinding.-no-separator:after
.Settings .sub-title + .keybinding:after
  display: none

.keybinding > .label
  position: relative
  font-size: rem(16)
  flex-grow: 1
  line-height: 26px
  color: var(--toolbar-fg)
  margin: 0 6px 0 0
  padding: 4px 0
  transition: color var(--d-fast)

.keybinding > .value
  position: relative
  font-size: rem(13)
  padding: 2px 6px
  margin: auto 0 auto auto
  color: var(--toolbar-fg)
  background-color: #78787832
  border-radius: 4px
  white-space: nowrap
  &:before
    content: ''
    position: absolute
    top: 0
    left: 0
    width: 100%
    height: 100%
    border-radius: 4px
    box-shadow: inset 0 0 0 1px var(--toolbar-fg)
    opacity: .3

.keybinding .ToggleInput
  margin-top: auto
  margin-bottom: auto

.keybinding > input
  position: absolute
  width: 0
  height: 0
  top: 0
  left: 0
  opacity: 0
  z-index: -1

.keybinding > .ToggleInput
  padding: 4px 0 4px 16px
  flex-wrap: nowrap

.keybinding .icon-btn
  position: relative
  width: 28px
  height: 28px
  margin: auto -12px auto 4px
  cursor: pointer
  &:before
    content: ''
    position: absolute
    top: 1px
    left: 0
    width: 100%
    height: calc(100% - 2px)
    border-radius: 4px
    background-color: var(--color, var(--toolbar-fg))
    opacity: 0
  &:hover:before
    opacity: .1
  &:active
    opacity: .9
  > svg
    position: relative
    top: 4px
    left: 4px
    width: 20px
    height: 20px
    fill: var(--toolbar-fg)
    opacity: .7
  &[data-enabled="false"]
    opacity: .3
    cursor: default
