/* ==========================================================================
   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)

    .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

    .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-radius: 0 0 15px 15px
        z-index: 0

      .course_header
        padding: 0 column(1, 8)
        border-bottom: solid 1px #D9DAE2
        position: relative
        z-index: 1
        h5
          position: absolute
          top: 0
          margin: 0
          padding: 7px 0
          text-transform: uppercase
          background-color: #32c56e
          width: 100%
          left: 0
          color: white
          border-radius: 5px 5px 0 0
          text-align: center
        h4
          color: $semiBlack
          line-height: 1.5rem
          margin-bottom: 10px
          margin-top: 1.8em

        .course_properties
          +flex(flex-start, center)
          +respond-to-width(425)
            +flex(center, flex-start)
            flex-direction: column

          p
            margin: 0
            font-weight: 600
            +flex(center, center)
            & + p
              margin-left: 30px

              +respond-to-width(425)
                margin-left: 0
                margin-top: 10px

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

        p.users
          +flex(flex-start, center)
          margin-bottom: 26px
          font-weight: 600

          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
        height: 100%
        +flex(space-between, stretch)
        flex-direction: column
        h5, form
          padding: 0 50px

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

        ul
          margin: 0
          padding: 0
          list-style: none
          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: 30px auto
          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

.sidebar
  &.competences
    position: absolute
    right: 0
    height: 100%
    z-index: 10

    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