:root {
  --itf-board-column-hover-color: rgba(0, 0, 0, .05);
  --itf-board-column-width: 300px;
  --itf-board-column-bg-color: #f4f5f7;
  --itf-board-placeholder-color: #47BEFF;
  --itf-board-placeholder-border-color: #0567eb;
  --itf-board-placeholder-bg-color: #ebeffe;
  --itf-board-card-bg-color: #fff;
  --itf-board-card-hover-color: rgba(0, 0, 0, .05);
  --itf-board-card-border-color: #ccc;
}

[data-theme="dark"] {
  --itf-board-column-hover-color: rgba(255, 255, 255, .05);
  --itf-board-column-bg-color: #2c2f33;
  --itf-board-placeholder-color: #FFCC00;
  --itf-board-placeholder-border-color: #FFCC00;
  --itf-board-placeholder-bg-color: #383b41;
  --itf-board-card-bg-color: #232529;
  --itf-board-card-border-color: #393939;
}

.itf-board {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;

  .draggable-mirror {
    z-index: 100000001;
    min-width: var(--itf-board-column-width);
    padding: 1rem;
    background-color: var(--itf-board-column-hover-color);
    border-radius: var(--bs-border-radius);
  }

  .draggable-mirror {
    opacity: .5;
  }

  .draggable-source--is-dragging {
    z-index: 100;
    position: absolute;
  }

  .draggable-container--over .itf-board-header-space,
  .draggable-container--over .itf-board-card-space {
    display: block;
  }

  .draggable-container--over .draggable--over .itf-board-header-space,
  .draggable-container--over .draggable--over .itf-board-card-space, {
    background: var(--itf-board-placeholder-color);
  }

  .draggable-container--is-dragging .itf-editable-button .itf-editable-button__button {
    opacity: 0 !important;
  }

  .itf-board-header-space {
    height: 100%;
    position: absolute;
    left: 0;
    display: none;
    background: transparent;
    z-index: 100;
    width: 4px;
    top: 0;
    border-radius: 10px;
    margin-left: -2px;

    &.right {
      left: auto;
      right: -2px;
      top: 0;
    }

    &.active {
      display: block;

      &.over {
        background: var(--itf-board-placeholder-color);
      }
    }

    .draggable-container--over & {
      display: block;
    }

    .draggable-container--over .draggable--over & {
      background: var(--itf-board-placeholder-color);
    }

    .itf-board-header-dropzone {
      position: absolute;
      height: 100px;
      top: 0;
      right: -50px;
      bottom: 0;
      left: -50px;
    }
  }

  .empty-column-bg {
    position: absolute;
    width: 60%;
    left: 50%;
    top: 60px;
    transform: translate(-50%);
    opacity: .75;
    z-index: 0;
    user-select: none;
    text-align: center;
  }
}

.z-index-2 {
  z-index: 2;
}

.itf-board-titles,
.itf-board-columns {
  display: flex;
  flex-wrap: nowrap;

  .itf-board-column {
    position: relative;
    width: var(--itf-board-column-width);
    min-width: var(--itf-board-column-width);
    border-radius: 0 0 var(--bs-border-radius) var(--bs-border-radius);

    &__title {
      border-radius: var(--bs-border-radius) var(--bs-border-radius) 0 0;

      .itf-board-column__header {
        min-height: 1.5rem;
      }

      .itf-editable-button__button {
        top: -3px;
        right: -3px;
      }
    }

    &__move {
      cursor: move;
    }

    &.over {
      background-color: var(--itf-board-column-hover-color);
    }

    &.drop:not(.itf-board-column__title) {
      &:after {
        content: '';
        position: absolute;
        left: 0;
        background: var(--itf-board-placeholder-color);
        z-index: 100;
        width: 4px;
        top: -10px;
        bottom: 0;
        border-radius: 10px;
        margin-left: -2px;
      }

      &.right:after {
        left: auto;
        right: -2px;
      }
    }
  }
}

.itf-board-titles {
  width: max-content;
  border-bottom: 1px solid var(--itf-board-card-border-color);
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: var(--bs-light);
}

.itf-board-columns {
  max-height: 100%;
  padding-bottom: 45px;

  .empty-column .itf-board-card-space.bottom {
    top: 0;
    height: 100%;
  }
  .itf-board-column {
    display: flex;
  }
  .itf-board-card-space {
    display: none;
    background: transparent;
    height: 0px;
    position: relative;

    &:after {
      content: '';
      position: absolute;
      height: 5px;
      left: 5px;
      right: 5px;
      z-index: 100;
      border-radius: 10px;
      top: -8px;
    }

    .itf-board-header-dropzone {
      position: relative;
      right: 0;
      top: -50px;
      left: 0;
      bottom: 0px;
      height: 50px;
    }
    &.bottom {
      top: auto;
      position: relative;
    }

    &.active {
      display: block;

      &.over:after {
        background: var(--itf-board-placeholder-color);
      }
    }

    .draggable-container--over & {
      display: block;
    }

    .draggable-container--over .draggable--over & {
      background: var(--itf-board-placeholder-color);
    }
  }
}

.itf-board-card {
  background-color: var(--itf-board-card-bg-color);
  border-radius: var(--bs-border-radius);
  border: 1px solid var(--itf-board-card-border-color);
  margin-bottom: .75rem;
  overflow: hidden;
  user-select: none;
  padding: .5rem;
  cursor: pointer;

  &:hover, &:focus {
    background-color: var(--itf-board-card-hover-bg-color);
  }

  .itf-board-card-inner {
    font-size: .875rem;
    word-wrap: break-word;
    -webkit-line-clamp: unset;
    word-break: break-word;
  }
}

.itf-board-column-wrapper {
  display: flex;
  flex-direction: column;
  max-height: 100%;
  flex-grow: 1;
  max-width: 100%;
}

.itf-board-cards-wrapper {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  flex-grow: 1;
  padding: .5rem .25rem 0;
  background-color: var(--itf-board-column-bg-color);
  border-radius: var(--bs-border-radius);

  > div:first-child > .itf-board-card-space > .itf-board-header-dropzone {
    top: -30px;
    z-index: 100;
  }

  > .itf-board-card-space:last-child {
    flex: 1;
  }

  .draggable-source--is-dragging {
    position: relative !important;
    .itf-board-card {
      background-color: var(--itf-board-card-border-color);

      & > div {
        opacity: 0;
      }
    }
  }

  .draggable-mirror {
    padding: 0;
    opacity: .8;
    background: transparent;
    min-width: auto;
    .itf-board-card {
      transform: rotate(-2deg);
      border: 2px solid var(--itf-board-placeholder-border-color);
      background: var(--itf-board-placeholder-bg-color);
    }
  }

  & > div {
    position: relative;
  }
}
