$ease-out: all .3s cubic-bezier(0.23, 1, 0.32, 1);
$backlog: #F4CE46;
$review: #95b2c1;
$todo: #FB7D44;
$in-progress: #2A92BF;
$approved: #00B961;
$trash: gray;
$accent: #01141C;
$done: #0C2E3B;

ul.drag-list, ul.drag-inner-list {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.drag-container {
    overflow-x: auto;
    //margin: 0px -24px;

    //@media (max-width: 1264px) {
    //margin: 20px -36px;
    //}

}

.drag-list {
    // https://flexbox.netlify.app/
    display: flex;
    //align-items: flex-start;
    align-items: stretch;
    //@media (max-width: 690px) {
    //    display: block;
    //}
}

.drag-inner-list {
    min-height: 500px; // invisible drop area
}

.drag-column {
    flex: 1;  // this is vertical flexing
    margin: 0 10px;
    position: relative;
    overflow: hidden;
    min-width: 250px;

    //display: flex;
    //flex-direction: column;

    //@media (max-width: 690px) {
    //    margin-bottom: 30px;
    //}

    h2 {
        font-size: 0.8rem;
        margin: 0;
        text-transform: uppercase;
        font-weight: 600;
    }

    .drag-column-header > div {
        width: 100%;

        h2 > a {
            float: right;
        }
    }

    //.drag-column-footer {
    //    padding: 0 0;
    //    .v-card {
    //        height: 125px;
    //        background: rgba(255,255,255,0.3);
    //    }
    //
    //    .empty {
    //        // TODO
    //        margin: -135px 0;
    //    }
    //}

    //.drag-column-footer > div {
    //    width: 100%;
    //}

    &-Backlog {
        margin-left: 0;
        .drag-inner-list {
            min-height: 380px;
        }
    }

    &-Todo {
    }

    &-Work-in-Progress {
    }

    &-Review {
    }

    &-Done {
        .drag-column-header > div > div {
            background: $done;
            color: white;
            padding-left:16px;
        }

        .v-chip {
            background: $done !important;
        }

    }

    &-Rejected {
        padding-right: 10px;
        .is-moved,
        .drag-options {
            background: $trash;
        }

        .v-chip {
            background: $trash !important;
        }
    }
}

.section {
    padding: 20px;
    text-align: center;

    a {
        color: white;
        text-decoration: none;
        font-weight: 300;
    }

    h4 {
        font-weight: 400;

        a {
            font-weight: 600;
        }
    }
}

.drag-column-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.drag-column-header > div > .v-card {
    border: none;
    margin-top: 10px;
    height: 120px;
    background: rgba(255,255,255,0.3);
}

.drag-column-header > div > div {
    background: rgba(0,0,0,0);
    //border: black solid 3px;
}

.drag-column-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
}

.drag-item {
    margin: 10px 0;
    transition: $ease-out;
    touch-action: none;

    &.is-moving {
        transform: scale(1.5);
    }

}

.drag-header-more {
    cursor: pointer;
}

.drag-options {
    position: absolute;
    top: 44px;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 10px;
    transform: translateX(100%);
    opacity: 0;
    transition: $ease-out;

    &.active {
        transform: translateX(0);
        opacity: 1;
    }

    &-label {
        display: block;
        margin: 0 0 5px 0;

        input {
            opacity: 0.6;
        }

        span {
            display: inline-block;
            font-size: 0.9rem;
            font-weight: 400;
            margin-left: 5px;
        }
    }
}

/* Dragula CSS  */

.gu-mirror {
  position: fixed !important;
  margin: 0 !important;
  z-index: 9999 !important;
  opacity: 0.8;
    list-style-type: none;
}

.gu-hide {
  display: none !important;
}

.gu-unselectable {
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
}

.gu-transit {
  opacity: 0.2;
}