@import "{design}/app"

.measure-flow
  position: relative

  &.open,
  &.selected

    .btn-add
      opacity: 0

  .btn-add
    theme('color', '$textColorActive')
    theme('background-color', '$activeColor')
    theme('border', '2px solid $uiBorderColor')
    border-radius: 14px
    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

    // / {selector()}
    //   color: $themes['tide']['uiYellow'] !important

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

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

    .tree-inputs
      position: relative

  &>.tree-leaf
    position: relative

    .icon-check
      theme('background-color', '$activeColor')
      left: -46px
      position: absolute
      top: 3px

    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
        theme('border', '1px solid $uiBorderColor')
        theme('color', '$textPrimaryColor')
        background-color: transparent
        border-radius: 16px
        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, i
          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)
  }
}

.icon-check
  background-color: white
  border-radius: 20px
  display: block
  height: 40px
  overflow: hidden
  position: relative
  width: 40px

  &:before
    border: 2px solid black
    border-left-width: 0
    border-top-width: 0
    content: ''
    display: block
    height: 18px
    left: 15px
    position: absolute
    top: 9px
    transform(rotate(45deg))
    width: 9px