/*
 * Data grid.
 */

@use "sass:math";

.data-grid {
    flex: 1;
}

.data-grid + .list-footer {
    margin-top: $component-margin-bottom;
}


// -
// Header
// ---

.data-grid-header {
    padding: $data-grid-gutter 0 $data-grid-gutter $data-grid-gutter;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.data-grid-sort {
    display: flex; // correct vertical align
    flex-direction: row;
    margin-left: auto;

    .btn {
        padding: 0 $data-grid-gutter;
    }
}

// customizes bulk actions
.data-grid .list-selected {
    border: var(--#{$prefix}border-width) solid transparent;
    margin-bottom: $data-grid-gutter;

    .list-selected-label,
    .btn {
        padding: $data-grid-gutter;
    }
}


// -
// Content & Items
// ---

.data-grid-content {
    margin: 0; // reset ul margin
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

    // remove <ul> styles
    list-style-type: none;
    padding: 0;
}

.data-grid-item-container {
    position: relative; // constrain selection checkbox

    .data-card {
        height: 100%;
        width: 100%;
    }
}

.data-grid-item-select {
    position: absolute;
    margin: 0 !important;
    left: $data-grid-gutter * 2;
    transition-property: box-shadow, transform;
    transition-duration: .3s;
}


// -
// Sizing
// ---

.data-grid-row {
    .data-grid-content {
        margin: -$data-grid-gutter*.5 (-$data-grid-gutter); // absorb items margin
    }

    .data-grid-item-container {
        padding: $data-grid-gutter*.5 $data-grid-gutter;
        flex: 0 0 100%;
        max-width: 100%;
    }

    .data-grid-item-select {
        top: $data-grid-gutter + $data-grid-gutter*.5;
    }
}

.data-grid-col {
    .data-grid-content {
        margin: -$data-grid-gutter; // absorb items margin
    }

    .data-grid-item-container {
        padding: $data-grid-gutter;
    }

    .data-grid-item-select {
        top: $data-grid-gutter * 2;
    }

    // XS screens :
    //   - small tiles : 2
    //   - large tiles : 1
    @media (max-width: map-get($grid-breakpoints, 'sm')) {
        &.data-grid-sm .data-grid-item-container {
            flex: 0 0 math.div(100%, 2);
            max-width: math.div(100%, 2);
        }

        &.data-grid-lg .data-grid-item-container {
            flex: 0 0 100%;
            max-width: 100%;
        }
    }

    // SM screens :
    //   - small tiles : 3
    //   - large tiles : 2
    @media (max-width: map-get($grid-breakpoints, 'md')) {
        &.data-grid-sm .data-grid-item-container {
            flex: 0 0 math.div(100%, 3);
            max-width: math.div(100%, 3);
        }

        &.data-grid-lg .data-grid-item-container {
            flex: 0 0 math.div(100%, 2);
            max-width: math.div(100%, 2);
        }
    }

    // MD & LG screens :
    //   - small tiles : 5
    //   - large tiles : 3
    @media (min-width: map-get($grid-breakpoints, 'md')) {
        &.data-grid-sm .data-grid-item-container {
            flex: 0 0 math.div(100%, 5);
            max-width: math.div(100%, 5);
        }

        &.data-grid-lg .data-grid-item-container {
            flex: 0 0 math.div(100%, 3);
            max-width: math.div(100%, 3);
        }
    }
}
