* {
    box-sizing: border-box;
}

.wrapper {
    @mixin card;
    display: grid;
    grid-template-columns: min-content 1fr repeat(3, max-content);
    align-items: center;
    gap: 0 16px;
    padding: 0 24px;
}

.divider, ::slotted(*)::after {
    grid-column-start: 1;
    grid-column-end: -1;
    border-bottom: 1px solid var(--border-divider-color);
    margin-left: -24px;
    margin-right: -24px;
}

::slotted(*)::after {
    content: "";
    display: block;
}


.header {
    display: contents;
    padding: 8px 24px;

    & .title {
        @mixin font-overline;
        color: var(--element-neutral-color);
        grid-column-start: 1;
        grid-column-end: -2;
        height: 64px;
        display: flex;
        align-items: center;
    }

    & .ack-all-btn {
        grid-column-end: -1;
        height: 64px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

}

.empty {
    grid-column-start: 1;
    grid-column-end: -1;
    padding: 16px 0;
    @mixin font-body;
    color: var(--element-neutral-color);
}

.alert-list-btn {
    grid-column-start: 1;
    grid-column-end: -1;
    margin-left: -24px;
    margin-right: -24px;
}