%stickafter {
  &:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: -5px;
    right: -5px;
    height: 1px;
    background: $color-border;
  }
}

.agile {
  $item-height: 100px;

  padding: .25*$box-padding;
  margin: 0 (-$box-padding);
  //border-top: 1px solid $color-border-minor;

  &__group-select {
    margin-top: $gap;
    text-align: center;
    .module-content &{
      @extend %translateX-correction;
      position: relative;
      @include respond-to(min-small-screen){
        position: absolute;
      }
      left: 50%;
      top: .25*$gap;
    }
  }

  .sprint-col {
    &:first-of-type {
      border-left: none;
    }

    &:last-of-type {
      border-right: none;
    }
  }

  &__row {
    @extend %flex;
    @extend %align-items-stretch;
    @extend %justify-content-space-between;
    box-sizing: border-box;
    width: 100%;

    &:last-child {
      @extend %flex-grow-1;
    }
    &.sticky {
      @extend %stickafter;
    }
  }

  &__col {
    $tile-height: 1.5*$box-padding;

    @extend %flex;
    @extend %flex-grow-1;
    @include flex-direction(column);
    @extend %align-items-stretch;

    min-width: 100px;

    &:only-child {
      border: none;
    }

    //&--side .agile__list {
    //  background: rgba($color-main, 0.5);
    //}

    &--indent {
      margin-top: $tile-height;
    }

    //&--indent > &__title{
    //  padding: .5*$tile-height 0;
    //}

    &__title {
      @extend %flex;
      @extend %align-items-center;
      @extend %justify-content-center;
      @extend %flex-wrap-wrap;
      height: $tile-height;
      text-align: center;
      @include small;
      font-weight: bold;
      line-height: 1;
      padding-left: 5px;
      padding-right: 5px;
      background: $color-foreground;

      &.stuck {
        @extend %stickafter;
        @include respond-to(max-medium-screen){
          margin-top: -$gap;
        }
      }

      &__details {
        margin-left: .3*$gap;
        font-weight: normal;
        color: rgba($black, 0.5);
      }
    }

    &__contents {
      @extend %flex;
      @extend %flex-grow-1;
      padding: 0 .5*$gap;
    }

    &-sort {
      @include small;
      cursor: pointer;
      @extend %pseudo-before;
      @extend %pseudo-after;
      @extend %tooltip-parent;
      z-index: 1;
      &:after, &:before {
        right: -$box-padding;
        opacity: .3;
      }
      &:hover {
        &:after, &:before {
          opacity: 1;
        }
      }
      &:after {
        @include triangle-bottom-borders(.4*$gap, $color-text, 1.2);
        bottom: 0;
      }
      &:before {
        @include triangle-top-borders(.4*$gap, $color-text, 1.2);
        top: 0;
      }
      .tooltip {
        top: -.5*$gap;
        right: 0;
      }
    }
  }

  &__main-col {
    @include flex-grow(2);
    overflow-x: auto;
  }

  &__item {
    background: $color-foreground;
    margin: .1*$box-padding;
    border: 1px solid mix($color-border-minor, $color-border);
    height: 100px;
    position: relative;
  }

  &__list {
    @extend %flex-grow-1;
    border: 1px dashed $color-border;
    border-top: 3px solid $color-border;
    //padding-bottom: .5*$gap;
    min-height: $item-height;
    width: 100%;
    //background: $color-foreground;//mix($color-background, mix($color-background, $color-foreground));
    background: mix($color-background, $color-foreground);
    &:hover, &.droppable-hover {
      //background: $color-background;
    }
    &--drop {
      &-valid {
        border-color: $color-positive;
      }
      &-valid-hover {
        background: rgba($color-positive, .25) !important;
      }
      &-invalid {
        opacity: .5;
      }
    }
  }

  &__card {
    position: absolute;
    width: 100%;
    height: 100%;
    padding: $gap/2;
    box-sizing: border-box;
    padding-bottom: 25px;
    border: none;
    overflow: visible !important;
    &--selected {
      border-left: 2px solid $color-main;
      @include box-shadow(inset 0px 0px 250px 0px rgba(mix($color-background, $color-foreground), 1));
    }

    &--error {
      border-right: 2px solid $button-negative-background;
      @extend %pseudo-after;
      &:after {
        right: 0;
        position: absolute;
        background: $button-negative-background;
        top: 49%;
        z-index: 1;
        padding: 4px;
        padding-left: 6px;
        color: $button-negative-color;
        @include translateY(-50%);
        @include icon(error);
        @include border-radius($border-radius 0 0 $border-radius);
      }
    }

    &__title {
      position: relative;
      font-size: $font-size;
      font-weight: normal;
      color: inherit;
      margin: 0 0 3px 0;
      overflow: hidden;
      max-height: 3*1.125em;
    }

    &__subtitle {
      @include smaller;
      margin: 0;
      color: $color-text;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    &__info {
      @extend %flex;
      @extend %align-items-center;
      @extend %justify-content-space-between;
      position: absolute;
      bottom: $gap/2;
      left: $gap/2;
      width: calc(100% - #{$gap});
      height: 25px;

      .gravatar {
        width: 25px;
      }

      .avatar-container {
        margin: 0;
      }

      &__item {
        line-height: 1.125;
      }
    }

    &__summable {
      @include smaller;
      float: right;
      margin-left: .4*$gap;
      line-height: 1.4;
      max-width: 32px;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    &__avatar {
      width: auto;
    }

    &__dates {
      line-height: 1.15;
      @extend %flex;
      @extend %flex-wrap-wrap;
    }

    &__date {
      display: block;
      @include smallest;
      color: $color-text;
      padding: 0 2px;
      margin: 0 2px;
      //outline: rgba(0, 0, 0, 0.1) solid thin;
    }

    &__icons {
      line-height: 1;
    }

    &__icon {
      display: block;
    }

    //@for $i from 1 through length($schemes) {
    //  &.scheme-#{nth(map_keys($schemes), $i) - 1} {
    //    @include color-scheme(nth(map_values($schemes), $i), true, false);
    //  }
    //}
  }
  &__backlog & {
    @extend %flex;
    @extend %justify-content-center;
    & > .agile__row {
      max-width: 640px;
    }

  }

  &__dash {
    display: inline-block;
    vertical-align: middle;
    width: 100%;
    height: 3px;
    background: $color-border;
    border-radius: $border-radius;
    &--highlight {
      background: $color-important;
    }
  }
  &__sprint{
    &-heading {
      @extend %flex;
      @extend %justify-content-space-between;
      @include respond-to(max-small-screen){
        display: block;
      }
    }
    &-title {
      min-width: 4*$box-padding;
      text-align: left;
      @include respond-to(max-small-screen){
        display: block;
        text-align: center;
      }
    }
    &-title-date {
      min-width: 4*$box-padding;
      text-align: center;
      @include respond-to(max-small-screen){
        display: block;
      }
    }
    &-actions {
      min-width: 4*$box-padding;
      text-align: right;
      @include respond-to(max-small-screen){
        display: block;
        text-align: center;
      }
      .icon {
        padding-left: $box-padding;
        @include respond-to(max-small-screen){
          padding: 0 $gap;
        }
      }
    }
  }
}

.sticky {
  //position: -webkit-sticky;
  //position: sticky;
  //top: 50px;
  z-index: 100;
}

.sticky80 {
  //position: -webkit-sticky;
  //position: sticky;
  //top: 80px;
  z-index: 90;
}

#sticky_agile_backlog_autocomplete {
  text-align: center;
}

.sticky_agile_backlog_autocomplete_wrap {
  background-color: $color-foreground;
  margin: .5*$gap auto 0 auto;
  padding: $gap 0;
  @extend %stickafter;
  @include respond-to(max-medium-screen){
    margin-top: -.5*$gap;
  }
}

.agile__col__title__details .tooltip {
  position: absolute;
  background-color: #faf7f3;
  top: 26px;
  left: 0;
  z-index: 5000;
  padding: 3px;
  white-space: nowrap;
  display: none;
}

.agile__col__title__details {
  position: relative;
}
