:root {
  --color-grey-light: #efefef;
  --color-grey-lighter: #f5f5f5;
  --color-fontsec: #5b5861;
  --course-bg-color: var(--color-grey-lighter);
  --course-expanded-bg-color: var(--color-grey-light);
}

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

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

  + .course-teaser {
    margin-top: 10px;
  }
}

/* chevron */
.course-teaser__chevron {
  cursor: pointer;
  padding: 10px;
  grid-column: 3;
  grid-row: 1;
  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: 1;
  font-size: 1.2rem;
  align-self: flex-end;
  color: var(--color-fontsec);
  color: white;
}

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

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

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

/* school */
.course-teaser__school-label {
  grid-column: 2;
  font-size: 0.9rem;
  align-self: flex-end;
  color: var(--color-fontsec);
}

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

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

/* hidden in closed state */
.course-teaser__school-label,
.course-teaser__school-value,
.course-teaser__duedate-value,
.course-teaser__description-label,
.course-teaser__description-value,
.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-value,
  .course-teaser__description-label,
  .course-teaser__description-value {
    display: block;
  }
}