/**
 * Applies theme-specific styles.
 * @param {Rules}    @darkRules  - Styles to apply when `.theme-dark` is present
 * @param {Rules}    @lightRules - Styles to apply when `.theme-light` is present
 */
.appTheme(@darkRules, @lightRules) {
    // Dark theme selectors
    .themed.theme-dark .application.daggerheart.sheet.dh-style,
    .themed.theme-dark.application.daggerheart.sheet.dh-style,
    body.theme-dark .application.daggerheart,
    body.theme-dark.application.daggerheart {
        @darkRules();
    }

    // Light theme selectors
    .themed.theme-light .application.daggerheart.sheet.dh-style,
    .themed.theme-light.application.daggerheart.sheet.dh-style,
    body.theme-light .application.daggerheart,
    body.theme-light.application.daggerheart {
        @lightRules();
    }
}

/**
 * Apply a style to sidebar titles.
 */
.section-title() {
    display: flex;
    gap: 15px;
    align-items: center;

    h3 {
        font-size: 20px;
    }
}

/**
 * Apply default item list style.
 * @param {Length} @gap - The vertical spacing between elements (e.g., 10px, 1rem)
 */
.column-list(@gap: 10px) {
    display: flex;
    flex-direction: column;
    gap: @gap;
    align-items: center;
}