@import 'nib'

.list
  box-sizing: border-box
  display: flex
  flex-direction: column
  flex: 0 0 270px
  position: relative
  // Even if this background color is the same as the body we can't leave it
  // transparent, because that won't work during a list drag.
  background: darken(white, 13%)
  border-left: 1px solid darken(white, 20%)
  border-bottom: 1px solid #CCC
  padding: 0
  float: left

  &:first-child
    margin-left: 5px
    border-left: none

  .card-details + &
    border-left: none

  &.ui-sortable-helper
    box-shadow: -2px 2px 8px rgba(0, 0, 0, .3),
                0 0 1px rgba(0, 0, 0, .5)
    transform: rotate(4deg)
    cursor: grabbing

    .list-header.ui-sortable-handle
      cursor: grabbing

  &.placeholder
    background-color: rgba(0, 0, 0, .2)
    border-color: transparent
    box-shadow: none
    height: 100px

  &.list-composer, & .list-composer
    .open-list-composer
      color: #8c8c8c

    .list-name-input
      background: white
      margin: -3px 0 8px

.list-header
  flex: 0 0 auto
  margin: 20px 12px 4px
  position: relative
  min-height: 20px

  &.ui-sortable-handle
    cursor: grab

  .list-header-left-icon
    display: none

  .list-header-name
    display: inline
    font-size: 16px
    line-height: 17px
    margin: 0
    font-weight: bold
    min-height: 9px
    min-width: 30px
    overflow: hidden
    text-overflow: ellipsis
    word-wrap: break-word

  .list-header-watch-icon
    padding-left: 10px
    color: #a6a6a6

  .list-header-menu
    position: absolute
    padding: 7px
    margin-top: 1px
    top: -@padding
    right: -@padding

  .list-header-plus-icon
    color: #a6a6a6
    margin-right: 10px

  .highlight
    color: #ce1414

.list-body
  flex: 1 1 auto
  flex-direction: column
  display: flex
  overflow-y: auto
  padding: 5px 11px

  .minicards
    flex-grow: 1
    flex-shrink: 0

    form
      margin-bottom: 9px

  .ps-scrollbar-y-rail
    transform: translateX(2px)

  .open-minicard-composer
    border-radius: 2px
    color: #8c8c8c
    display: block
    padding: 7px 10px
    position: relative
    text-decoration: none
    animation: fadeIn 0.3s

    i.fa
      margin-right: 7px

    &:hover
      background: #fafafa
      color: #222
      box-shadow: 0 1px 2px rgba(0,0,0,.2)

#js-wip-limit-edit
  padding-top: 2%

  p
    margin-bottom: 0

  input
    display: inline-block

  .wip-limit-value
    width: 20%
    margin-right: 5%

  .wip-limit-error
    display: none

  .soft-wip-limit
    margin-right: 8px

  div
    float: left

@media screen and (max-width: 800px)
  .mini-list
    flex: 0 0 60px
    height: 60px
    width: 100%
    border-left: 0px
    border-bottom: 1px solid darken(white, 20%)

  .list
    display: block
    width: 100%
    border-left: 0px

    &.ui-sortable-helper
      flex: 0 0 60px
      height: 60px
      width: 100%
      border-left: 0px
      border-bottom: 1px solid darken(white, 20%)

      .list-header.ui-sortable-handle
        cursor: grabbing

    &.placeholder
      flex: 0 0 60px
      height: 60px
      width: 100%
      border-left: 0px
      border-bottom: 1px solid darken(white, 20%)

  .list-header

    .list-header-left-icon
      display: inline
      padding: 7px
      padding-right: 27px
      margin-top: 1px
      top: -@padding
      left: -@padding

    .list-header-menu-icon
      position: absolute
      padding: 7px
      top: -@padding
      right: 17px