@import "arrow";

.container-fluid {
   padding-right: 25px;
   padding-left: 25px;
}

.column {
  vertical-align: top;
  padding: 0px 10px;
  @include box-sizing(border-box);
}

.column {
  &.hb-state-collapsed {
    input {
      visibility: hidden;
    }
  }
  .create-issue {
    position: relative;

    margin-bottom: 6px;
    padding: 6px;

    background: white;
    @include box-shadow(inset 0 0px 1px rgba(0,0,0, 0.3));
    border: 1px solid #e5e5e5;
    border-bottom-color: darken(#e5e5e5, 5%); 
    @include clearfix;

    .ui-icon {
      position: absolute;
      top: 6px;
      right: 4px;
      cursor: pointer;
      padding: 8px;
      color: white;
      background: $hb-purple;
      border-radius: 1px;
      opacity: 0.6;

      &:hover {
        @include box-shadow(0 0px 1px rgba(0,0,0, 0.3));
        border: 1px solid $hb-purple;
        border-bottom-color: $hb-purple-dark; 
        padding: 7px;
        opacity: 1;
      }
      &:active {
        @include box-shadow(inset 0 1px 1px $hb-purple-dark);
        border: none;
        padding: 8px;
        top: 7px;
        opacity: 1;
      }
    }


    input {
      box-sizing: border-box;
      height: auto;
      width: calc(100% - 33px);
      margin: 0;
      padding: 6px;
      outline: none;
      border: none;
      background: white;
      @include box-shadow(none);
      @include transition(all 0s);


      &:focus, &:hover {
        outline: none;
        border: none;
        background: white;
        border-bottom: 1px dashed #ccc;
        padding-bottom: 5px;
      }

    }

  }

}


.backlog { 
  white-space: nowrap;
  overflow-x: auto;
  .column {
    float: none;
    display: inline-block;
  }
}
.sidebar {
  .backlog {
    .column {
      width: 209px;
    }
  }
}

.column h3 {
  line-height: 20px;
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #e5e5e5;
  background: #f3f3f3;

  font-size: 100%;
  @extend %font-headings;
  small {
    float:right;
    line-height: 20px;
    font-style: italic;
  }
  .hb-state-error {
    color: $hb-red;
  }
}

.hb-task-column h3 {
  @extend .arrow;
}

.column > ul {
  margin:0;
  padding: 0;
}
.backlog {
    .dim {
      opacity: 0.4;
    }
    .active {
    }
    .filter-hidden {
      cursor: default;
      border:0;
      padding:0;
      margin:0;
      height:0;
      .ember-view {
        display: none;
      }
    }
}
.board {
  @include user-select(none);
    .dim {
      opacity: 0.4;
      @include transition (opacity 0.6s, ease-out);
      @include transition (filter 0.6s, ease-out);
      @include prefixer(filter, grayscale(100%) opacity(40%));
      @include box-shadow(inset 0 0px 1px rgba(0,0,0, 0.3));
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
    }
    .active {
    }

    .filter-hidden {
      cursor: default;
      padding:0;
      margin:0;
      height:0;
      border:0;
      padding-bottom: 5px;
      margin-bottom: 15px;
      .ember-view {
        display: none;
      }
      .card-header {
        display: none;
      }
      .card-labels {
        display: none;
      }

    }
    .filter-hidden + .filter-hidden {
      padding:0;
      margin:0;
    }

}

.column {
  .is-draggable {
    cursor:pointer;
  }
  .ui-sortable-helper {
    cursor: move;
    cursor: -webkit-grabbing;
    cursor: -moz-grabbing;
    cursor: -ms-grabbing;
    cursor: grabbing;
    @include transform(rotate(3deg));
  }
}

.card {
  cursor:pointer;
  list-style: none;
  padding: 5px 5px 34px 5px;
  margin-bottom: 10px;
  position:relative;
  background-color: #fff;
  border: 1px solid #e5e5e5;
  border-bottom-color: darken(#e5e5e5, 5%); 
  @include transform(translateZ(0));
  .hb-avatar-tooltip {
    position: static;
  }


  &.border {
    border-top-color: #e5e5e5;
    border-right-color: #e5e5e5;
    border-bottom-color: #e5e5e5;
    border-left-width: 3px;
  }

  &.closable {
    background-color: #f5f5f5;
    .actions-close {
      display:block;
    }
  }
  .actions-close {
    display:none;
  }
  
  .hb-action {
    position: absolute;
    width: 100%;

    button {
      opacity: 0.3;
      position: absolute;
      top:0;
      left: 0;
      bottom: 0;
      right: 0;
      width: 100px;
      height: 30px;
      margin:auto;
      @include transition(opacity 0.2s);
    }
  }
  &:hover {
    .hb-action {
        button {
        opacity: 1;
      }
    }
  }


  &.assignee-accept {
     border-color: #0069D6;
  }
  &.assignee-error {
     border-color: red;
  }
  .card-labels {
    padding: 5px 0px;
    position: absolute;
    bottom: -8px;
    .card-label-wrapper {
      float:left;
      margin-right: 5px;
      .card-label {
        z-index: 10;
      }
      .card-label.active.small {
        height: 4px;
        width: 40px;
        display:block;
      }
      .card-label.active.large {
        position: relative;
        top: 6px;

        display: none;
        padding: 2px 10px;
        font-size: 12px;
      }
    }
      &:hover {
        .card-label.active.small {
          display: none;
        }
        .card-label.active.large {
          display:block;
        }
      }
  }

  .card-header {
    border-bottom: 1px solid $borderColor;
    padding: 5px 0;
    color: $darkGrey;
  }
  .title {
    word-wrap: break-word;
    white-space: normal;
    text-overflow: clip;
    overflow:auto;
  }         
  .milestone {
    color: $lightGrey;
    font-size:11px;
  }         
  img {
    position: absolute;
    bottom:5px;
    left: 5px;
  }          
  .number {
    position: absolute;
    vertical-align: bottom;
    bottom:5px;
    right: 5px;
    font-size:2em;
    small {
      color: #999;
      margin-right: -7px;
    }
  }               

  &.card--milestone {
    &.border {
      padding-left: 6px;
    }
    padding-bottom: 5px;
    margin-bottom: 15px;
    &.filter-hidden + &.filter-hidden {
      padding-bottom: 0px;
      margin-bottom: 0px;
      cursor: none;
    }
    .hb-avatar-tooltip {
      p {
        bottom: auto;
        top: -24px;
      }
      display: inline;
      img {
        position: static;
      }
    }
    .card-header {
      border-bottom: none;
    }
    .card-labels {
      bottom: auto;
      top: -8px;
    }
    .flex-crumbs {
      .breadcrumbs {
        overflow:hidden;
        padding-bottom: 2px;
      }
      .card-states {
        opacity: 0.7;
      }
      img {
        bottom: auto;
      }
      .crumb {
        &:before {
          bottom: -2px;
        }
      }
      .hb-state {
        .active {
          @include flex(0 0 44%);
        }
        .inactive {
          @include flex(0 0 28%);
        }
      }
      .crumb--last {
        .card-states {
          right: 0px;
        }
      }
      > ul.nav.breadcrumbs {
        margin: 0px -6px -8px;

        .crumb--middle, .crumb--last {
          a {
            padding-left: 18px;
          }
        }
      }

    }

  }
}



.card a.close {
  position: absolute;
  top: 12px;
  right: 6px;
  width: 16px;
  opacity:0.0;
}
.card:hover a.close {
  opacity:0.3;
}
.card a.close:hover {
  opacity:0.5;
}

.card a small {
  color: $lightGrey;
  padding-right:2px;
}
.column .ui-sortable-placeholder {
  background:$borderColor;
  list-style: none;
  padding: 80px 5px 10px 5px;
  margin: 10px 0;
}
.column .ui-sortable-hover {
  background:#efefef;
}



.filters {
  list-style: none;
  margin:0;
  padding:0 20px 0 0;
}

.filters li {
  margin-bottom: 10px;
  background: #fff;
  border-radius: 4px;
}

.filters li.colored a {
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
  border-left-style: solid;
  border-left-width: 3px;
}

.filters li.-x7965cc a{
  border-left-color: #7965cc;
}

.filters li.clear-filters, .filters li.clear-filters a {
  background: none;
  color:$grey;
}
.filters li.clear-filters {
  border-radius: 0;
  border-bottom: 1px solid $darkGrey;
}
.filters li.clear-filters a:hover {
  color:$grey;
}

.filters li a {
  position:relative;
  padding: 10px;
  display:block;
  padding-right:25px;
  text-decoration: none;
  border-radius: 4px;
  color:#777;
}

.filters li a strong { 
  position: absolute;
  top:12px;
  right:10px;
}

.filter a.active, .filter a.active:hover {
  background-color: $hb-purple;
  color: #fff;
}
.filter a.dim, .filter a.dim:hover {
  background-color: $hb-purple;
  background-color: rgba($hb-purple,0.6);
  color: #fff;

}

.filter {

  .ui-icon {
    // start: UX Experiment 
    display:none;
    // end: UX Experiment 

    position: absolute;
    top: 13px;
    right: 3px;
    width: 22px;
    display:none;
    opacity: 0.8;
    &:hover {
      opacity: 1;

    }
  }
  a:hover {
    background-color:#efefef;
  }

  .dim:hover, .active:hover { 
    .ui-icon {
      display:inline;
      // start: UX Experiment 
      display:none;
      // end: UX Experiment 
    }
  }
}


