@import('DetailVars')

$info-height = 60px
$info-margin-under-border = 30px

.info
  absolute top left right
  left 0
  right 0
  height $info-height
  background-color $ui-noteDetail-backgroundColor
  width 100%
  display flex
  align-items center
  padding 0 20px
  z-index 99

.info-left
  padding 0 10px
  width 100%
  display flex
  align-items center

.info-left-top-folderSelect
  display flex
  align-items center
  justify-content center

.info-left-button
  width 34px
  height 34px
  navButtonColor()
  color $ui-favorite-star-button-color
  font-size 14px
  line-height 0
  margin 13px 2px
  padding 0
  border-radius 17px
  &:hover .info-left-button-tooltip
    opacity 1
  &:focus
    border-color $ui-favorite-star-button-color
  &:active, &:active:hover
    background-color $ui-favorite-star-button-color
    color $ui-button--color

.info-right
  z-index 101
  display inline-flex
  margin-top 3px

.undo-button
  width 34px
  height 34px
  border-radius 17px
  font-size 14px
  margin 5px 0px
  border none
  color $ui-button-color
  display flex
  align-items center
  justify-content center
  fill $ui-button-color
  background-color transparent
  cursor pointer
  &:active
    border-color $ui-button--active-backgroundColor
  &:hover
    background-color alpha($ui-button--hover-backgroundColor, 60%)
    transition 0.2s
    .control-lockButton-tooltip
      opacity 1

body[data-theme="dark"]
  .info
    border-color $ui-dark-borderColor
    background-color $ui-dark-noteDetail-backgroundColor

  .info-delete
    color $ui-dark-text-color

  .info-delete-confirmButton
    colorDarkDangerButton()
    color $ui-dark-text-color

  .info-delete-cancelButton
    colorDarkDefaultButton()
    border-color $ui-dark-borderColor
    color $ui-dark-text-color

  .info-right
    background-color $ui-dark-noteDetail-backgroundColor

  .undo-button
    topBarButtonDark()

body[data-theme="solarized-dark"]
  .info
    border-color $ui-solarized-dark-borderColor
    background-color $ui-solarized-dark-noteDetail-backgroundColor

body[data-theme="monokai"]
  .info
    border-color $ui-monokai-borderColor
    background-color $ui-monokai-noteDetail-backgroundColor

body[data-theme="dracula"]
  .info
    border-color $ui-dracula-borderColor
    background-color $ui-dracula-noteDetail-backgroundColor

.info > div
  > button
    -webkit-user-drag none
    user-select none
    > img, span
      -webkit-user-drag none
      user-select none