/* Base lesson block styling */
.lesson-block {
    border-radius: var(--border-radius-medium);
    margin-bottom: var(--margin-large);
    padding: var(--padding-large);
    padding-bottom: var(--padding-extra-large);
}
.lesson-block__icon {
    display: flex;
    align-items: center;
    width: 3.125rem;
    height: 3.125rem;
    margin-right: var(--margin-extra-small);
    border: 1px solid var(--color-body);
    border-radius: 50%;
    font-size: var(--font-size-small);
    text-align: center;
}
.lesson-block__title {
    margin: 0;
    display: inline-block;
}

/* Base exercise styling */
.lesson-exercise .lesson-question {
    margin-bottom: var(--margin-medium);
}
.lesson-exercise .lesson-question:last-child {
    margin-bottom: 0;
}
.lesson-exercise .lesson-question .lesson-question__text-container {
    position: relative;
    margin: var(--margin-extra-small);
}
.lesson-exercise .lesson-question .lesson-question__text-answer {
    min-height: 6rem;
    border: none;
    border-radius: var(--border-radius-medium);
}
.lesson-exercise .lesson-question .lesson-question__grade-buttons {
    position: absolute;
    right: 0.75rem;
    bottom: 0.75rem;
}
.lesson-exercise .lesson-question .lesson-question__grade-button {
    border: 1px solid var(--color-body);
}

/* Base instruction styling */
.lesson-instruction h5 {
    margin: 0;
    margin-top: var(--margin-large);
    padding: var(--padding-small) var(--padding-large);
    border-radius: var(--border-radius-small);
}
.lesson-instruction .lesson-instruction__requirements {
    margin-top: var(--margin-tiny);
    list-style: none;
    counter-reset: counter;
}
.lesson-instruction .lesson-instruction__requirement {
    margin-bottom: var(--margin-tiny);
    padding: var(--padding-small) var(--padding-large);
    border-radius: var(--border-radius-small);
    counter-increment: counter;
}
.lesson-instruction .lesson-instruction__requirement::before {
    content: counter(counter);
    display: inline-block;
    align-content: center;
    width: 1.875rem;
    height: 1.875rem;
    margin-right: var(--margin-extra-small);
    border-radius: 50%;
    font-weight: bold;
    text-align: center;
}
.lesson-instruction .lesson-instruction__requirement::after {
    margin-bottom: 0;
}
.lesson-instruction .lesson-instruction__exercise {
    margin-top: var(--margin-medium);
}
.lesson-instruction .lesson-instruction__step-content {
    margin-bottom: var(--margin-extra-small);
}
.lesson-instruction .lesson-instruction__check-list {
    display: flex;
    flex-wrap: wrap;
    margin-top: var(--gap-tiny);
    gap: var(--gap-tiny);
}
.lesson-instruction .lesson-instruction__check-list dt {
    width: calc(30% - calc(var(--gap-tiny) / 2));
    padding: var(--padding-small) var(--padding-large);
    border-top-left-radius: var(--border-radius-small);
    border-bottom-left-radius: var(--border-radius-small);
}
.lesson-instruction .lesson-instruction__check-list dd {
    width: calc(70% - calc(var(--gap-tiny) / 2));
    margin: 0;
    padding: var(--padding-small);
    border-top-right-radius: var(--border-radius-small);
    border-bottom-right-radius: var(--border-radius-small);
}

/* Base definition styling */
.lesson-definitions .lesson-definitions__title {
    margin: 0;
    margin-top: var(--margin-large);
    padding: var(--padding-small) var(--padding-large);
    border-radius: var(--border-radius-small);
}
.lesson-definitions .lesson-definitions__list {
    display: flex;
    flex-wrap: wrap;
    margin-top: var(--gap-tiny);
    gap: var(--gap-tiny);
}
.lesson-definitions .lesson-definitions__list dt {
    width: calc(30% - calc(var(--gap-tiny) / 2));
    padding: var(--padding-small) var(--padding-large);
    border-top-left-radius: var(--border-radius-small);
    border-bottom-left-radius: var(--border-radius-small);
}
.lesson-definitions .lesson-definitions__list dd {
    width: calc(70% - calc(var(--gap-tiny) / 2));
    margin: 0;
    padding: var(--padding-small);
    border-top-right-radius: var(--border-radius-small);
    border-bottom-right-radius: var(--border-radius-small);
}

/* Base learning objectives styling */
.lesson-learning-objectives {
    border-radius: var(--border-radius-medium);
    padding: var(--padding-large);
    padding-bottom: var(--padding-xxl);
}
div .lesson-learning-objectives ul.lesson-learning-objectives__list {
    margin-bottom: 0;
    list-style: none;
}

/* Base list styling */
div.lesson-list .lesson-list__title {
    margin-bottom: var(--margin-tiny);
    padding: var(--padding-small) var(--padding-large);
    border-radius: var(--border-radius-small);
}
div.lesson-list ul.lesson-list__items,
.lesson-content .wp-block-list {
    display: flex;
    flex-direction: column;
    gap: var(--gap-extra-small);
    margin: 0;
    list-style: none;
}
div.lesson-list li.lesson-list__item {
    padding: var(--padding-small) var(--padding-large);
    border-radius: var(--border-radius-small);
    display: flex;
}
div.lesson-list i.lesson-list__icon {
    width: 1.75rem;
    height: 1.75rem;
    align-content: center;
    margin-right: var(--margin-extra-small);
    border-radius: 50%;
    font-size: var(--font-size-paragraph);
    text-align: center;
    aspect-ratio: 1/1;
}
div.lesson-list span.lesson-list__text {
    font-size: var(--font-size-paragraph-small);
}

/* Base quote styling */
blockquote.wp-block-quote {
    border: none;
    padding: var(--padding-large);
    padding-left: var(--padding-xxl);
    padding-right: 5.5rem;
    border-radius: var(--border-radius-medium);
    background: var(--color-light-tint-50);
    color: var(--color-body);
    position: relative;
}
blockquote h4 {
    font-style: normal;
}
div.lesson-content blockquote.wp-block-quote p {
    font-size: var(--font-size-paragraph);
}
blockquote::before {
    content: '';
    position: absolute;
    left: var(--padding-large);
    top: var(--padding-large);
    display: block;
    width: 0.5rem;
    height: calc(100% - 2 * var(--padding-large));
    background: var(--color-light-tint-600);
}
blockquote.wp-block-quote::after {
    content: '';
    position: absolute;
    top: var(--padding-large);
    right: var(--padding-large);
    width: 3.125rem;
    height: 3.125rem;
    background-repeat: no-repeat;
    background-size: contain;
}

/* Base portfolio reflection styling */
.lesson-portfolio {
    background: var(--color-danger-tint-200);
    padding-bottom: var(--padding-large);
}
.lesson-portfolio .lesson-block__icon {
    border-color: var(--color-body);
    background: var(--color-danger-tint-500);
    color: var(--color-light-tint-10);
}
.lesson-portfolio__intro {
    margin-bottom: var(--margin-large);
}
.lesson-portfolio h4 {
    margin: 0;
    display: inline-block;
}
.lesson-portfolio__buttons {
    margin-top: var(--margin-extra-large);
    text-align: right;
}
.lesson-portfolio:not(.is-submitted) .lesson-portfolio__button.submitted,
.lesson-portfolio.is-submitted .lesson-portfolio__button:not(.submitted) {
    display: none;
}
.lesson-portfolio__button,
.lesson-portfolio__button:hover {
    border: 1px solid var(--color-body);
    background: var(--color-danger-tint-500);
    color: var(--color-light-tint-10);
}
.lesson-portfolio__button.submitted {
    background: var(--color-success-tint-500);
}
.lesson-instruction .lesson-content h4 {
    width: calc(100% - 4.5rem);
}