.back-to-account-link {
    margin-bottom: 1rem;
    display: block;
    font-size: var(--bc-fs-500);
}

.filter-wrapper {
    margin-bottom: 2rem;
}
.search-input, .filter-button {
    background: var(--bc-clr-dark-800);
    border: none;
    border-radius: .5rem;
    padding: 1rem;
}
.search-input {
    width: min(55rem, 50%);
}
:is(.search-input, .filter-button):is(:hover, :focus, :focus-visible, :focus-within) {
    background: var(--bc-clr-dark-900);
}
.result-count {
    margin-right: 1rem;
    font-size: var(--bc-fs-300);
    font-weight: 300;
    color: var(--bc-clr-text-800);
}

@container (max-width: 550px) {
    .search-input {
        width: 100%;
    }
    .result-count {
        display: none;
    }
}

.row {
    border-bottom: 1px solid var(--bc-clr-dark-400);
    padding: 1.5rem;
    container-type: inline-size;
}
.row-icon {
    height: 8rem;
    aspect-ratio: 1 / 1;
    object-fit: contain;
}
.row-text {
    width: 100%;
    overflow: hidden;
}
.row-header {
    overflow: hidden;
}
.row-title {
    margin: 0;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-family: var(--bc-ff-heading);
    font-size: var(--bc-fs-600);
    font-weight: 600;
    color: var(--bc-clr-primary-400);
    overflow: hidden;
}
.row-date {
    margin: 0;
    width: max-content;
    font-weight: 300;
    color: var(--bc-clr-text-600);
}
.row-content {
    margin: 0;
    color: var(--bc-clr-text-100);
}
.row-action {
    margin: 0;
    display: block;
    font-weight: 400;
    font-size: var(--bc-fs-400);
    color: var(--bc-clr-secondary-400);
}
.row-action:is(:hover, :focus-visible) {
    background: transparent;
}

.notification-unread .row-title {
    font-style: italic;
    color: var(--bc-clr-secondary-400);
}
.notification-unread .row-content {
    font-style: italic;
}

@container (max-width: 600px) {
    .row-icon {
        display: none;
    }
}