@import('DetailVars')

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

.info
  absolute top left right
  left $note-detail-left-margin
  right $note-detail-right-margin
  height $info-height
  border-bottom $ui-border
  background-color $ui-noteDetail-backgroundColor

.info-left
  float left
  padding 0 5px
  margin 0px 2px

.info-left-top
  display inline-block
  height $info-height
  line-height $info-height

.info-left-top-folderSelect
  display inline-block
  padding 0 3px
  height 34px
  line-height 26px
  vertical-align middle
  border-radius 3px

.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--active-color

.info-right
  position absolute
  right 0
  top 0
  background $ui-noteDetail-backgroundColor
  bottom 1px
  padding-left 30px

.undo-button
  position relative
  border solid 1px transparent
  line-height 34px
  vertical-align middle
  border-radius 2px
  transition 0.15s
  user-select none
  cursor pointer
  &:hover
    background-color #D9D9D9

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