.course {
  display: flex;
  flex-direction: column;
  padding: 100px 0 0 0;
  height: 100vh;

  .action-bar {
    margin-bottom: 20px;
    text-align: right;
    line-height: 1;
    color: var(--color-text-2);
    .xicon {
      display: initial;
    }
    .icon {
      > svg {
        width: 20px;
        height: 20px;
      }
      color: var(--color-text-4);
      &.active {
        color: var(--color-text-2);
      }
    }
  }

  .thumbnail-timeline {
    flex: 1;
    position: relative;
    .thumbnail-container {
      position: absolute;
      top: 0;
      left: 0;
      right: 100px;
      bottom: 0;
      overflow: hidden;
      > article {
        overflow-y: scroll;
        height: 100%;
        padding-right: 50px;
        margin-right: -50px;
        > section {
          padding-bottom: 40px;
          .time {
            padding-bottom: 10px;
            color: var(--color-text-2);
          }
          .statistic {
            padding-bottom: 10px;
            color: var(--color-text-3);
          }
          .grid {
            display: grid;
            grid-column-gap: 10px;
            grid-row-gap: 10px;

            .course-card {
              cursor: pointer;
              border-radius: 3px;
              .cover {
                height: 120px;
              }
              .mask {
                p {
                  font-size: 13px;
                }
              }
            }

            &.table {
              grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
              .course-card .mask {
                p {
                  margin: 0;
                  position: absolute;
                  bottom: 10px;
                  left: 10px;
                  right: 10px;
                  color: #fff;
                  font-size: 14px;
                }
                > div {
                  display: none;
                }
              }
            }
            &.tab {
              grid-template-columns: 1fr;
              .course-card {
                border-radius: 3px;
                .cover {
                  height: 330px;
                }
                .mask {
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  flex-direction: column;
                  color: #fff;
                  text-align: center;
                  p {
                    margin: 0;
                    background: rgba(0, 0, 0, 0.7);
                    font-size: 22px;
                    padding: 10px;
                    line-height: 1.5;
                    border-radius: 6px 6px 0 0;
                    width: 60%;
                  }
                  > div {
                    width: 60%;
                    background: rgba(0, 0, 0, 0.3);
                    padding: 6px;
                    line-height: 1.4;
                    border-radius: 0 0 6px 6px;
                    word-wrap: break-word;
                  }
                }
              }
            }
          }
        }
      }
    }
    .timeline-container {
      position: absolute;
      right: 0;
      top: 0;
      bottom: 0;
    }
  }
}