$primary: #046FD1
[dir] .debugger-container
  display: flex
  flex-direction: column
  position: fixed
  top: 8px
  left: 8px
  width: 24px
  height: 24px
  overflow: hidden
  z-index: 9999
  font-family: monospace
  font-size: 12px

  .tab-item.reverse-icon
    transform: scaleY(-1)


  .debugger-utils
    display: none
    flex-direction: column
    width: 100%
    height: auto
    background: #2b303b

  .console-utils
    display: none
    flex-direction: column
    width: 100%
    height: auto
    background: #2b303b


  &.debugger-utils-selector
    .debugger-utils
      display: flex

  &.console-utils-selector
    .console-utils
      display: flex


  .debugger-data.service
    margin: 0 0
    padding: 16px
    min-height: 100vh
    word-break: break-all
    white-space: pre-wrap


  .debugger-data.console
    position: relative
    background: #2b303b
    display: flex
    flex-direction: column
    padding: 0
    min-height: 100vh
    font-family: monospace
    user-select: text!important
    overflow-y: auto
    overflow-x: hidden
    .trace
      background: #2b303b
      display: flex
      flex-direction: column
      flex: 0 0 auto
      padding: 0
      &:not(:last-of-type)

        box-shadow: 0 1px 0 0 rgba(#000, 0.2)
      &.log
        background: transparent
      &.error
        background: rgba(#A22C2C, 0.2)
      div
        display: flex
        justify-content: flex-end
        color: #32a25d
        font-size: 12px
        opacity: 0.5
        padding: 4px 8px
      pre
        padding: 8px
        margin: 0
        background: transparent
        word-break: break-all
        white-space: pre-wrap

  .debugger-tabs
    display: flex
    flex-wrap: wrap
    width: 100%
    color: #fff
    flex: 0 0 auto
    user-select: none
    background: $primary
    box-shadow: inset 0 -1px 0 0 rgba(#000, 0.2)
    padding:  4px 0
    z-index: 10

    .tab-item
      display: flex
      justify-content: center
      align-items: center
      padding: 0 12px
      height: 24px
      border-radius: 40px
      cursor: pointer
      margin: 4px
      & > svg
        transform: scale(1.2)

      &.active
        box-shadow: inset 2px 2px 3px 0 rgba(#000, 0.2)
        background: darken($primary, 10)

      &:hover
        opacity: 0.8

  .debugger-trigger-button
    position: relative
    display: flex
    justify-content: center
    align-items: center
    width: 24px
    height: 24px
    background: $primary
    cursor: pointer
    border-radius: 24px
    z-index: 9999
    box-shadow: 10px 12px 40px -10px rgba(#000, 0.1)
    & > svg
      position: absolute

    .button-item
      display: none
      position: absolute
      justify-content: flex-end
      height: 24px
      width: 140px
      pointer-events: none
      transform: rotate(45deg)
      .item
        pointer-events: auto
        transform: rotate(-45deg)

      &:nth-child(2)
        width: 80px

      .item
        display: flex
        justify-content: center
        align-items: center
        width: 24px
        height: 24px
        border-radius: 24px
        color: #fff
        cursor: pointer
        svg
          transform: scale(1.3)
        &:hover
          box-shadow: inset 2px 2px 3px 0 rgba(#000, 0.2)
          background: darken($primary, 10)

  &.active:not(.selected)
    $size: 160px
    top: $size/-2
    left: $size/-2
    width: $size
    height: $size
    background: $primary
    border-bottom-right-radius: $size/2

    .debugger-trigger-button
      width: $size
      height: $size
      border-radius: $size/2
      cursor: default

      & > svg
        display: none

    .button-item
      display: flex



  &.selected
    top: 0
    left: 0
    width: 100vw
    height: 100vh
    background: $primary
    overflow-x: hidden
    overflow-y: auto
    border-bottom-right-radius: 0
    .debugger-trigger-button
      display: none


    &.reverse
      top: auto
      bottom: 0
      .tab-item.reverse-icon
        transform: scaleY(1)