/**
 * 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: var(--font-size-20);
    }
}

/**
 * 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;
}

/**
 * Apply default typography styles.
 */
.dh-typography() {
    h1 {
        font-family: @font-title;
        margin: 0;
        border: none;
        font-weight: normal;
    }

    h1 input[type='text'] {
        font-family: @font-title;
    }

    h2,
    h3 {
        font-family: @font-subtitle;
        margin: 0;
        border: none;
        font-weight: normal;
    }

    h4 {
        font-family: @font-body;
        font-size: var(--font-size-14);
        border: none;
        font-weight: 700;
        margin: 0;
        text-shadow: none;
        font-weight: normal;
    }

    h5 {
        font-family: @font-body;
        font-size: var(--font-size-14);
        margin: 0;
        font-weight: normal;
    }

    p,
    span,
    textarea,
    label,
    select,
    multi-select .tags .tag,
    table,
    fieldset legend,
    input[type='text'],
    input[type='number'],
    input[type='search'],
    .tagify__dropdown,
    li {
        font-family: @font-body;
    }

    button span {
        font-weight: bold;
    }

    small {
        font-family: @font-body;
        opacity: 0.8;
    }

    nav a {
        font-family: @font-body;
    }
}