[uw-course-teaser]
  --course-border-color: var(--color-grey)
  --course-padding-hori: 10px
  --course-padding-vert: 12px
  display: grid
  position: relative
  grid-gap: 5px 7px
  grid-template-columns: 130px 30px 1fr 60px
  grid-template-areas: 'shrthnd    .          title   chevron' 'shrthnd    smstr      school  chevron' '.          .          rgstrd  .      ' 'tutor      tutor      name    .      ' 'duedate    duedate    date    .      ' 'dscrptn    dscrptn    dscrptn dscrptn'
  padding: var(--course-padding-vert) var(--course-padding-hori)
  transition: background-color .1s ease-out
  cursor: pointer

  &:hover
    background-color: var(--course-bg-color)

  + [uw-course-teaser]
    border-top: 1px solid var(--course-border-color)

  @media (max-width: 768px)
    grid-template-columns: 140px 1fr 30px
    grid-template-areas: 'shrthnd title   chevron' 'shrthnd title   .      ' 'smstr   school  school ' '.       rgstrd  rgstrd ' 'tutor   name    name   ' 'duedate date    date   ' 'dscrptn dscrptn dscrptn'

  @media (max-width: 426px)
    grid-template-columns: 1fr
    grid-template-areas: 'shrthnd' 'title' 'smstr' 'school' 'rgstrd' 'tutor' 'name' 'duedate' 'date' 'dscrptnlbl' 'dscrptn' 'chevron'

.course-teaser__not-expandable
  cursor: initial

// chevron
.course-teaser__chevron
  position: relative
  padding: 10px
  grid-area: chevron
  justify-self: center
  align-self: center
  width: 100%
  height: 100%
  cursor: pointer

  &::before
    content: ''
    position: absolute
    display: block
    margin-top: -7.35px
    margin-left: -7.35px

    // visually centered
    border-width: 0 3px 3px 0
    width: 8px
    height: 8px
    top: 50%
    left: 50%
    border-color: var(--color-fontsec)
    border-style: solid
    transform: rotate(135deg)
    transform-origin: 7.25px 7.25px

    // rotate about visual center
    transition: all .2s ease-out

  &:hover::before
    transform: scale(1.4) rotate(45deg)

  @media (max-width: 768px)
    justify-self: end
    width: auto

    &::before
      position: initial

  @media (max-width: 426px)
    &::before
      transform: rotate(45deg)
      margin-left: -7.35px

    &:hover::before
      transform: scale(1.4) rotate(45deg)

// semester
.course-teaser__semester
  grid-area: smstr
  justify-self: end

  a
    color: var(--color-fontsec)

  @media (max-width: 768px)
    justify-self: initial

// shorthand
.course-teaser__shorthand
  position: relative
  grid-area: shrthnd
  font-size: 2rem
  line-height: 1.25
  min-height: calc(2rem * 1.25)

  > a
    position: absolute
    height: 100%
    width: 100%
    overflow: hidden
    text-overflow: ellipsis
    white-space: nowrap
    word-break: break-any
    text-decoration: none !important

    // sry.
    font-weight: 600
    color: var(--color-grey-medium)

  // @media (max-width: 768px) {
       position: initial;
     }

// title
.course-teaser__title
  grid-area: title
  font-size: 1.2rem
  align-self: baseline

// registration
.course-teaser__registration
  grid-area: rgstrd
  color: var(--color-fontsec)
  font-weight: bold

// school
.course-teaser__school
  grid-area: school

  a
    color: var(--color-fontsec)

// duedate
.course-teaser__duedate
  grid-area: date

// lecturer
.course-teaser__lecturer
  grid-area: name

// description
.course-teaser__description
  grid-area: dscrptn
  max-height: 75vh
  overflow: auto

// show description only as dots (overflow text-overflow) and only show when expanded. No "hidden fiddling"

// labels
.course-teaser__lecturer-label
  grid-area: tutor

.course-teaser__duedate-label
  grid-area: duedate

.course-teaser__description-label
  grid-area: dscrptnlbl

.course-teaser__lecturer-label,
.course-teaser__description-label,
.course-teaser__duedate-label
  justify-self: end
  color: var(--color-fontsec)
  font-style: italic

  @media (max-width: 768px)
    justify-self: initial

  @media (max-width: 426px)
    margin-top: 7px
    font-weight: bold
    font-style: initial

// hidden in closed state
.course-teaser__description,
.course-teaser__description-label
  display: none

// expanded courses
.course-teaser__expanded
  cursor: initial

  .course-teaser__chevron
    &::before
      transform: rotate(45deg)

    &:hover::before
      transform: scale(1.4) rotate(135deg)

    @media (max-width: 426px)
      &::before
        transform: rotate(225deg)

      &:hover::before
        transform: scale(1.4) rotate(225deg)

  .course-teaser__school-label,
  .course-teaser__school,
  .course-teaser__duedate-label,
  .course-teaser__duedate,
  .course-teaser__description
    display: block

  @media (max-width: 426px)
    .course-teaser__description-label
      display: block

// course teaser: header styling
.course-teaser-header
  padding-top: 10px
  padding-bottom: 20px
  line-height: 1.4
  max-width: 85vw

  .course-header
    float: left
    background-color: var(--color-dark)
    position: relative
    font-size: 16px
    color: #fff
    padding-top: 10px
    padding-bottom: 10px
    padding-left: 10px
    padding-right: 35px
    margin-bottom: 10px
    font-weight: bold
    text-align: left
    border-radius: 20px 20px 20px 20px / 50% 50% 50% 50%
    margin-right: 30px

    .course-header-link
      color: white
      font-weight: bold
      text-decoration: none

      &:hover
        color: inherit

.course-teaser-header:after
  content: ""
  display: table
  clear: both