@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, 10%)
  height: 100%
  border-left: 1px solid darken(white, 20%)
  padding: 12px 7px 5px
  overflow-y: auto

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

  .card-detail + &
    border-left: none

  &.editable
    cursor: grab

    .list-wrapper
      cursor: default

  &.add-list
    &.fade
      opacity: 0

    .list-name-input
      background: rgba(0, 0, 0, .05)
      border-color: #aaa
      box-shadow: inset 0 1px 8px rgba(0, 0, 0, .15)
      display: block
      margin: 0
      transition: margin 85ms ease-in,
        background 85ms ease-in
      width: 100%

    .edit-controls
      height: 32px
      transition: margin 85ms ease-in,
        height 85ms ease-in
      overflow: hidden
      margin: 4px 0 0

      input[type=submit]
        margin-top: 0
        min-height: 30px
        height: 30px

.list-header
  flex: 0 0 auto
  padding: 10px 26px 4px 6px
  position: relative
  min-height: 20px

  .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-menu-icon
    background-clip: content-box
    background-origin: content-box
    padding: 6px 8px
    position: absolute
    top: 3px
    right: -5px
    color: #a6a6a6

  .list-header-num-cards
    color: #8c8c8c
    margin: 0

.minicards
  padding: 4px 4px 1px
  z-index: 1
  height: 100%

  &::-webkit-scrollbar-button
    display: block
    height: 4px

.open-card-composer
  border-radius: 2px
  color: #8c8c8c
  display: block
  padding: 7px 10px
  position: relative
  text-decoration: none

  i.fa
    margin-right: 7px

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

  &::selection
    background: transparent

@keyframes fadeIn
  from
    opacity: 0
  to
    opacity: 1

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

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


.list.ui-sortable-helper .list-header-menu-icon
  display: none