/* Styles for Changelog directive */

.changelog-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 2em;
    table-layout: fixed;
}

.changelog-table th,
.changelog-table td {
    padding: 12px 16px;
    border: 1px solid color-mix(in srgb, var(--imf-color-accent) 20%, var(--imf-color-background));
    vertical-align: top;
}

.changelog-table th {
    background-color: color-mix(in srgb, var(--imf-color-link) 10%, var(--imf-color-background));
    border-bottom: 2px solid color-mix(in srgb, var(--imf-color-accent) 20%, var(--imf-color-background));
    font-weight: 600;
    text-align: left;
}

.changelog-tag {
    background-color: color-mix(in srgb, var(--imf-color-link) 10%, var(--imf-color-background));
    border: 1px solid color-mix(in srgb, var(--imf-color-accent) 60%, var(--imf-color-background));
    color: var(--imf-color-link);
    display: block;
    padding: 4px 8px;
    margin: 2px 0;
    border-radius: 4px;
    font-size: 0.85em;
    font-weight: 500;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}