/* ==========================================================
   TABLE LIST WRAPPER
   ========================================================== */

.table-list {
    max-width: 100%;
    width: min(100%, var(--table-list-width, 720px));
}

.table-list .table-surface {
    max-width: 100%;
}


/* ==========================================================
   SEARCH BAR
   ========================================================== */

.search-bar,
.table-toolbar {
    display: flex;

    align-items: center;

    gap: 10px;

    justify-content: space-between;

    margin-bottom: 16px;
}

.table-toolbar-search {
    flex: 1;
    min-width: 0;
}

.table-toolbar-actions {
    align-items: center;
    display: flex;
    flex: 0 0 auto;
    justify-content: flex-end;
}


/* ==========================================================
   SEARCH INPUT
   ========================================================== */

.search-input,
.table-toolbar-search-input {
    width: 260px;
}


/* ==========================================================
   SEARCH BAR ADD BUTTON
   ========================================================== */

.search-bar .btn-add,
.table-toolbar .btn-add {
    min-width: 34px;

    padding: 0 12px;

    text-decoration: none;

    display: inline-flex;

    align-items: center;

    justify-content: center;
}