@import "{design}/app"

.measure-flow
  position: relative

  &.open,
  &.selected

    .btn-add
      opacity: 0

  .btn-add
    background-color: $activeColor
    border: 2px solid $uiBorderColor
    border-radius: 14px
    color: $textColorActive
    cursor: pointer
    font-weight: bold
    height: 24px
    left: 0
    line-height: 24px
    opacity: 1
    position: absolute
    padding: 0 14px
    top: 0
    transition(opacity 0.3s ease)
    white-space: nowrap

  .select-tree-root>.tree-content
    width: 213px

    &>.tree-options
      position: relative
      z-index: 2

    .tree-inputs
      position: relative

  &>.tree-leaf
    position: relative

    &:before
      animateZoomIn()
      background-color: $activeColor
      border-radius: 20px
      color: $uiGray
      content: '\f00c'
      display: block
      font-family: FontAwesome
      font-size: 24px
      height: 40px
      left: -46px
      line-height: 40px
      position: absolute
      text-align: center
      top: 3px
      width: 40px

    span
      background: white
      font-weight: normal
      height: 46px
      line-height: 46px
      padding: 0 12px

    input, span
      display: none

    .actions
      margin-top: 16px
      opacity: 0

      &:not(.fadeOut)
        animateFadeIn()
        animation-delay: 0.3s

      &.fadeOut
        animateFadeOut()

      button
        background-color: transparent
        border-radius: 16px
        border: 1px solid $uiBorderColor
        color: $textPrimaryColor
        font-weight: normal
        height: 31px
        line-height: 31px
        padding: 0 12px
        text-align: center

    .description
      margin-top: -10px
      margin-bottom: 26px

      textarea
        background-color: white
        box-shadow: 0 10px white
        border: 0
        line-height: 20px
        outline: none
        overflow: hidden
        padding: 0 12px
        resize: none
        transition(height 0.3s ease)
        width: 100%

    .descriptionText
      background-color: white
      box-shadow: 0 10px white
      line-height: 20px
      margin-bottom: 26px
      margin-top: -10px
      padding: 0 12px

  &.selected>.tree-leaf

    span
      display: block

  &.tree-columns

    .select-tree-root

      &.interacted .select-tree-common .content
        animation-name: none

      &.selected .select-tree-common .content
        animation-name: selectTreeCommonCloseLeft

      .tree-search input
        display: none

      .select-tree-common
        padding-left: 0
        padding-right: 6px
        right: auto
        left: 0
        width: 33.333333333333%

      &>.tree-content
        transform-origin(0% 50%)
        width: 426px

      .select-tree-common .content
        right: -100%

      &.started .select-tree-common .content
        right: 6px

      &.interacted .select-tree-common .content
        animation-name: selectTreeCommonCloseRight

      .tree-inputs>label
        float: left
        width: 50%

@keyframes selectTreeCommonCloseRight {
  from {
    height: 37px
    display: table
    right: 6px
    opacity: 1
    visibility: visible
  }
  to {
    height: 100%
    right: -100%
    opacity: 0
    visibility: hidden
    width: calc(100% - 6px)
  }
}