:root {
  --course-bg-color: var(--color-grey-lighter);
  --course-expanded-bg-color: var(--color-grey-light);
}

.course {
  display: grid;
  grid-gap: 5px 7px;
  grid-template-columns: 25px 60px 1fr 40px;
  padding: 10px;
  font-size: 1.4rem;
  background-color: var(--course-bg-color);
  transition: background-color .1s ease-out;
  cursor: pointer;

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

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

// chevron
.course-chevron {
  cursor: pointer;
  padding: 10px;
  grid-column: 4;
  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-semester {
  grid-column: 2;
  font-size: 1.8rem;
  align-self: flex-end;
  color: var(--color-fontsec);
  color: white;
}

// shorthand
.course-shorthand {
  grid-column: 1/3;
  font-size: 1.8rem;
  justify-self: end;
  font-weight: bold;
}

// title
.course-title {
  grid-column: 3;
  grid-row: 1;
  font-size: 1.6rem;
  align-self: baseline;
}

// registration
.course-registration {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  align-self: baseline;
  font-size: 16px;
  color: var(--color-fontsec);
}

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

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

// subtitle
.course-lecturer-label,
.course-duedate-label,
.course-school-label {
  grid-column: 1/3;
  justify-self: end;
  color: var(--color-fontsec);
  font-style: italic;
}

// hidden in closed state
.course-school-label,
.course-school-value,
.course-duedate-label,
.course-duedate-value,
.course-description,
.course-registration {
  display: none;
}

// registered courses
.course--registered {

  .course-registration {
      display: block;
    }
  }

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

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

  .course-school-label,
  .course-school-value,
  .course-duedate-label,
  .course-duedate-value,
  .course-description {
    display: block;
  }
}