@use '../function' as *;
@use '../mixin';

@mixin roolith-article() {
    %roolith-article-font-style {
        font-size: rem(16);
        line-height: rem(26);
    }

    .article {
        p {
            @extend %roolith-article-font-style;
            padding: 0 0 rem(20);
        }

        .fig {
            margin: 0 0 rem(20);
        }

        .list {
            @extend %roolith-article-font-style;
            padding: 0 0 rem(20);
        }

        blockquote {
            @extend %roolith-article-font-style;
            margin: 0 0 rem(20);
        }

        dl {
            @extend %roolith-article-font-style;
            margin: 0 0 rem(20);
        }

        aside {
            @extend .small, .dimmed;
            padding-bottom: rem(20);
        }

        > *:last-child {
            padding-bottom: 0;
        }
    }

    .article-header {
        padding: 0 0 rem(25) !important;
    }

    .article-subheader {
        font-size: 60%;
        font-weight: var(--r-global-font-weight);
        line-height: 1;
        padding-top: rem(5);
        opacity: 0.5;

        &.blocked {
            display: block;
        }
    }

    .article-primary {
        display: grid;
        grid-template-columns: rem(10) 1fr rem(10);
        grid-column-gap: rem(20);

        @include mixin.breakpoint(medium-up) {
            grid-template-columns: rem(100) 1fr rem(100);
        }

        & > * {
            grid-column: 2;
            min-width: 0;
        }

        & > .fig,
        & > blockquote {
            grid-column: 1 / -1;

            @include mixin.breakpoint(medium-up) {
                margin: rem(20) rem(40) rem(40);
            }
        }

        & > aside {
            font-style: italic;
            @extend .small, .dimmed;

            @include mixin.breakpoint(large-up) {
                grid-column: 3;
            }
        }
    }
}