.ff-audit-entry {
    display: grid;
    grid-template-areas:
        'time       author'
        'entry       entry';
    grid-gap: 0.25rem;
    align-items: center;
    label {
        font-weight: 500;
    }
    span {
        color: $ff-grey-400;
        font-weight: 400;
        font-size: 0.875rem;
        line-height: 1rem;
        display: block;
        width:100%;
    }

    svg path {
        stroke-width: 2px;
    }
    &--error {
        position: relative;
        summary {
            display: flex;
            align-items: center;
            list-style: none;
            cursor: pointer;
            font-size: 0.875rem;
            color: $ff-grey-500;
            &::-webkit-details-marker {
                display: none;
            }
        }
        // the chevron down will only show when detail is opened
        span .ff-icon {
            position: absolute;
            top: 3px;
            left: 0;
            background-color: $ff-grey-50;
            fill: $ff-grey-500;
        }
        &:hover {
            summary {
                color: black;
            }
            span .ff-icon {
                fill: black;
            }
        }
    }
}

.ff-audit-entry-info {
    grid-area: entry;
}

.ff-audit-entry-trigger, .ff-audit-entry-time {
    grid-area: time;
    display: block;
    color: $ff-grey-500;
    overflow-x: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.ff-audit-entry-trigger {
    grid-area: author;
    text-align: right;
}


@media screen and (min-width: $ff-screen-lg) {
    .ff-audit-entry {
        grid-template-areas: 'time entry author';
        grid-template-columns: min-content 1fr min-content;
    }
}