// RIVER Design-System: Preload - Styles / Formats //

// Define our typography formats 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-formats', false)) {
    /* RIVER Design-System: Helpers - Styles / Formats */

    // Titles
    .style-title {}
    .style-title--1 {}
    .style-title--2 {}
    .style-title--3 {}
    .style-title--4 {}
    .style-title--5 {}
    .style-title--6 {}

    // Headings
    .style-heading {}

    // Text
    .style-text {}

    // Paragraph <p>
    .style-paragraph {
        margin-bottom: design-variable('type.spacing.normal', 1em);
    }

    // Link <a>
    .style-link {
        color: design-variable('colors.primary.normal', slateblue);
        text-decoration: none;
        transition: design-variable('common.transition.fast', all 0.2s ease-in-out);
        transition-property: color;
    }
    .style-link:hover {
        cursor: pointer;
        color: design-variable('colors.primary.dark', slateblue);
    }

    // Button <button>
    .style-button {
        display: inline-block;
        padding: design-variable('sizes.padding.small', 0.5rem 1rem);
        color: design-variable('colors.base', white);
        background-color: design-variable('colors.primary.normal', slateblue);
        border: design-variable('common.border.normal', solid 1px slategray);
        border-color: design-variable('colors.primary.normal', slateblue);
        border-radius: design-variable('common.border-radius.normal', 0);
        font-weight: design-variable('type.weight.bold', bold);
        cursor: pointer;
        text-decoration: none;
    }
    .style-button:hover, .style-button:focus {
        background-color: design-variable('colors.primary.dark', slateblue);
        border-color: design-variable('colors.primary.dark', slateblue);
    }

    // Input <input>
    .style-input {
        display: inline-block;
        padding: design-variable('sizes.padding.small', 0.5rem 1rem);
        color: design-variable('colors.gray.normal', slategray);
        background-color: design-variable('colors.gray.bg', ghostwhite);
        border: design-variable('common.border.normal', solid 1px slategray);
        border-radius: design-variable('common.border-radius.input', 0);
    }
    .style-input:hover, .style-input:focus {
        border-color: design-variable('colors.primary.normal', slateblue);
    }

    // Small <small>
    .style-small {
        font-size: (1em * design-value('size.multiplier.small', 0.8));
    }

    // Big <big>
    .style-big {
        font-size: (1em * design-value('size.multiplier.big', 1.2));
    }

    // Strong <strong> <b>
    .style-strong {
        font-weight: design-variable('type.weight.bold', bold);
    }

    // Emphasis <em>
    .style-emphasis {
        font-style: italic;
    }

    // Caption
    .style-caption {
        color: design-variable('colors.gray.light', slategray);
        font-size: (1em * design-value('size.multiplier.small', 0.8));
        font-weight: design-variable('type.weight.bold', bold);
        text-transform: uppercase;
    }

    // Divider <hr>
    .style-divide {
        display: block;
        border: none;
        border-top: design-variable('common.border.normal', solid 1px slategray);
        margin: design-variable('sizes.size.large', 4rem) 0;
    }
    .style-divide--vertical {
        height: 100%;
        width: 0;
        border-top: none;
        border-left: design-variable('common.border.normal', solid 1px slategray);
        margin: 0 design-variable('sizes.size.layout-small', 9rem);
    }

    // Subtitle
    .style-subtitle {
        font-weight: design-variable('type.weight.title', 'type.weight.bold', bold);
        font-style: italic;
        border-bottom: design-variable('common.border.normal', solid 1px slategray);
        margin-bottom: design-variable('sizes.size.normal', 3rem);
    }

    // Blockquote <blockquote>
    .style-blockquote {
        padding: design-variable('sizes.padding.small', 0.5rem 1rem);
        border-left: solid 0.5rem design-variable('colors.gray.normal', slategray);
    }
    .style-blockquote > *:last-child {
        margin-bottom: 0;
    }

    // Inline Quote <q>
    .style-inlinequote {}
    .style-inlinequote:before {
        content: '“';
        margin-right: 0.1em;
    }
    .style-inlinequote:after {
        content: '”';
        margin-left: 0.1em;
    }

    // Quote
    .style-quote {
        display: inline-block;
        padding: design-variable('sizes.padding.small', 0.5rem 1rem);
        background-color: design-variable('colors.gray.bg', ghostwhite);
    }
    .style-quote:before {
        content: '“';
        margin-right: 0.25em;
        font-size: 1.2em;
        color: design-variable('colors.gray.light', slategray);
    }
    .style-quote:after {
        content: '”';
        margin-left: 0.25em;
        font-size: 1.2em;
        color: design-variable('colors.gray.light', slategray);
    }

    // Code <code>
    .style-code {
        display: inline-block;
        padding: design-variable('sizes.size.smallest', 0.5rem);
        font-size: (1em * design-value('size.multiplier.small', 0.8));
        background-color: design-variable('colors.gray.bg', ghostwhite);
    }

    // Codeblock <pre>
    .style-codeblock {
        display: inline-block;
        padding: design-variable('sizes.padding.small', 0.5rem 1rem);
        background-color: design-variable('colors.gray.bg', ghostwhite);
    }

    // Overlay
    .style-overlay {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    .style-overlay--gray {
        background-color: design-variable('colors.gray.alpha', rgba(0, 0, 0, 0.5));
    }

}