/*------------------------------------*\
    #Examples

    Styles for the blocks produced by _includes/example.html.
\*------------------------------------*/

.example {
    border-left: 0.25rem solid #005a9c;
    margin: 1.5rem 0;
    max-width: 47rem; /* matches .note in the W3C core stylesheet */
    padding: 0.125rem 0 0.125rem 1.125rem;
}

.example > div:first-child {
    color: #005a9c;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    margin-bottom: 0.375rem;
    text-transform: uppercase;
}

.example > :last-child {
    margin-bottom: 0;
}

/*------------------------------------*\
    #Use / avoid pairs
\*------------------------------------*/

.example__choices {
    list-style: none;
    margin: 0;
    padding: 0;
}

.example__choices > li {
    align-items: baseline;
    display: flex;
    gap: 0.625rem;
}

.example__choices > li + li {
    margin-top: 0.375rem;
}

.example__icon {
    flex: 0 0 auto;
    font-weight: 700;
    text-align: center;
    width: 1rem;
}

.example__use .example__icon,
.example__use .example__text b {
    color: #046704;
}

.example__avoid .example__icon,
.example__avoid .example__text b {
    color: #a82615;
}

.example__avoid .example__text {
    color: #545454;
}

/*------------------------------------*\
    #Lists inside examples
\*------------------------------------*/

/* The site's default list indent is wide for a block this narrow, so bullets
   are pulled back towards the rule. */
.example ul:not(.example__choices),
.example ol {
    padding-left: 1.375rem;
}

.example ul:not(.example__choices) > li + li,
.example ol > li + li {
    margin-top: 0.25rem;
}