/*
 * Lesson (legacy)
 * Old list-style lesson items — used in style guide and feedbacks/new.
 * New components live in thumbnail.css.
 */

@layer components {

  /* Lesson list item */
  .lesson-item {
    display: flex;
    align-items: center;
    gap: var(--block-space);
    padding: var(--block-space);
    border-bottom: var(--border-subtle);
  }

  .lesson-item:last-child {
    border-bottom: none;
  }

  @media (any-hover: hover) {
    .lesson-item:hover {
      background-color: var(--color-gray-lightest);
    }
  }

  .lesson-item--completed {
    opacity: 0.7;
  }

  .lesson-item__checkbox {
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: var(--icon-xl);
    block-size: var(--icon-xl);
    border-radius: var(--radius-full);
    border: var(--border-standard);
    flex-shrink: 0;
    transition: border-color 150ms ease;
  }

  .lesson-item__checkbox--completed {
    background-color: var(--color-green);
    border-color: var(--color-green);
  }

  .lesson-item__content {
    flex: 1;
    min-width: 0;
  }

  .lesson-item__title {
    color: var(--color-gray-darker);
  }

  .lesson-item__meta {
    font-size: var(--text-normal);
    color: var(--color-gray-dark);
  }

  .lesson-item--completed .lesson-item__title {
    text-decoration: line-through;
  }

  .lesson-item__play {
    flex-shrink: 0;
    color: var(--color-gray);
    transition: color 150ms ease;
  }

  @media (any-hover: hover) {
    .lesson-item:hover .lesson-item__play {
      color: var(--color-gray-dark);
    }
  }

  /* Module header */
  .module-header {
    padding: var(--block-space) var(--block-space-double);
    background-color: var(--color-gray-lightest);
    border-bottom: var(--border-subtle);
  }

  /* Course banner (dark header) */
  .course-banner {
    padding: var(--block-space-double) 0;
    background-color: var(--color-gray-darker);
    border-bottom: var(--border-subtle);
  }

}