@use "sass:math";

.data-list {
    flex: 1 0 auto; // to fill page if needed
    display: flex;
    flex-direction: column;
    width: 100%;

    // Responsive table.
    //
    // I put it here to avoid possible side effects in other use of .table.
    // The code can seem a little bit weird but it permits to have all rows the same height (1 line)
    // and to add ellipsis on long texts.
    //
    // This is far from perfect but it's the best I can do for now.
    //
    // Drawbacks :
    //  - all columns get the same width. So for some data it's too large (cf. boolean) or too small (long text / links).
    //
    // It breaks dropdowns if applied to actions cells
    .table th:not(.actions-cell) {
        max-width: 1px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .content-loader {
        margin-top: $component-margin-bottom;
    }
}

.list-header {
    display: flex;
    align-items: stretch;
    justify-content: flex-end;

    .list-header-btn {
        font-size: $font-size-lg; // same as search icon
        line-height: $line-height-large;
        height: $input-height-lg;
        padding: $padding-large-vertical $padding-large-horizontal;
        background: $list-controls-bg;

        @include border-radius(0);
    }
}

.list-options {
    background: $list-controls-bg;
    margin-left: auto; // force right alignment if no search
}

.list-toolbar {
    background: $list-controls-bg;
}

.list-selected {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    background: $list-controls-bg;

    .list-selected-label {
        font-weight: $font-weight-bold;
        .fa {
            text-align: center;
        }
    }

    .list-selected-actions {
        white-space: nowrap; // avoids buttons to break on multi lines
    }
}

a.list-primary-action,
button.list-primary-action {
    @extend .btn-link;
}

.list-primary-action {
    text-align: inherit;
    display: block; // fill cell
    width: 100%;
    font-weight: $font-weight-bolder;
}

.list-footer {
    margin-top: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;

    .count {
        padding: $padding-base-vertical $padding-base-horizontal;
        border: $list-controls-border-width solid transparent;
        font-weight: $font-weight-bolder;
    }

    .pagination-container {
        margin-left: auto;
    }
}

.list-empty {
    flex: 1;
    padding: map-get($spacers, 3);
    color: var(--#{$prefix}tertiary-color);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .list-empty-icon {
        font-size: 5rem;
        color: $gray-200;
    }

    .list-empty-title {
        font-weight: $font-weight-bolder;
        font-size: $font-size-lg;
    }
}

@media (max-width: map-get($grid-breakpoints, 'sm')) {
    .list-footer {
        flex-direction: column;
        align-items: stretch;

        .count {
            order: 2;
            text-align: center;

            + .pagination-container {
                margin-bottom: floor(math.div($component-margin-bottom, 2));
            }
        }

        .pagination-container {
            order: 1;
            margin-left: 0;
        }
    }
}

.data-list-flush {
    @include embedded-list-variant();
}


// -
// Modals
// ---

.data-picker-modal {
    @include embedded-list-variant();
}


// -
// Embedded list
// ---

.embedded-list-section {
    @include embedded-list-variant();

    .accordion-body {
        padding: 0; // maybe not the best way to handle it
    }
}
