$kanban-border-color: #dcdcdc !default;
$kanban-border-radius: 4px !default;

$kanban-column-min-height: 24rem !default;
$kanban-column-header-padding: 0.25rem 0.5rem !default;
$kanban-column-body-bg: #F5F6F8 !default;
$kanban-column-body-padding: 0.5rem !default;
$kanban-column-message-padding: 1rem 0 !default;
$kanban-column-dragging-bg: #fafafa !default;

$kanban-card-margin: 0 0 0.5rem 0 !default;
$kanban-card-padding: 0.3rem !default;
$kanban-card-meta-color: #909AAA !default;
$kanban-card-meta-margin: 0.5rem 0 0 0 !default;
$kanban-card-anchor-color: #2185d0 !default;
$kanban-card-bg: #fff !default;
$kanban-card-border: none !default;
$kanban-card-shadow: 0px 1px 1px 0px rgba(#091E42, 0.25), 0px 0px 1px 0px rgba(#091E42, 0.31) !default;
$kanban-card-hover-bg: #F5F6F8 !default;
$kanban-card-hover-shadow: $kanban-card-shadow !default;
$kanban-card-active-bg: #F5F8FF !default;

.ge-kanban-board {
  display: flex;
}

.ge-kanban-column-container {
  flex: auto;
  white-space: nowrap;
  padding-bottom: 1rem;
  box-sizing: border-box;
  overflow: auto;

  &--pinned {
    flex: none;
    z-index: 1;
    position: relative;
  }

  &:first-child {
    padding-left: 0;
  }
}

.ge-kanban-column {
  width: 20vw;
  height: 100%;
  margin-right: 1rem;
  min-width: 16rem;
  max-width: 24rem;
  display: inline-flex;
  flex-direction: column;
  vertical-align: top;
  border: 1px solid $kanban-border-color;
  border-radius: $kanban-border-radius;
  min-height: $kanban-column-min-height;
  box-sizing: border-box;

  &--dragging  {
    border-style: dashed;

    & > * {
      opacity: 0;
    }
  }
  &:last-child {
    margin: 0;
  }
}

.ge-kanban-column-header {
  flex: none;
  border-bottom: 1px solid $kanban-border-color;
  cursor: grab;

  &-inner {
    padding: $kanban-column-header-padding;
  }
}

.ge-kanban-column-body {
  flex: auto;
  min-height: 0;
  background: $kanban-column-body-bg;
  padding: $kanban-column-body-padding;
  overflow-y: auto;
  transform: translateZ(0);
}

.ge-kanban-column-message {
  text-align: center;
  padding: $kanban-column-message-padding;
}

.ge-kanban-card {
  display: block;
  padding: $kanban-card-padding;
  margin: $kanban-card-margin;
  background: $kanban-card-bg;
  border: $kanban-card-border;
  box-shadow: $kanban-card-shadow;
  position: relative;
  white-space: normal;
  word-break: break-all;
  transition: transform .3s;
  cursor: grab;

  &:hover {
    background: $kanban-card-hover-bg;
    box-shadow: $kanban-card-hover-shadow;
  }

  &--hidden {
    pointer-events: none;
    transform: scale(1, 0);
  }

  &--loading {
    pointer-events: none;

    &:after {
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      position: absolute;
      content: "";
      opacity: 0.6;
      background: $kanban-card-bg;
    }
  }

  &--active,
  &--active:hover {
    background: $kanban-card-active-bg;
  }

  &--dragover::before {
    left: 0;
    top: -4px;
    width: 100%;
    content: "";
    position: absolute;
    border-bottom: 2px solid $kanban-card-anchor-color;
  }
}

.ge-kanban-card-meta {
  color: $kanban-card-meta-color;
  margin: $kanban-card-meta-margin;
}