@container info-section (max-width: 800px) {
    table, tbody, tr, td, th {
        display: block;
        padding: 0 !important;
    }

    tbody {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }

    tr {
        flex-grow: 1;
    }

    tr:has(.file-buttons) {
        width: 100%;
    }

    th {
        font-size: .85em;
    }

    td {
        margin-bottom: .5em;
    }
}

/*
 * Promoted attributes
 */

div.promoted-attributes-container {
    margin-top: 8px;
    margin-bottom: 8px;
    margin-inline-start: 12px;
}

/*
 * File/Image Properties and Note Info
 */

 /* The property label */
.note-info-item > span:first-child,
.file-properties-widget .file-table th,
.image-properties > div:first-child > span > strong {
    opacity: 0.65;
    font-weight: 500;
    vertical-align: top;
}

.file-properties-widget .file-table td {
    vertical-align: top;
}

.file-properties-widget {
    container: info-section / inline-size;
}

.file-properties-widget .file-table {
    margin: 12px;
    width: unset;
}

.file-properties-widget td:has(.file-buttons) {
    padding: 8px 0 0 0;
}

/* The button bar */
.file-properties-widget .file-buttons,
.image-properties > div:last-of-type {
    padding: 0;
    margin: 0;
    justify-content: flex-start !important;
    flex-wrap: wrap;
    gap: 12px;
}

.file-properties-widget .file-buttons button {
    white-space: nowrap;
}

/* The properties row for images */
.image-properties > div:first-child {
    justify-content: flex-start !important;
    flex-wrap: wrap;
    gap: 10px 40px;
}

/*
 * Basic properties
 */

/* Note type dropdown */

ul.note-type-dropdown .check {
    margin-inline-end: 6px;
}

ul.note-type-dropdown li.dropdown-item {
    --menu-item-icon-vert-offset: 0;
}

/* Editability dropdown */

ul.editability-dropdown li.dropdown-item > div {
    margin-inline-start: 4px;
}

.editability-dropdown .dropdown-item .description {
    opacity: 0.75;
    font-size: 0.85em;
}

/*
 * Edited notes (for calendar notes)
 */

/* The path of the note */
.edited-notes-list small {
    margin-inline-start: 4px;
    font-size: inherit;
    color: var(--muted-text-color);
}

.edited-notes-list small::before {
    content: "(";
}

.edited-notes-list small::after {
    content: ")";
}

/*
 * Owned attributes
 */

.attribute-list .add-new-attribute-button,
.attribute-list .save-attributes-button {
    bottom: 0.3em;
}

.attribute-list .save-attributes-button {
    inset-inline-end: 30px;
}

/* Note path in attribute detail dialog */
.attr-detail .note-path {
    margin-inline-start: 8px;
}

/*
 * Similar notes
 */

:root .similar-notes-widget a {
    color: var(--cmd-button-text-color);
    background: var(--cmd-button-background-color);
}

:root .similar-notes-widget a:hover {
    color: var(--cmd-button-hover-text-color);
    background: var(--cmd-button-hover-background-color);
}

/*
 * Note info
 */

:root .note-info-widget-table button.calculate-button {
    min-width: 0;
    padding: 4px 10px !important;
    font-size: 0.8em;
}

/* Narrow width layout */
.note-info-widget {
    container: info-section / inline-size;
}

/*
 * Styling as a floating toolbar
 */
.ribbon-container {
    background: var(--card-background-color);
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
    margin: 10px;
    border-radius: 6px;
    padding: 5px 0;

    .ribbon-body {
        border-bottom: 0;
    }
}
