//
// Kanban
//

@keyframes progress-bar-stripes {
  0% {
    background-position: 1rem 0;
  }

  100% {
    background-position: 0 0;
  }
}

body {

  .edit-tsk,
  .edit-list {
    display: none;
  }

  .task-list-section {
    display: flex;
    gap: 24px;
    flex-wrap: nowrap;
  }

  .task-list-container {
    width: 270px;
    flex-shrink: 0;
  }

  .connect-sorting-todo {
    background: var(--bs-gray-200);
  }

  .connect-sorting-inprogress {
    background-color: var(--bs-secondary-bg-subtle) !important;
  }

  .connect-sorting-pending {
    background-color: var(--bs-info-bg-subtle) !important;
  }

  .connect-sorting-done {
    background-color: var(--bs-success-bg-subtle) !important;
  }

  .connect-sorting {
    padding: 20px;
    background: var(--bs-gray-200);
    border-radius: $card-border-radius;

    .task-container-header {
      display: flex;
      justify-content: space-between;
      padding: 6px 3px 18px;

      .dropdown-toggle {
        &::after {
          display: none;
        }
      }

      .dropdown {
        .dropdown-toggle {
          width: 24px;
          height: 24px;
          display: flex;
          cursor: pointer;
          align-items: center;
          justify-content: center;
          box-shadow: var(--bs-box-shadow);
          border-radius: 100%;
          background-color: var(--bs-body-bg);
          font-weight: var(--font-weight-bolder);
        }
      }
    }

    .add-s-task {
      .addTask {
        width: 24px;
        height: 24px;
        display: flex;
        cursor: pointer;
        align-items: center;
        justify-content: center;
        box-shadow: var(--bs-box-shadow);
        border-radius: 100%;
        background-color: var(--bs-body-bg);
        font-weight: var(--font-weight-bolder);
      }
    }
  }

  .scrumboard {
    .task-header {
      margin-bottom: 0;
      display: flex;
      justify-content: space-between;
      padding: 11px 13px;

      .dropdown {
        .dropdown-toggle {
          &::after {
            display: none;
          }
        }
      }

      h4 {
        font-size: 14px;
        font-weight: 600;
        margin-bottom: 0;

        &:hover {
          cursor: move;
        }
      }
    }

    .task-content {
      padding: 11px 13px;
    }

    .card {
      background: var(--bs-body-bg);
      border: none;
      border-radius: $card-border-radius;
      margin-bottom: 15px;

      .card-body {
        padding: 0;

        .task-body {
          .task-bottom {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 12px 15px;

            div.tb-section-1 {
              span {
                &:hover {
                  color: var(--bs-primary);
                  cursor: pointer;
                }
              }
            }

            div.tb-section-2 {
              i.ti-pencil {
                &:hover {
                  color: var(--bs-primary);
                }
              }
            }
          }
        }
      }
    }

    .card.img-task {
      .card-body {
        .task-content {
          img {
            height: 106px;
            width: 100%;
          }
        }
      }
    }

    .card.simple-title-task {
      .card-body {
        .task-header {
          margin-bottom: 0;
          padding: 11px 13px;

          div {
            &:nth-child(1) {
              width: 70%;
            }

            &:nth-child(2) {
              width: 30%;
              text-align: right;
            }
          }
        }

        .task-body {
          .task-bottom {
            padding: 3px 15px 11px 15px;
          }
        }
      }
    }
  }

  .ui-state-highlight {
    position: relative;
    border-color: var(--bs-primary);
    height: 141px;
    margin-bottom: 36px;
    border-radius: 15px;
    border: 2px dashed var(--bs-primary);
    background-color: var(--bs-body-bg);
    box-shadow: var(--card-box-shadow);
    background-image: linear-gradient(45deg,
        rgba(93, 135, 255, 0.09) 25%,
        transparent 25%,
        transparent 50%,
        rgba(93, 135, 255, 0.09) 50%,
        rgba(93, 135, 255, 0.09) 75%,
        transparent 75%,
        transparent);
    background-size: 1rem 1rem;
    -webkit-animation: progress-bar-stripes 1s linear infinite;
    animation: progress-bar-stripes 1s linear infinite;
  }

  .connect-sorting-content {
    min-height: 60px;
  }
}