// RIVER Design-System: Preload - Styles / Lists & Tables //

// Define our list and table styles here.
// These are often used for WYSIWYG content and the like (as well as letterhead templates for example).
// We use these to apply default HTML elements styling via the '.scope-styles' scope defined in 'helpers/styles-scope'.

@if(design-setting('helpers') and design-setting('helpers.styles-lists', false)) {
    /* RIVER Design-System: Helpers - Styles / Formats */

    // List <ul><ol><li>
    .style-list {
        margin-left: 2em;
    }
    .style-list--ul  {
        list-style: disc;
    }
    .style-list--ol {
        list-style: decimal;
    }
    .style-li {}

    // Table <table><th><td>
    .style-table {
        display: table;
        width: 100%;
    }
    .style-table th, td {
        padding: design-variable('sizes.padding.small', 0.5rem 1rem);
        border-bottom: design-variable('common.border.normal', solid 1px slategray);
        border-color: design-variable('colors.gray.bg', ghostwhite);
    }
    .style-table th {
        font-weight: design-variable('type.weight.bold', bold);
        font-size: (1em * design-value('size.multiplier.big-subtle', 1.05));
    }

}