$label-color: #99a0a9 !default
$label-color-warning: red !default
$text-color: #000 !default
$label-component-editable: #313131 !default
$key-value-label-color-editable: $label-component-editable
$background-base-color: #009fd7 !default
$key-value-emptyvalueborder: 0.3px dotted silver !default
$key-value-label-fontsize: 0.85em !default
$key-value-label-fontsize: 1.1em !default
$key-value-background: none !default
$key-value-background-focused: none !default
$key-value-input-border-top: none  !default
$key-value-input-border-top-focused: none !default
$key-value-input-border-right: none  !default
$key-value-input-border-right-focused: none !default
$key-value-input-border-bottom: none  !default
$key-value-input-border-bottom-focused: 2px solid $background-base-color !default
$key-value-input-border-left: none !default
$key-value-input-border-left-focused: none !default
$key-value-fontstyle-label: normal !default

key-value
  display: block
  width: 100%
  .label
    display: block
    position: relative
    text-align: left
    font-weight: normal
    font-style: $key-value-fontstyle-label
    font-size: $key-value-label-fontsize
    left: -0.5em
    color: $label-color
    background: $key-value-background

    &.warning
      color: $label-color-warning
      
  .icon-undo
    display: inline-block
    font-size: 0.85em
    border: none
    color: $label-color
    width: 1em
  .value
    position: relative
    overflow: visible
    font-size: $key-value-label-fontsize
    color: $text-color
    left: 0.7em
    margin: 0.3em
    white-space: normal
    border: none
    width: calc(100% - 2em)
    height: auto

  .value-hide
    position: relative
    font-size: $key-value-label-fontsize
    color: $text-color
    left: 0.7em
    margin: 0.3em
    white-space: normal
    border: none
    border-bottom: 2px solid $background-base-color
    width: calc(100% - 2em)
    height: auto
    background: $key-value-background
    border-top: $key-value-input-border-top
    border-right: $key-value-input-border-right
    border-bottom: $key-value-input-border-bottom
    border-left: $key-value-input-border-left

  .value-editable

  .emptyvalue
    border-bottom: $key-value-emptyvalueborder

  .value-show
    position: relative
    font-size: $key-value-label-fontsize
    color: $text-color
    left: 0.7em
    margin: 0.3em
    white-space: normal
    border: none
    border-bottom: 2px solid $background-base-color
    outline: 0
    width: calc(100% - 2em)
    height: auto
    background: $key-value-background-focused
    border-top: $key-value-input-border-top-focused
    border-right: $key-value-input-border-right-focused
    border-bottom: $key-value-input-border-bottom-focused
    border-left: $key-value-input-border-left-focused

  .undo-show
    display: inline
    font-size: 0.85em
    border: none
    color: $label-color
    width: 1em
  .undo-hide
    display: none
    font-size: 0.85em
    border: 1px dotted silver
    color: $label-color
    width: 1em
    transition: all 0.5s ease


  .editable
    color: $label-component-editable
    font-weight: bold


  .labelundefined
    display: none