@import "variables"

.treema-target-of-copy-paste
  transform: translateX(10px)

.treema-node
  transition: 0.1s ease-in-out transform
  user-select: none
  -webkit-user-select: none
  -moz-user-select: none
  position: relative
  font-family: Helvetica
  clear: both
  border-bottom: 1px solid #ccc
  font-size: $fontSize
  cursor: pointer
  
  // hide collection short strings when open
  &.treema-root > .treema-row .treema-value, &.treema-root > .treema-row .treema-type-select
    display: none
    
  &.treema-open > .treema-children
    padding-top: 1px

  &.treema-root
    // remove this to debug keyboard focus
    outline: none
  
  input, select
    font-size: $fontSize
    font-family: Helvetica
  input
    margin: -3px 0
    width: 200px
    
  .treema-new-prop
    margin: -1px 0 10px

.treema-type-select, .treema-schema-select
  margin-right: 5px
  float: left
  
.treema-children
  margin-left: 15px
  clear: both
  
.treema-add-child
  background-color: #eef
  border: 1px solid #aaf
  cursor: pointer
  display: inline-block
  margin: 3px 0 10px
  padding: 0px 5px
  font-weight: bold
  position: relative
  left: -10px
  
  &:hover
    background-color: #ccf

.treema-full > .treema-children > .treema-add-child
  display: none
  
.treema-full.treema-open > .treema-children
  margin-bottom: 5px

.treema-row
  padding: $rowInternalVerticalPadding 3px $rowInternalVerticalPadding 3px
  
.treema-value
  cursor: text
  display: block
  float: left
  max-width: 100%
  min-width: 50px

.treema-key
  color: #5353ac
  float: left
  display: block
  cursor: pointer
  margin-right: 5px
  
.treema-backdrop
  position: absolute
  top: 0
  left: 0
  height: $fontSize + (2 * $rowVerticalPadding) + (2 * $rowInternalVerticalPadding) + 2px
  background-color: rgba(64, 128, 255, 0.0)
  pointer-events: none
  width: 100%
  cursor: pointer
  
.treema-description
  float: right
  opacity: 0.8
  font-size: $fontSize - 2
  line-height: $fontSize
  min-width: 200px
  text-align: right
  display: none
  
.treema-selected > .treema-row > .treema-description
  display: inline
  
.treema-edit + .treema-description
  display: inline
  
.treema-selected > .treema-row
  background-color: $selectedColor
  
// Errors
  
.treema-error
  float: right
  color: #8b0000
  margin: $rowInternalVerticalPadding 10px
  
.treema-has-error
  background-color: #ffb6c1
  border: 1px solid #8b0000
  
.treema-temp-error
  background-color: #ffb6c1
  padding: $rowInternalVerticalPadding 3px
  color: #8b0000
  margin: 0 5px
  border: 1px solid #8b0000
  
// Collection toggle
// http://css-tricks.com/snippets/css/css-triangle/

.treema-toggle-hit-area
  cursor: pointer
  width: 15px
  float: left
  position: absolute
  left: -15px
  top: 0
  bottom: 0

  &:hover
    background-color: rgba(128, 128, 128, 0.1)
    .treema-toggle
      opacity: 1.0

  .treema-toggle
    width: 0
    height: 0
    opacity: 0.7
    position: absolute

    .treema-closed > &
      border-top: 6px solid transparent
      border-bottom: 6px solid transparent
      border-left: 8px solid $triangleColor
      top: 5px
      left: 5px
  
    .treema-open > &
      border-left: 6px solid transparent
      border-right: 6px solid transparent
      border-top: 8px solid $triangleColor
      top: 7px
      left: 3px
    
// http://www.positioniseverything.net/easyclearing.html
.treema-clearfix:after
  content: "."
  display: block
  height: 0
  clear: both
  visibility: hidden

.treema-shortened
  overflow: hidden
  text-overflow: ellipsis
  white-space: nowrap

.treema-multiline
  width: inherit
  margin-top: 20px
  float: none !important

// Amazing invisible clipboard magic http://stackoverflow.com/questions/17527870/how-does-trello-access-the-users-clipboard
.treema-clipboard-container
  position: fixed
  left: 0px
  top: 0px
  width: 0px
  height: 0px
  z-index: 100
  display: none
  opacity: 0

  .treema-clipboard
    width: 1px
    height: 1px       
    padding: 0px

.treema-filter-hidden
  display: none
  
.treema-default-stub
  opacity: 0.7
