//
// Kanban
// -----------------------------------------

.kanban {
  $column-width: $grid-unit-x * 31;
  $column-gutter: ceil($grid-unit-x * 0.5);
  $column-height: $grid-unit-y * 79;
  $column-container-padding-v: $grid-unit-y * 2;
  $breakpoint: ($column-width + $column-gutter * 2) * 6 - $column-gutter * 2 +
    $padding-large-horizontal * 2 + $layout-fixed-sidenav-width +
    $layout-fixed-subsidenav-width;

  &-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-bottom: $grid-unit-y * 3;
    display: flex;
    margin-left: -$column-gutter;
    margin-right: -$column-gutter;

    @include styled-scroll-hor();

    &-3-columns {
      .kanban-column {
        @media (min-width: $breakpoint) {
          max-width: 33.4%;
        }
      }
    }
  }

  &-column {
    max-height: $column-height;
    padding-left: $column-gutter;
    padding-right: $column-gutter;

    @media (min-width: $breakpoint) {
      flex: 1;
      max-width: 16.7%;
    }

    // Elements

    &-container {
      width: $column-width;
      max-height: 100%;
      border-radius: $border-radius-base * 2;
      padding: $column-container-padding-v ceil($grid-unit-x * 0.5);

      @include themes(background, kanban-column-bg);

      @media (min-width: $breakpoint) {
        width: 100%;
      }
    }

    &-scroll {
      $scroll-width: 4px;

      overflow-y: hidden;
      max-height: $column-height - $column-container-padding-v * 3 -
        $grid-unit-y * 3;
      min-height: $grid-unit-y * 5;

      &:hover {
        overflow-y: scroll;
        margin-right: -$scroll-width;
      }

      @include styled-scroll-vert(
        $scroll-width,
        transparent,
        $color-white-rgba-48
      );
    }

    &-title {
      margin-bottom: $column-container-padding-v;
      display: flex;
      align-items: center;
      padding: 0 ceil($grid-unit-x * 1.5);

      &-lock {
        margin-left: auto;

        @include themes(color, color-text-light);
      }
    }

    // Variations

    &-dark {
      @include themes(background-color, kanban-column-dark-bg);
    }

    &-empty {
      .kanban-column-scroll.dndDragover {
        .dndPlaceholder {
          margin-top: ceil($grid-unit-y * 1.5);
        }

        .kanban-card-empty {
          display: none;
        }
      }
    }

    @mixin kanban-column-variant($color) {
      .kanban-card {
        &:not(.kanban-card-empty) {
          @include themes-value(border-color, $color);
        }
      }
    }

    &-approved {
      @include kanban-column-variant($brand-warning);
    }

    &-processing {
      @include kanban-column-variant($brand-info);
    }

    &-shipped {
      @include kanban-column-variant($brand-info);
    }

    &-received {
      @include kanban-column-variant($brand-success);
    }

    &-complete {
      @include kanban-column-variant($brand-success);
    }

    &-rejected,
    &-evaluating,
    &-timeout {
      @include kanban-column-variant($brand-danger);
    }
  }

  &-card {
    border-radius: $border-radius-base * 2;
    padding: ($grid-unit-y * 3) ($grid-unit-x * 4);
    text-align: left;
    cursor: grab;
    max-width: 100%;
    overflow: hidden;

    @include themes-border(kanban-card-border-color);
    @include themes(background-color, kanban-card-bg);

    @include transition(border 0.6s linear, padding 0.6s linear);

    &:hover,
    &:focus {
      @include themes-border(color-text-dark);
    }

    &-wrapper {
      &:not(:last-child) {
        margin-bottom: $grid-unit-y;
      }

      // Dragging Source
      &.dndDraggingSource {
        opacity: 0.2;
        cursor: grabbing;
      }

      // Different States
      &-success {
        .kanban-card {
          padding: ($grid-unit-y * 3 - 1) ($grid-unit-x * 4 - 1);
          border: $brand-success 2px solid !important;
        }
      }
      &-danger {
        .kanban-card {
          padding: ($grid-unit-y * 3 - 1) ($grid-unit-x * 4 - 1);
          border: $brand-danger 2px solid !important;
        }
      }
    }

    &-title {
      margin-top: 0;
      margin-bottom: $grid-unit-y;
    }

    &-subtitle,
    &-from,
    &-to {
      font-weight: $font-weight-bold;
      line-height: $grid-unit-y * 2;
      font-family: $font-family-proxima-sbold;

      @include themes(color, color-text-dark);
    }

    &-subtitle {
      margin-bottom: ceil($grid-unit-y * 0.5);

      @include text-overflow();
    }

    &-from-to {
      display: flex;
      margin-bottom: ceil($grid-unit-y * 1.5);
      flex-wrap: wrap;

      &-icon {
        margin-left: ceil($grid-unit-x * 0.5);
        margin-right: ceil($grid-unit-x * 0.5);
        font-size: $font-size-large;
        line-height: $grid-unit-y * 2;

        @include themes(color, color-text-light);
      }
    }

    &-bottom {
      display: flex;
      align-items: center;
    }

    &-avatar {
      flex: 0 0 auto;

      @include avatar-xs();
    }

    &-duration {
      font-weight: $font-weight-bold;
      font-size: $font-size-small;
      line-height: $grid-unit-y * 2;
      margin-left: $grid-unit-x;
    }

    &-label {
      margin-left: auto;
      text-transform: capitalize;
    }

    // Empty Card
    &-empty {
      padding-top: $grid-unit-y - 1;
      padding-bottom: $grid-unit-y - 1;
      font-weight: $font-weight-bold;
      text-align: center;
      cursor: default;

      @include themes(color, color-text-dark);

      &:hover,
      &:focus {
        padding: ($grid-unit-y - 1) $grid-unit-x * 4;

        @include themes-border(kanban-card-border-color);
      }
    }
  }
}