@import "{ohif:design}/app"

// TODO: [design] can't we use colors that are already in common pallete?
$gray1 = #A3A3A3
$gray2 = #A0A0A0
$gray3 = #C4C4C4
$gray4 = #C0C0C0
$gray5 = #9B9B9B
$gray6 = #303030

.select-tree-root

  .tree-content
    background-color: white
    position: relative
    transition(transform 0.3s ease\, background-color 0.3s ease\, border-color 0.3s ease\, border-radius 0.3s ease\, margin-right 0.3s ease)

    .tree-search
    a.tree-back
    .tree-breadcrumb span
    .tree-node
    .tree-leaf
      transition(all 0.3s ease)

  &.selected

    label.tree-leaf.active
      box-shadow: 0 0 0 10px white, inset 0 0 0 200px white

    .tree-content
      background-color: transparent

    &>.tree-content
      border-color: transparent
      border-radius: 0

      .tree-search
        background-color: transparent
        border-color: transparent
        color: transparent

        input,
        i
          opacity: 0

    &, .select-tree

      &:not(.open)>.tree-content

        &>.tree-inputs
        &>.tree-breadcrumb
          display: none

      &>.tree-content>.tree-options

        &>.tree-inputs>label:not(.active)
        &>.tree-breadcrumb a
        &>.tree-breadcrumb span
          color: transparent

        &>.tree-inputs>label.tree-node:not(.active)
          border-color: transparent

    &.common-clicked .tree-leaf.active
      background-color: transparent
      box-shadow: none
      color: transparent

.select-tree-root
  display: inline-block
  position: relative
  z-index: 0

  &>.tree-content
    border: 1px solid $gray3
    border-radius: 5px
    overflow: hidden

  &>.tree-content>.tree-options
    transform(scale(1))
    transition(height 0.3s ease)

  .tree-search
    background-color: $gray4
    border-bottom: 1px solid $gray3
    color: $gray6
    display: flex
    margin: 0
    padding: 5px
    position: relative
    text-align: center

    span
      font-weight: bold
      line-height: 24px

    input
      border-color: $gray5
      font-weight: normal
      padding-left: 34px
      transition(opacity 0.3s ease)

      & ~ i
        color: $gray1
        font-size: 18px
        left: 16px
        position: absolute
        top: 37px
        transition(opacity 0.3s ease)

  .tree-breadcrumb
    line-height: 32px
    padding: 5px 12px

    .path-link, .tree-current-node
      display: inline-block
      font-weight: normal
      float: left
      overflow: hidden
      text-overflow: ellipsis
      white-space: nowrap

      i
        margin-right: 5px

  .select-tree-node
    left: 0
    overflow: hidden
    position: fixed
    width: 100%
    z-index: 2

    &
    .tree-content
    .tree-inputs
      height: 100%

  .tree-options
    overflow: hidden
    position: relative
    z-index: 2

    .tree-node, .tree-leaf
      cursor: pointer
      display: block
      font-weight: normal
      margin-bottom: 0
      padding: 0 12px
      position: relative
      z-index: 1

      &>input
        display: none

    .tree-node
      height: 41px
      border-bottom: 1px solid $gray3
      border-top: 1px solid $gray3
      line-height: 41px
      margin-top: -1px

      &:last-child
        border-bottom: 0

    .tree-leaf
      box-shadow: 0 0 0 200px transparent, inset 0 0 0 200px transparent
      line-height: 26px

      &.active
        box-shadow: 0 0 0 200px white, inset 0 0 0 200px white
        transition(box-shadow 0.3s ease)
        z-index: 0

        &:last-child:after
          display: block
          content: ''
          height: 10px

    &.collapsed
      z-index: 1

  .select-tree-common
    height: 100%
    padding-left: 6px
    position: absolute
    right: 0
    top: 0
    width: 50%

    .content
      background-color: $gray6
      border: 1px solid $gray5
      border-radius: 5px
      color: white
      opacity: 0.9
      padding: 0 15px 12px
      position: absolute
      top: 50%
      transform(translateY(-50%))
      width: calc(100% - 6px)

      h5.title
        color: $gray5
        font-weight: normal
        line-height: 20px
        margin: 12px 0 16px

      div.labels
        position: relative

      label
        cursor: pointer
        display: block
        font-weight: 300
        line-height: 26px
        margin: 0
        padding-left: 3px
        transition(padding 0.3s ease)

        &:hover
          padding-left: 0

.select-tree-root

  &>.tree-content
    transform(scale(0))
    transform-origin(100% 50%)

  .select-tree-common
    z-index: -1

    .content
      margin-left: calc(-100% - 6px)
      transform(scale(0))
      transition(margin-left 0.3s ease 0.3s\, transform 0s linear 0.3s)

  &.started

    &>.tree-content
      transform(scale(1))

    .select-tree-common

      .content
        margin-left: 0
        transform(scale(1) translateY(-50%))

  &.interacted, &.selected

    .select-tree-common

      .content
        opacity: 0
        transform(translateX(-100%) scale(0))
        transition(transform 0.3s ease\, opacity 0.3s ease)

@keyframes selectTreeCommonOverflow {
    from {
        overflow: hidden
    }
    to {
        overflow: visible
    }
}