/* ==========================================================================
   Home page
   ========================================================================== */

.courses
  width: column(8, 12)
  margin-right: column(1, 12)
  margin-left: 0
  position: relative

  +respond-to-width(950)
    margin-right: column(0.5, 12)

  +respond-to-width(850)
    padding-left: column(0.5, 8)
    width: calc(100% - 60px - 6.25%)
    
  .info-message
    display: block
    position: absolute
    width: 100%
    background-color: $blue
    border-radius: 0 0 5px 5px
    padding: 10px
    color: white
    font-weight: bold
    transform: translate(0, -40px)
    +animation(showAndHide 5s)
    animation-fill-mode: forwards

  .courses-header
    padding-top: 52px
    +flex(space-between, flex-start)

    .general-notice
      display: block
      border: solid 1px #5E9DFF
      color: #313173
      border-radius: 5px
      background-color: rgba(#5E9DFF, 0.2)
      padding: 20px
      max-width: 70%


  .filters
    list-style: none
    margin-left: 0
    padding-left: 0
    border-bottom: solid 1px #D9DAE2
    margin-bottom: 20px

    +respond-to-width(550)
      +flex(flex-start, center)
      flex-wrap: wrap

    li
      display: inline-block
      font-size: 16px
      font-weight: 600
      line-height: 30px
      margin-bottom: 5px

      +respond-to-width(550)
        padding: 0 5px
        display: block
        border: solid 1.5px #D9DAE2
        border-radius: 5px
        margin-bottom: 10px
        margin-right: 20px

      & + li
        margin-left: 7%

        +respond-to-width(550)
          margin-left: 0

      a
        color: #CECECE
        text-decoration: none
        transition: color 0.3s

      &:hover
        a
          color: $blue

      &.active
        +respond-to-width(550)
          border: solid 1.5px #5E9DFF

        a
          color: $blue
          padding-bottom: 8px
          border-bottom: solid 1.5px $blue

          +respond-to-width(550)
            border-bottom: none
            padding-bottom: 0

  .competence_filter
    +inline-flex(flex-start, center)
    border: 2px solid #CECECE
    border-radius: 15px
    padding: 5px 20px
    text-decoration: none
    color: $semiBlack
    line-height: 1.5rem
    margin-bottom: 20px

    &:hover
      border: 2px solid #bbbbbb
      background-color: #CECECE
      cursor: pointer

    span
      margin-left: 10px
      font-size: 1.5rem

  .courses-list
    +inline-flex(space-between, flex-start)
    flex-wrap: wrap
    width: 100%

    .course
      border: 1px solid #CECECE
      border-radius: 15px
      width: 48%
      min-width: 350px
      background-color: white
      margin-bottom: 30px
      box-shadow: 5px 5px 20px 0 rgba(0,0,0,0.1)
      position: relative
      height: 100%
      +flex(flex-start, stretch)
      flex-direction: column

      +respond-to-width(1280)
        margin: 0 auto 30px auto

      +respond-to-width(425)
        min-width: auto
        margin: 0 auto 30px auto

      &:last-child
        margin-right: 0

        +respond-to-width(1280)
          margin: 0 auto 30px auto


      &:after
        content: ''
        display: block
        position: absolute
        bottom: 0
        height: 46px
        width: 100%
        background-color: #F7F8FA
        border-top: solid 1px rgba(#D9DAE2, 0.5)
        border-radius: 0 0 15px 15px
        z-index: 0

      .course_header
        border-bottom: solid 1px rgba(#D9DAE2, 0.5)
        position: relative
        z-index: 1
        h5
          margin: 0
          padding: 7px 0
          text-transform: uppercase
          background-color: #32c56e
          width: 100%
          color: white
          border-radius: 5px 5px 0 0
          text-align: center
        h4
          color: $semiBlack
          line-height: 1.5rem
          padding: 12px column(1, 12) 10px column(1, 12)
          margin: 0 0 20px 0
          border-radius: 15px 15px 0 0
          background-color: #F7F8FA
          border-bottom: solid 1px rgba(#D9DAE2, 0.5)

        .course_properties
          padding: 0 column(1, 12)
          +flex(space-between, center)
          flex-wrap: wrap
          +respond-to-width(425)
            +flex(center, flex-start)
            flex-direction: column

          p
            margin: 0
            font-weight: 600
            +flex(center, center)
            & + p
              +respond-to-width(425)
                margin-top: 3§0px

            svg
              margin-right: 5px
              > g
                > g, use
                  fill: rgba($semiBlack, 0.5)

        p.users
          +flex(flex-start, center)
          margin-bottom: 26px
          margin-top: 15px
          font-weight: 600
          width: 100%

          svg
            margin-right: 5px
            > g
              > g, use
                fill: rgba($semiBlack, 0.5)
                  
        a
          display: block
          padding: 10px 15px
          margin: 30px 0
          color: white
          font-size: 0.8rem
          font-weight: bold
          line-height: 1.1
          text-transform: uppercase
          border-radius: 3px
          background-color: $grey
          width: auto
          text-align: center
          text-decoration: none
          transition: background-color 0.3s

          &:hover
            background-color: darken($grey, 5%)

      .course_content
        position: relative
        z-index: 1
        +flex(space-between, stretch)
        flex-direction: column
        margin-bottom: 30px

        h5
          color: #517292
          font-size: 0.7rem
          font-weight: 600
          line-height: 0.95rem
          display: block
          width: 100%
          margin-bottom: 0
          margin-top: 0
          padding: 15px column(1, 12)
          border-bottom: solid 1px rgba(#D9DAE2, 0.5)
          background-color: #F7F8FA

        ul
          margin: 0
          padding: 0
          list-style: none
          margin-bottom: auto

          li
            padding: 0 30px
            border-bottom: solid 1px rgba(#D9DAE2, 0.5)
            color: #517292
            font-size: 0.7rem
            line-height: 1.5rem
            +flex(flex-start, baseline)

            &:before
              display: block
              content: ''
              width: 10px
              height: 10px
              flex-shrink: 0
              border-radius: 999px
              margin-right: 10px
              background-color: $lightGray

            &.unknown:before,
            &.missing:before
              background-color: $semiBlack

            &.expired:before
              background-color: #FE3333

            &.almost_expired:before
              background-color: #FFAC34

            &.valid:before
              background-color: #04D682

            &.active
              background-color: #F7F8FA
              border-left: solid 6px #5E9DFF
              padding-left: 24px


            label
              display: block
              width: 100%



      form
        margin: auto auto 30px auto
        position: relative
        z-index: 10
        padding: 0 column(1, 12)
        input[type=submit]
          margin: 0 auto
          min-width: auto
          width: auto
          text-align: center
          background-color: $semiBlack
          border: none
          text-transform: capitalize
          transition: background-color 0.3s

          &:hover
            background-color: darken($blue, 5%)

          &.full
            pointer-events: none
            background-color: $lightGray
            text-decoration: line-through

            &:hover
              background-color: $lightGray

          &.subscribed
            background-color: $blue

            &:hover
              background-color: lighten($semiBlack, 5%)

        .almost_full
          display: block
          width: 100%
          text-align: center
          font-size: 0.7rem
          line-height: 2
          color: $placeholderGray


.hello-user
  font-size: 0.8rem
  line-height: 1.1
  text-decoration: none
  color: $semiBlack
  cursor: pointer
  transition: color 0.2s
  position: relative
  left: -24px
  width: auto
  +inline-flex(space-between, flex-start)

  +respond-to-width(650)
    left: 0



  &:hover
    color: darken($semiBlack, 10%)
    span.person
      opacity: 0.8

    p
      color: $semiBlack


  span.person
    width: 16px
    height: 20px
    margin-right: 7px
    opacity: 0.5

    svg
      height: 15px
      width: 16px
      transition: opacity 0.2s

      > g
        > g, use
          fill: $semiBlack

  h4
    display: block
    font-size: 0.8rem
    font-weight: bold
    line-height: 1.1rem
    margin: 0
    margin-bottom: 5px

  p
    color: $ctaBackground
    font-size: 0.75rem
    font-weight: 600
    transition: color 0.2s
    margin: 0

.sidebar
  &.competences
    h1, h2, h3
      padding: 0 14%
      +respond-to-width-beyond(1800)
        padding: 0 50px

      +respond-to-width(900)
        padding: 0

    ul
      li
        padding: 0
        a
          width: 60%
          padding: 5px 0 5px 5%
          display: block
          color: $semiBlack
          font-size: 0.6rem
          line-height: 1.5rem
          text-decoration: none

          &:hover
            background-color: #F7F8FA
            cursor: pointer

          +respond-to-width-beyond(1800)
            padding-left: 38px

          +respond-to-width(900)
            width: 100%

          label
            font-size: 0.7rem
            line-height: 1.5rem
            font-weight: 600
            +flex(flex-start, baseline)

            &:hover
              cursor: pointer

            &:first-letter
              color: red
              text-transform: uppercase

            &:before
              display: block
              content: ''
              width: 10px
              height: 10px
              flex-shrink: 0
              border-radius: 999px
              margin-right: 10px
              background-color: $lightGray

          span
            color: $placeholderGray
            margin: 0 10px 0 20px

            &:hover
              cursor: pointer

        &.missing
          a
            label:before
              background-color: $semiBlack

        &.expired
          a
            label:before
              background-color: #FE3333

        &.almost_expired
          a
            label:before
              background-color: #FFAC34

        &.valid
          a
            label:before
              background-color: #04D682

        &.active
          a
            background-color: #F7F8FA
            border-left: solid 6px #5E9DFF
            padding-left: calc(5% - 6px)
            position: relative

            +respond-to-width-beyond(1800)
              padding-left: 32px

            &:after
              content: ''
              position: absolute
              top: 0
              left: 100%
              width: 35vw
              height: 100%
              background-color: #F7F8FA
              z-index: 0

        &:last-of-type
          border-bottom: 1px solid rgba($ctaBackground, 0.5)



// Shake animation
+keyframes(showAndHide)
  0%
    transform: translate3d(0, -40px, 0)
  10%
    transform: translate3d(0,0, 0)
  90%
    transform: translate3d(0,0, 0)
  100%
    transform: translate3d(0, -40px, 0)


@supports (display: grid)
  .courses
    .courses-list
      display: grid
      //grid-template-columns: column(2.2, 9.5) column(2.2, 9.5) column(2.2, 9.5) column(2.2, 9.5)
      grid-template-columns: repeat(auto-fill, minmax(350px, 1fr))
      grid-column-gap: 30px
      grid-row-gap: 45px

      +respond-to-width(425)
        display: block

      .course
        width: 100%
        max-width: 450px
        margin: 0 auto

        +respond-to-width(425)
          min-width: auto
          margin: 0 auto 30px auto

        &:last-child
          margin-right: auto