/* COMPONENT STYLES */

/* .c4lv prefix instead of .c4l only for the parent class of an element supporting variants */

/* Utilities */

.c4l-spacer {
    display: block;
    height: 12px;

    + .c4l-keyconcept,
    + .c4lv-keyconcept,
    + .c4l-tip,
    + .c4lv-tip,
    + .c4l-reminder,
    + .c4lv-reminder,
    + .c4l-attention,
    + .c4lv-attention,
    + .c4l-quote,
    + .c4lv-quote,
    + .c4l-example,
    + .c4lv-example,
    + .c4l-expectedfeedback,
    + .c4lv-expectedfeedback,
    + .c4l-learningoutcomes,
    + .c4lv-learningoutcomes {
        margin: 0 auto;
    }

    + .c4l-dodontcards .c4l-dodontcards-do,
    + .c4lv-dodontcards .c4l-dodontcards-do {
        margin-top: 0;

    }

    + .c4l-dodontcards .c4l-dodontcards-dont,
    + .c4lv-dodontcards .c4l-dodontcards-dont {
        margin-bottom: 0;
    }

    + .c4l-readingcontext,
    + .c4lv-readingcontext {
        margin-top: 16px;
        margin-bottom: 4px;
    }

    + .c4l-figure,
    + .c4lv-figure {
        margin: 24px auto 14px auto;
    }

    + .c4l-proceduralcontext,
    + .c4lv-proceduralcontext {
        margin-bottom: 0;
        padding-top: 0;
        padding-bottom: 0;
    }
}

.c4l-inline-group {
    display: flex;
    flex-direction: row;
    align-content: flex-end;
    justify-content: flex-end;
}

.c4l-display-left {
    display: flex;
    flex-direction: row;
    align-content: flex-start;
    justify-content: flex-start;
}

.c4l-spacer + .c4l-display-left {
    margin-top: 0;
}

.c4l-embedded-caption {
    font-size: 13px;
    margin-top: 12px;
    text-align: right;

    span {
        text-transform: uppercase;
        font-size: 14px;
    }

    span::after {
        content: ", ";
    }
}

/* Key concept */

.c4l-keyconcept,
.c4lv-keyconcept {
    min-width: 200px;
    max-width: 99%;
    background-color: #f1f5fe;
    padding: 24px 36px 30px 36px;
    border: none;
    border-left: 6px solid #387af1;
    margin: 36px auto;
    position: relative;
    border-radius: 0;

    p:last-of-type {
        margin-bottom: 0;
    }
}

/* Tip */

.c4l-tip,
.c4lv-tip {
    min-width: 200px;
    max-width: 99%;
    background-color: #fbeffa;
    padding: 24px 48px 30px 36px;
    border: none;
    border-left: 6px solid #b00ca9;
    margin: 36px auto;
    position: relative;
    border-radius: 0;

    p:last-of-type {
        margin-bottom: 0;
    }

    &::after {
        content: url([[pix:tiny_c4l|noun_project_icons/c4l_tip]]);
        position: absolute;
        top: 6px;
        right: -3px;
    }
}

/* Reminder */

.c4l-reminder,
.c4lv-reminder {
    min-width: 200px;
    max-width: 99%;
    background-color: #eff8fd;
    padding: 24px 48px 30px 36px;
    border: none;
    border-left: 6px solid #16b9ff;
    margin: 36px auto;
    position: relative;
    border-radius: 0;

    p:last-of-type {
        margin-bottom: 0;
    }

    &::after {
        content: url([[pix:tiny_c4l|noun_project_icons/c4l_reminder]]);
        position: absolute;
        top: 6px;
        right: -3px;
    }
}

/* Attention */

.c4l-attention,
.c4lv-attention {
    min-width: 200px;
    max-width: 99%;
    background-color: #fef6ed;
    padding: 24px 48px 30px 36px;
    border: none;
    border-left: 6px solid #f88923;
    margin: 36px auto;
    position: relative;
    border-radius: 0;

    p:last-of-type {
        margin-bottom: 0;
    }

    &::after {
        content: url([[pix:tiny_c4l|c4l_attention]]);
        position: absolute;
        top: 6px;
        right: -3px;
    }
}

/* Quote */

.c4l-quote,
.c4lv-quote {
    /*font-family: "Lora", serif; <== Reccomended font -not included: requires link to Google Fonts */
    font-family: Iowan Old Style, Apple Garamond, Baskerville, Times New Roman,
        Droid Serif, Times, Source Serif Pro, serif, Apple Color Emoji,
        Segoe UI Emoji, Segoe UI Symbol;
    font-size: 16px;
    line-height: 24px;
    margin: 24px auto;
    min-width: 200px;
    max-width: 100%;

    .c4l-quote-body {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: stretch;
        align-content: space-between;
        font-style: italic;
    }

    .c4l-quote-line {
        border-left: 4px solid #387af1;
        margin-right: 16px;
        margin-top: 4px;
        margin-bottom: 2px;
    }

    .c4l-quote-text::before {
        content: "";
        position: static;
        top: 0;
        margin-right: 0;
    }

    .c4l-quote-text::after {
        content: "";
        position: static;
        top: 0;
        margin-left: 0;
    }

    .c4l-quote-text p:first-of-type::before {
        content: url([[pix:tiny_c4l|noun_project_icons/c4l_quote_open]]);
        position: relative;
        top: -4px;
        margin-right: 2px;
    }

    .c4l-quote-text p:last-of-type::after {
        content: url([[pix:tiny_c4l|noun_project_icons/c4l_quote_close]]);
        position: relative;
        top: -2px;
        margin-left: 2px;
    }

    .c4l-quote-text p:last-of-type {
        margin-bottom: 0;
    }
}

.c4l-quote {
    .c4l-quote-caption {
        font-size: 13px;
        margin-top: 12px;
        text-align: right;
    }

    .c4l-quote-caption span {
        text-transform: uppercase;
        font-size: 14px;
    }

    .c4l-quote-caption span::after {
        content: ", ";
    }
}

/* Do - Don't cards */

.c4l-dodontcards,
.c4lv-dodontcards {
    .c4l-dodontcards-do,
    .c4l-dodontcards-do {
        margin-top: 36px;
    }

    .c4l-dodontcards-dont,
    .c4l-dodontcards-dont {
        margin-bottom: 36px;
    }

    > .c4l-dodontcards-dont {
        margin-top: 12px;
    }

    .c4l-dodontcards-do {
        min-width: 200px;
        max-width: 100%;
        background: #f1fbf5;
        border-radius: 10px;
        padding: 24px 48px 30px 36px;
        margin: 12px auto;
        position: relative;
    }

    .c4l-dodontcards-do::before {
        content: url([[pix:tiny_c4l|c4l_docard]]);
        position: absolute;
        top: 12px;
        right: 12px;
    }

    .c4l-dodontcards-dont {
        min-width: 200px;
        max-width: 100%;
        background: #ffefef;
        border-radius: 10px;
        padding: 24px 48px 30px 36px;
        margin: 12px auto;
        position: relative;
    }

    .c4l-dodontcards-dont::before {
        content: url([[pix:tiny_c4l|c4l_dontcard]]);
        position: absolute;
        top: 12px;
        right: 12px;
    }

    .c4l-dodontcards-do p,
    .c4l-dodontcards-dont p {
        margin-bottom: 6px;
    }

    .c4l-dodontcards-do p:last-of-type,
    .c4l-dodontcards-dont p:last-of-type {
        margin-bottom: 0;
    }
}

/* Reading Context */

.c4l-readingcontext,
.c4lv-readingcontext {
    min-width: 200px;
    max-width: 75%;
    background-color: #fff;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
    box-sizing: border-box;
    margin: 36px auto;

    p {
        font-size: 16px;
        line-height: 23px;
    }
}

.c4l-readingcontext {
    padding: 30px 40px 19px 40px;
    font-family: Iowan Old Style, Apple Garamond, Baskerville, Times New Roman,
        Droid Serif, Times, Source Serif Pro, serif, Apple Color Emoji,
        Segoe UI Emoji, Segoe UI Symbol;

    .c4l-readingcontext-caption {
        font-size: 16px;
        margin-top: 24px;
        text-align: right;
        padding-bottom: 14px;
        font-style: italic;
    }

    .c4l-readingcontext-caption span {
        text-transform: uppercase;
        font-size: 16px;
        font-style: normal;
    }

    .c4l-readingcontext-caption span::after {
        content: ", ";
    }
}

.c4lv-readingcontext {
    padding: 30px 40px 32px 40px;
    font-family: sans-serif;

    p:last-of-type {
        margin-bottom: 0;
    }

    .c4l-embedded-caption {
        margin-top: 1rem;
        font-size: 16px;
        font-style: italic;
    }

    &.c4l-comfort-reading-variant {
        font-family: Iowan Old Style, Apple Garamond, Baskerville, Times New Roman,
        Droid Serif, Times, Source Serif Pro, serif, Apple Color Emoji,
        Segoe UI Emoji, Segoe UI Symbol;
    }
}

/* Example */

.c4l-example,
.c4lv-example {
    font-size: 15px;
    line-height: 22px;
    color: inherit;
    background: #fff;
    border-radius: 0;
    margin: 36px auto;
    min-width: 75%;
    max-width: 100%;
    padding: 18px 24px;
    position: relative;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.13);

    h1 {
        font-weight: 700;
        font-size: 11px;
        line-height: 21px;
        letter-spacing: 0.5px;
        color: #3171e3;
        margin: 0 0 24px 0;
        text-transform: uppercase;
        font-family: inherit;
        display: inline-block;
        border-bottom: 2px solid #3171e3;
    }
}

/* Figure */

.c4l-figure,
.c4lv-figure {
    min-width: 200px;
    margin: 48px auto;

    img {
        width: 100%;
        &:not([src]),
        &[src=""] {
            content: url([[pix:tiny_c4l|c4l_figure_placeholder]]);
        }
    }

    figcaption {
        font-size: 13px;
        line-height: 16px;
        color: #686d79;
        margin-top: 7px;
    }

    .c4l-figure-footer::after {
        content: " | ";
        font-weight: normal;
        font-style: normal;
    }

    .c4l-figure-caption {
        font-style: normal;
        font-size: 12px;
    }

    figcaption span strong {
        font-weight: 700;
    }
}

.c4l-figure {
    max-width: 100%;
}

.c4lv-figure {
    max-width: 75%;
}

/* Tag */

.c4l-tag,
.c4lv-tag {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    color: #2167cf;
    background-color: #f1f5fe;
    border-radius: 30px;
    padding: 4px 17px;
    line-height: 20px;
    margin-bottom: 24px;
    text-transform: uppercase;
    letter-spacing: 0.2px;
}

.c4lv-tag.c4l-align-right-variant {
    margin-left: auto;
}

/* Estimated Time */

.c4l-estimatedtime,
.c4lv-estimatedtime {
    font-size: 12px;
    color: #2167cf;
    background-color: #f1f5fe;
    padding: 6px 14px;
    font-weight: 700;
    margin-left: 6px;
    margin-bottom: 24px;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 36px;
    position: relative;
    border-radius: 5px;

    span {
        font-weight: 600;
        font-size: 10px;
    }

    &::before {
        content: url([[pix:tiny_c4l|noun_project_icons/c4l_estimatedtime]]);
        position: absolute;
        left: 12px;
    }
}

.c4lv-estimatedtime.c4l-align-left-variant {
    margin-right: auto;
    margin-left: 0;
}

/* Due date */

.c4l-duedate,
.c4lv-duedate {
    font-size: 12px;
    color: #2167cf;
    background-color: #f1f5fe;
    padding: 6px 14px;
    font-weight: 600;
    margin-left: 6px;
    margin-bottom: 24px;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 36px;
    position: relative;
    border-radius: 5px;

    &::after {
        content: url([[pix:tiny_c4l|noun_project_icons/c4l_duedate]]);
        position: absolute;
        left: 12px;
    }
}

.c4lv-duedate.c4l-align-left-variant {
    margin-right: auto;
    margin-left: 0;
}

/* Procedural Context */

.c4l-proceduralcontext,
.c4lv-proceduralcontext {
    font-style: italic;
    color: #3a56af;
    margin-bottom: 12px;
    padding-top: 24px;
    padding-bottom: 24px;
    font-weight: 400;
}

/* Grading Value */

.c4l-gradingvalue,
.c4lv-gradingvalue {
    font-size: 12px;
    color: #2167cf;
    background-color: #f1f5fe;
    padding: 6px 14px;
    font-weight: 700;
    margin-left: 6px;
    margin-bottom: 24px;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 36px;
    position: relative;
    border-radius: 5px;

    span {
        font-weight: 600;
        font-size: 10px;
    }

    &::after {
        content: url([[pix:tiny_c4l|noun_project_icons/c4l_gradingvalue]]);
        position: absolute;
        left: 12px;
        top: 6px;
    }
}

.c4lv-gradingvalue.c4l-align-left-variant {
    margin-right: auto;
    margin-left: 0;
}

/* Expected Feedback */

.c4l-expectedfeedback,
.c4lv-expectedfeedback {
    min-width: 200px;
    max-width: 90%;
    background-color: #fff;
    padding: 24px 36px 30px 36px;
    margin: 36px auto;
    font-style: italic;
    position: relative;
    border-radius: 8px;
    border: none;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.13);

    &::before {
        content: "";
    }

    &::after {
        content: url([[pix:tiny_c4l|noun_project_icons/c4l_expectedfeedback]]);
        position: absolute;
        bottom: 6px;
        right: -3px;
    }

    p:last-of-type {
        margin-bottom: 0;
    }
}

/* All-purpose Card */

.c4l-allpurposecard,
.c4lv-allpurposecard {
    min-width: 200px;
    max-width: 100%;
    background: #f1f5fe;
    border-radius: 10px;
    padding: 24px 48px 30px 36px;
    margin: 24px auto;
    position: relative;

    p {
        margin-bottom: 6px;
    }

    p:last-of-type {
        margin-bottom: 0;
    }
}

.c4l-spacer + .c4l-allpurposecard {
    margin: 0 auto;
}

/* Inline Tag */

.c4l-inlinetag,
.c4lv-inlinetag {
    font-weight: 900;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.2px;
    display: inline-block;
    color: #fff;
    background: #3171e3;
    border-radius: 7px;
    padding: 2px 7px 1px 7px;
    position: relative;
    top: -2px;
    margin-left: 4px;
    margin-right: 4px;
}

/* Learning Outcomes */

.c4l-learningoutcomes,
.c4lv-learningoutcomes {
    min-width: 200px;
    max-width: 99%;
    background-color: #f2f5fd;
    padding: 24px 48px 30px 36px;
    border: none;
    margin: 36px auto;
    position: relative;
    border-radius: 0;

    p:last-of-type {
        margin-bottom: 0;
    }

    .c4l-learningoutcomes-title {
        position: relative;
        top: -11px;
        left: -39px;
        padding: 6px 14px 5px;
        border-top-right-radius: 3px;
        border-bottom-right-radius: 3px;
        font-weight: 600;
        font-size: 11px;
        letter-spacing: 0.7px;
        color: #fff;
        background-color: #497ae9;
        text-transform: uppercase;
        font-family: inherit;
        display: inline-block;
        margin-top: 0;
        filter: drop-shadow(0 1.55601px 3.11202px rgba(0, 0, 0, 7%));
    }

    .c4l-learningoutcomes-title::before {
        content: url([[pix:tiny_c4l|c4l_learningoutcomes_shadow]]);
        position: absolute;
        width: 3px;
        height: 2px;
        top: 15.5px;
        left: 0.5px;
    }

    .c4l-learningoutcomes-list {
        margin-top: 18px;
        margin-bottom: 18px;
        padding-left: 32px;
    }

    .c4l-learningoutcomes-list > li {
        position: relative;
    }

    .c4l-learningoutcomes-list > li:not(:last-child) {
        margin-bottom: 21px;
    }

    .c4l-learningoutcomes-list li::before {
        background-image: url([[pix:tiny_c4l|c4l_learningoutcomes_list_item]]);
        background-size: 9px 11px;
        display: inline-block;
        width: 9px;
        height: 11px;
        content: "";
        justify-self: center;
        position: absolute;
        left: -32px;
        top: 7px;
    }

    .c4l-learningoutcomes-list li::marker {
        color: transparent;
    }
}

.c4lv-learningoutcomes.c4l-ordered-list-variant {
    .c4l-learningoutcomes-list {
        counter-reset: section;
    }

    .c4l-learningoutcomes-list li::before {
        background-image: none;
        position: absolute;
        left: -32px;
        top: 0;
        counter-increment: section;
        content: counter(section) ". ";
        font-weight: 700;
        color: #497ae9;
    }
}
