.Datatable {
    @extend .bg-white;
    @include padding(25);
}

.dt-row {
    @extend .pad-5-y;
    @extend .align-center-y;
    margin-left: -10px;
}
.dt-row-head {
    @extend .pad-10-b;
}
.dt-row-body {
    &:nth-child(even) {
        @extend .bg-white-dark;
    }
}

.dt-cell-group {
    @extend .align-center-y;
    @extend .width-100;
}

.dt-cell-hidden-group {
    @extend .width-100;
    max-height: 0;
    overflow: hidden;
    transition: 200ms linear max-height;
    will-change: max-height;
    > .dt-cell {
        &:first-child {
            @extend .pad-20-t;
        }
        @extend .pad-10-y;
        @extend .align-start;
        > .dt-img {
            @extend .mar-10-l;
            @extend .mar-0-y;
        }
    }
}

.dt-cell {
    @extend .gr;
    @extend .pad-10-l;
    span {
        @extend .fw-300;
    }
}

.dt-cell-head {
    cursor: pointer;
    @extend .fc-black-light;
    @extend .fw-500;
    span {
        @extend .relative;
        @extend .pad-15-r;
        @extend .inline-block-item;
        color: inherit;
        font-weight: inherit;
        > i {
            @extend .transform-center-y;
            @extend .right-0;
            &.fa-sort-asc {
                @extend .fc-first;
                height: 7px;
            }
            &.fa-sort-desc {
                @extend .fc-first;
                height: 16px;
            }
        }
    }
}
.dt-cell-x2 {
    flex: 2
}
.dt-cell-x3 {
    flex: 3;
}
.dt-cell-nowrap {
    @extend .text-elipsis;
}
.dt-cell-body {
    @extend .fw-300;
    > span {
        &::before {
            content: attr(data-before);
        }
        &::after {
            content: attr(data-after);
        }
    }
}
.dt-img {
    max-height: 100px;
    @extend .mar-10-y;
}
.dt-cell-manage-buttons {
    @extend .align-end-x;
    flex: 2;
    cursor: auto;
    @extend .pad-10-r;
}
.dt-btn {
    @extend .btn;
    @extend .btn-small;
    display: inline-flex;
    align-items: center;
    border-radius: 4px;
    @extend .mar-5-r;
    padding: .4em .6em;
    background-color: #fff;
    box-shadow: 0 0 8px rgba(0,0,0, .06);
    min-width: fit-content;
    &.v-dropdown, .dropdown {
        padding: 0;
        > a {
            padding: .4em .6em;
        }
    }
    &:last-child {
        margin-right: 0;
    }
    > i {
        @extend .mar-5-r;
        transition: 250ms transform ease-out;
        will-change: transform;
        &.open {
            transform: rotate(45deg);
        }
    }
}

.dt-btn-circle {
    border-radius: 50%;
}

.dt-btn-no-text {
    > i {
        margin: 0;
        color: $colorBlackLight;
    }
}


