@block lesson-module {
  margin-top: var(--spacing);

  & img {
    width: 100%;
    height: auto;
  }
}

@block lesson {
  @element title {
    margin-bottom: var(--spacing);
  }

  @element cta {
    margin-bottom: 0;
  }
}

@block lesson-module-code {
  @element header {}
  @element code-area {
    background: var(--code-bg);
  }

  @element trigger {
    display: inline-block;

    height: 30px;
    padding: 0 1em;
    margin-right: 1em;

    background: var(--code-trigger-bg);

    border-top: 3px solid transparent;

    line-height: 30px;
    font-family: var(--font-medium);
    font-size: 0.875em;
    color: var(--code-trigger-color);

    cursor: pointer;
    user-select: none;

    &:last-child {
      margin-right: 0;
    }

    &:hover {
      color: var(--color-link-content-hover);
    }

    @modifier active {
      background: var(--code-trigger-bg-active);
      color: var(--code-trigger-color-active) !important;
      cursor: default;
      border-color: var(--code-trigger-border-active);
    }
  }

  @element code {
    display: none;

    @modifier active {
      display: block;
    }

    & pre {
      margin: 0;
    }
  }
}