.fi-changelog-widget {
    header {
        display: flex;
        align-items: center;
        gap: calc(2 * var(--spacing));
    }

    .action {
        margin-left: auto;
    }
}

.fi-changelog-releases {
    display: grid;
    gap: calc(12 * var(--spacing));

    &:has(> .fi-section) {
        gap: calc(4 * var(--spacing));
    }
}

.fi-changelog-release {
    &:not(.fi-section) {
        > header {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        h2 {
            font-weight: bold;
            font-size: var(--text-2xl);
        }
    }

    .fi-section-header-description {
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    &.fi-section:not(.fi-collapsed) .fi-section-header-description {
        display: none;
    }

    .fi-changelog-release-date {
        margin-inline-start: calc(var(--spacing) * 1);
        font-size: var(--text-sm);
        font-weight: var(--font-weight-normal);
        color: var(--gray-500);

        &::before {
            content: '·';
            margin-inline-end: calc(var(--spacing) * 2);
        }

        :where(.dark) & {
            color: var(--gray-400);
        }
    }

    .fi-prose {
        padding-top: calc(var(--spacing) * 2);
        max-width: 100%;

        img {
            border-radius: 3px;
            outline: 1px solid rgb(0 0 0 / 0.08);
            outline-offset: -1px;

            :where(.dark) & {
                outline-color: rgb(255 255 255 / 0.1);
            }
        }
    }
}

.fi-changelog-show-older {
    display: flex;
    justify-content: center;
}