[uw-course-teaser] {
  display: grid;
  grid-gap: 5px 7px;
  grid-template-columns: 50px 120px 1fr;
  padding: 10px;
  /* background-color: var(--course-bg-color); */
  transition: background-color .1s ease-out;
  cursor: pointer;

  &:hover {
    background-color: var(--course-bg-color);
  }

  + [uw-course-teaser] {
    margin-top: 10px;
  }
}

/* chevron */
.course-teaser__chevron {
  cursor: pointer;
  padding: 10px;
  grid-column: 1;
  grid-row: 2;
  justify-self: center;
  align-self: center;

  &::before {
    content: '';
    display: block;
    margin-top: -8px;
    border-width: 0 3px 3px 0;
    width: 8px;
    height: 8px;
    border-color: var(--color-fontsec);
    border-style: solid;
    transform: rotate(45deg);
    transition: transform .2s ease-out;
  }
}

/* semester */
.course-teaser__semester {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  font-size: 1.1rem;
  a {
    color: var(--color-fontsec);
  }
}

/* shorthand */
.course-teaser__shorthand {
  grid-column: 2;
  grid-row: 2;
  justify-self: end;
  font-size: 1.2rem;
  font-weight: bold;
}

/* title */
.course-teaser__title {
  grid-column: 3;
  grid-row: 2;
  font-size: 1.2rem;
  align-self: baseline;
}

/* registration */
.course-teaser__registration {
  grid-column: 4;
  grid-row: 2;
  justify-self: end;
  align-self: baseline;
  color: var(--color-fontsec);
}

/* school */
.course-teaser__school-value {
  grid-column: 3;
  grid-row: 1;
  align-self: end;
  a {
    color: var(--color-fontsec);
  }
}

/* description */
.course-teaser__description {
  grid-column: 3;
  color: var(--color-fontsec);
}

/* subtitle */
.course-teaser__lecturer-label,
.course-teaser__duedate-label,
.course-teaser__school-label {
  grid-column: 2;
  justify-self: end;
  color: var(--color-fontsec);
  font-style: italic;
}

/* hidden in closed state */
.course-teaser__description,
.course-teaser__registration {
  display: none;
}

/* registered courses */
.course-teaser__registered {
  .course-teaser__registration {
      display: block;
    }
  }

/* expanded courses */
.course-teaser__expanded {
  max-height: 1000px;

  .course-teaser__chevron::before {
    transform: translateY(7px) rotate(225deg);
  }

  .course-teaser__school-label,
  .course-teaser__school-value,
  .course-teaser__duedate-label,
  .course-teaser__duedate-value,
  .course-teaser__description {
    display: block;
  }
}