@use "../ui/vars" as *;

.curriculum-content-container.curriculum-about {
  .curriculum-content {
    // Workaround so last toc item works.
    margin-bottom: 5rem;

    h2#motivation + div {
      li {
        list-style-image: var(--curriculum-bullet);
      }
    }

    h3 {
      align-items: center;
      display: flex;
      gap: 1.25rem;

      &::before {
        display: inline-block;
        height: 2.5rem;
        width: 2.5rem;
      }

      &#students::before {
        content: var(--curriculum-about-students);
      }

      &#educators::before {
        content: var(--curriculum-about-educators);
      }

      &#whats_covered::before {
        content: var(--curriculum-about-covered);
      }

      &#level_of_detail::before {
        content: var(--curriculum-about-detail);
      }

      &#what_is_not_covered::before {
        content: var(--curriculum-about-not);
      }
    }

    h3#educators + .section-content blockquote:not(.curriculum-notes) {
      align-items: center;
      // PDF download banner

      background-color: var(--curriculum-bg-color-note);
      border: 0;
      border-radius: var(--elem-radius);
      display: flex;
      flex-direction: column;
      gap: 1rem;
      margin: 1rem;
      padding: 1rem;

      > p:last-child a:only-child {
        --button-bg: var(--button-secondary-default);
        --button-border-color: var(--border-primary);
        --button-color: var(--text-secondary);
        --button-bg-hover: var(--button-secondary-hover);
        --button-bg-active: var(--button-secondary-active);

        --button-font: var(--type-emphasis-m);
        --button-padding: 0.43rem 1rem;
        --button-radius: 0.25rem;

        background-color: var(--button-bg);
        border: 1px solid var(--button-border-color);
        border-radius: var(--button-radius);
        color: var(--button-color);
        display: inline-block;
        font: var(--button-font);
        letter-spacing: normal;
        padding: var(--button-padding);
        text-align: center;
        text-decoration: none;

        &.external:after {
          display: none;
        }

        &:hover {
          --button-border-color: var(--button-bg-hover);
          --button-bg: var(--button-bg-hover);
        }

        &:active {
          --button-bg: var(--button-bg-active);
        }
      }
    }
  }
}