$grid-icons: () !default;
$grid-icons: map-merge(
  (
    "edit": url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='576' height='512' viewBox='0 0 576 512'><path fill='#{$primary}' d='M402.6 83.2l90.2 90.2c3.8 3.8 3.8 10 0 13.8L274.4 405.6l-92.8 10.3c-12.4 1.4-22.9-9.1-21.5-21.5l10.3-92.8L388.8 83.2c3.8-3.8 10-3.8 13.8 0zm162-22.9l-48.8-48.8c-15.2-15.2-39.9-15.2-55.2 0l-35.4 35.4c-3.8 3.8-3.8 10 0 13.8l90.2 90.2c3.8 3.8 10 3.8 13.8 0l35.4-35.4c15.2-15.3 15.2-40 0-55.2zM384 346.2V448H64V128h229.8c3.2 0 6.2-1.3 8.5-3.5l40-40c7.6-7.6 2.2-20.5-8.5-20.5H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V306.2c0-10.7-12.9-16-20.5-8.5l-40 40c-2.2 2.3-3.5 5.3-3.5 8.5z'/></svg>"),
    "delete": url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='448' height='512' viewBox='0 0 448 512'><path fill='#{$danger}' d='M432 32H312l-9.4-18.7A24 24 0 0 0 281.1 0H166.8a23.72 23.72 0 0 0-21.4 13.3L136 32H16A16 16 0 0 0 0 48v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16zM53.2 467a48 48 0 0 0 47.9 45h245.8a48 48 0 0 0 47.9-45L416 128H32z'/></svg>"),
    "view": url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='576' height='512' viewBox='0 0 576 512'><path fill='#{$primary}' d='M572.52 241.4C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 400a144 144 0 1 1 144-144 143.93 143.93 0 0 1-144 144zm0-240a95.31 95.31 0 0 0-25.31 3.79 47.85 47.85 0 0 1-66.9 66.9A95.78 95.78 0 1 0 288 160z'/></svg>"),
    "config": url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='512' height='512' viewBox='0 0 512 512'><path fill='#{$primary}' d='M501.1 395.7L384 278.6c-23.1-23.1-57.6-27.6-85.4-13.9L192 158.1V96L64 0 0 64l96 128h62.1l106.6 106.6c-13.6 27.8-9.2 62.3 13.9 85.4l117.1 117.1c14.6 14.6 38.2 14.6 52.7 0l52.7-52.7c14.5-14.6 14.5-38.2 0-52.7zM331.7 225c28.3 0 54.9 11 74.9 31l19.4 19.4c15.8-6.9 30.8-16.5 43.8-29.5 37.1-37.1 49.7-89.3 37.9-136.7-2.2-9-13.5-12.1-20.1-5.5l-74.4 74.4-67.9-11.3L334 98.9l74.4-74.4c6.6-6.6 3.4-17.9-5.7-20.2-47.4-11.7-99.6.9-136.6 37.9-28.5 28.5-41.9 66.1-41.2 103.6l82.1 82.1c8.1-1.9 16.5-2.9 24.7-2.9zm-103.9 82l-56.7-56.7L18.7 402.8c-25 25-25 65.5 0 90.5s65.5 25 90.5 0l123.6-123.6c-7.6-19.9-9.9-41.6-5-62.7zM64 472c-13.2 0-24-10.8-24-24 0-13.3 10.7-24 24-24s24 10.7 24 24c0 13.2-10.7 24-24 24z'/></svg>"),
    "play": url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='448' height='512' viewBox='0 0 448 512'><path fill='#{$primary}' d='M424.4 214.7L72.4 6.6C43.8-10.3 0 6.1 0 47.9V464c0 37.5 40.7 60.1 72.4 41.3l352-208c31.4-18.5 31.5-64.1 0-82.6z'></path></svg>"),
    "database": url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='448' height='512' viewBox='0 0 448 512'><path fill='#{$primary}' d='M448 73.143v45.714C448 159.143 347.667 192 224 192S0 159.143 0 118.857V73.143C0 32.857 100.333 0 224 0s224 32.857 224 73.143zM448 176v102.857C448 319.143 347.667 352 224 352S0 319.143 0 278.857V176c48.125 33.143 136.208 48.572 224 48.572S399.874 209.143 448 176zm0 160v102.857C448 479.143 347.667 512 224 512S0 479.143 0 438.857V336c48.125 33.143 136.208 48.572 224 48.572S399.874 369.143 448 336z'></path></svg>"),
  ),
  $grid-icons
);
$grid-icons-flags: () !default;
$grid-icons-flags: map-merge(
  (
    "flag_on": url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='512' height='512' viewBox='0 0 512 512'><path fill='#{$success}' d='M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z'></path></svg>"),
    "flag_off": url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='512' height='512' viewBox='0 0 512 512'><path fill='#{$danger}' d='M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zM124 296c-6.6 0-12-5.4-12-12v-56c0-6.6 5.4-12 12-12h264c6.6 0 12 5.4 12 12v56c0 6.6-5.4 12-12 12H124z'></path></svg>"),
  ),
  $grid-icons-flags
);
$drag_indicator_icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='#{$gray-400}' d='M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2m0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8m0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14m6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6m0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8m0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14'/></svg>");
$fast_edit_icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='#{$gray-400}' d='M290.74 93.24l128.02 128.02-277.99 277.99-114.14 12.6C11.35 513.54-1.56 500.62.14 485.34l12.7-114.22 277.9-277.88zm207.2-19.06l-60.11-60.11c-18.75-18.75-49.16-18.75-67.91 0l-56.55 56.55 128.02 128.02 56.55-56.55c18.75-18.76 18.75-49.16 0-67.91z'></path></svg>");

table.dataTable {
    clear: both;
    max-width: none !important;
    border-collapse: separate !important;
    border-spacing: 0;
    tr, td,  th {
        transition: background .5s ease;
    }
    td,  th {
        box-sizing: content-box;
        vertical-align: middle;
        &.with_filter {
            background-color: rgba($cyan, 0.5);
        }
    }
    th {
        white-space: nowrap;
    }
    > thead > tr > th:active,
    > thead > tr > td:active {
        outline: none;
    }
    > thead > tr > th:not(.sorting_disabled),
    > thead > tr > td:not(.sorting_disabled) {
        padding-right: 30px;
    }
    > thead .sorting,
    > thead .sorting_asc,
    > thead .sorting_desc,
    > thead .sorting_asc_disabled,
    > thead .sorting_desc_disabled {
        cursor: pointer;
        position: relative;
    }
    > thead .sorting:before, > thead .sorting:after,
    > thead .sorting_asc:before,
    > thead .sorting_asc:after,
    > thead .sorting_desc:before,
    > thead .sorting_desc:after,
    > thead .sorting_asc_disabled:before,
    > thead .sorting_asc_disabled:after,
    > thead .sorting_desc_disabled:before,
    > thead .sorting_desc_disabled:after {
        position: absolute;
        bottom: 0.9em;
        display: block;
        opacity: 0.3;
    }
    > thead .sorting:before,
    > thead .sorting_asc:before,
    > thead .sorting_desc:before,
    > thead .sorting_asc_disabled:before,
    > thead .sorting_desc_disabled:before {
        right: 1em;
        content: "\2191";
    }
    > thead .sorting:after,
    > thead .sorting_asc:after,
    > thead .sorting_desc:after,
    > thead .sorting_asc_disabled:after,
    > thead .sorting_desc_disabled:after {
        right: 0.5em;
        content: "\2193";
    }
    > thead .sorting_asc:before,
    > thead .sorting_desc:after {
        opacity: 1;
    }
    > thead .sorting_asc_disabled:before,
    > thead .sorting_desc_disabled:after {
        opacity: 0;
    }

    &.table-bordered {
        border-right-width: 0;
    }
    &.table-bordered th,
    &.table-bordered td {
        border-left-width: 0;
    }
    &.table-bordered th:last-child, &.table-bordered th:last-child,
    &.table-bordered td:last-child,
    &.table-bordered td:last-child {
        border-right-width: 0;
    }
    &.table-bordered tbody th,
    &.table-bordered tbody td {
        border-bottom-width: 0;
    }
    th[rel="id"] {
        width: 50px;
    }
    th[rel="is_enabled"] {
        width: 90px;
    }
    th[rel="dg_actions"] {
        width: 70px;
    }
    th.sortable {
        cursor: pointer;
    }
    .filter input.form-control {
        min-width: 80px;
    }
}
.dataTables_wrapper {
    div.dataTables_length {
        label {
            font-weight: normal;
            text-align: left;
            white-space: nowrap;
        }
        select {
            width: auto;
            display: inline-block;
        }
    }
}
.table-responsive {
    > .dataTables_wrapper > .row {
        margin: 0;
    }
    > .dataTables_wrapper > .row > div[class^="col-"]:first-child {
        padding-left: 0;
    }
    > .dataTables_wrapper > .row > div[class^="col-"]:last-child {
        padding-right: 0;
    }
}
@include media-breakpoint-down(sm) {
    div.dataTables_wrapper div.dataTables_length {
        text-align: center;
    }
}
[v-cloak]:not(.skeleton) {
    display: none !important;
}
.skeleton-tree {
    li {
        list-style: none;
        margin: 5px 0 0 1px;
        font-weight: bold;
        > ul {
            padding-left: 15px;
            li {
                font-weight: normal;
            }
        }
    }
}
.skeleton {
    &[v-cloak], &.skeleton-loading {
        position: relative;
        overflow: hidden;
        > * {
            opacity: 0;
        }
        &::after {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            transform: translateX(-100%);
            background-image: linear-gradient(90deg, rgba($white, 0) 0, rgba($white, 0.2) 20%, rgba($gray-300, 0.8) 60%, rgba($white, 0));
            animation: shimmer 1.5s infinite;
            content: '';
        }
    }
}
.animated-row {
    animation-duration: 0.5s;
    animation-name: fadeRow;
}

.dropdown-multiselect {
    input {
        background: $white $custom-select-background !important;
        appearance: none;
        padding: $custom-select-padding-y ($custom-select-padding-x + $custom-select-indicator-padding) $custom-select-padding-y $custom-select-padding-x;
        cursor: pointer;
    }
    .dropdown-menu {
        transform: scaleY(0.8);
        display: block;
        transition: transform 0.2s, opacity 0.2s;
        max-height: 0;
        overflow-y: auto;
        opacity: 0;
        visibility: hidden;
        &.show_menu {
            visibility: visible;
            max-height: 330px;
            transform: scaleY(1);
            opacity: 1;
        }
    }
}
.datagrid {

    &-column__editmode {
        position: relative;
        .datagrid-editable__link {
            display: none !important;
        }
        &:after {
            content: '';
            height: 3px;
            display: block;
            background-color: $warning;
            position: absolute;
            left: 3px;
            bottom: -2px;
            right: 3px;
            z-index: 1;
        }
        &-modified:after {
            background-color: $success;
        }
        &-error:after {
            background-color: $danger;
        }
        &-form {
            display: inline-block;
            .form-control {
                background-color: transparent;
                appearance: none;
                width: 100%;
                height: 100%;
                outline: 0px;
                border: 0px;
                user-select: text;
                font-size: inherit;
                color: inherit;
                line-height: 16px;
                &:focus {
                    color: inherit;
                    background-color: inherit;
                    outline: 0;
                    box-shadow: none;
                }
            }
            input.form-control {
                padding: 0;
            }
            select.form-control {
                padding-top: 0;
                padding-left: 0;
                padding-bottom: 0;
                vertical-align: baseline;
            }
        }
    }

    tr {
        &.dragged_over {
            background: rgba($success, 0.3) !important;
        }
        &.dragged_end {
            animation: background-fade-highlight 2.5s ease-out;
        }
        &.dragged {
            background: $gray-300 !important;
        }
        &.dragged td {
            border-style: dashed;
            border-bottom-width: 1px !important;
            border-color: $primary;
            cursor:move !important;
        }
        &.dragged + tr td {
            border-top-width: 0;
        }
        .datagrid-editable__link {
            transition: opacity 0.3s;
            color: $gray-500;
            opacity: 0;
        }
        &:hover .datagrid-editable__link {
            opacity: 1;
        }
        &.selected, &.current-edit-line {
            td, &:hover td {
                background-color: $yellow;
                position: relative;
            }
        }
        &:hover {
            .grid_field_value::after {
                opacity: 1;
            }
        }
    }

    &.table-striped tbody tr.dragged_end:nth-of-type(odd) {
        animation: background-fade-highlight-striped 2.5s ease-out;
    }

    .datagrid-column-html {
        &__link {
            display: inline-block;
        }
    }

    &-backdrop {
        cursor: default;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba($gray-100, 0.3);
        z-index: 1;
        -webkit-backdrop-filter: blur(1px);
        backdrop-filter: blur(1px);
    }
    .actions {
        display: flex;
        align-items: center;
        a {
            text-decoration: none;
            width: 1.1em;
            height: 1.1em;
            background-position: center;
            background-repeat: no-repeat;
            background-size: contain;
            margin-right: $spacer*0.5;
            @each $icon-name, $value in $grid-icons {
                &.#{$icon-name} {
                    background-image: escape-svg($value);
                }
            }
            &:last-child {
                margin-right: 0;
            }
        }
    }
    .flag_trigger {
        display: flex;
        justify-content: center;
        &.loading {
            background-position: center center;
            a {
                opacity: 0;
            }
        }
        a {
            display: block;
            width: 1.1em;
            height: 1.1em;
            background-position: center;
            background-repeat: no-repeat;
            background-size: contain;
            transition: $transition-fade;
        }
        @each $icon-name, $value in $grid-icons-flags {
            &.#{$icon-name} a {
                background-image: escape-svg($value);
            }
        }
    }
    &.table-dragged {
        tbody {
            > tr {
                &:not(.filter) {
                    > .dragged_handle {
                        cursor: move;
                        position: relative;
                        &::before {
                            height: 20px;
                            width: 20px;
                            background-image: escape-svg($drag_indicator_icon);
                            background-position: center;
                            background-repeat: no-repeat;
                            background-size: 20px;
                            content: '';
                            display: block;
                            left: calc(100% - 20px);
                            position: absolute;
                            top: calc(50% - 10px);
                            opacity: 0;
                            transition: opacity 0.3s;
                            will-change: opacity;
                        }
                    }
                }
                &:hover {
                    > .dragged_handle {
                        &::before {
                            opacity: 1;
                        }
                    }
                }
            }
        }
    }

    .grid_field {
        &_edit {
            display: none;
            position: absolute;
            background-color: $white;
            padding: $spacer;
            box-shadow: $box-shadow-lg;
            width: 90%;
            top: $spacer*2;
            left: 5%;
            border: $border-width solid $border-color;
            z-index: 2;
            cursor: default;
            > .button {
                margin: $spacer 0 0 0;
            }
        }
        &_value {
            display: flex;
            align-items: center;
            &::after {
                width: 1.4em;
                height: 1.4em;
                background-image: escape-svg($fast_edit_icon);
                background-position: center;
                background-repeat: no-repeat;
                transition: $transition-fade;
                content: "";
                display: inline-block;
                margin: 0 0 0 $spacer;
                cursor: pointer;
                opacity: 0;
            }
        }
    }
}
@keyframes fadeRow{from{opacity:0.5}to{opacity:1}}
@keyframes shimmer {
  100% {
    transform: translateX(100%);
  }
}
@keyframes background-fade-highlight{0%{background-color:rgba($success, 0.3);box-shadow: 0px 0px 10px -1px rgba($success, 0.3);}100%{background-color:$white;box-shadow: 0px 0px 10px -1px $white;}}
@keyframes background-fade-highlight-striped{0%{background-color:rgba($success, 0.3);box-shadow: 0px 0px 10px -1px rgba($success, 0.3);}100%{background-color:$table-accent-bg;box-shadow: 0px 0px 10px -1px $table-accent-bg;}}