@import "./variables.styl"

ul.cards
  display grid !important
  grid-template-columns auto auto auto
  column-gap 20px
  row-gap 20px

  @media (min-width: 1550px) {
    grid-template-columns repeat(4, 1fr)
  }

  margin-top 40px

  &:focus
    outline none

  > li
    $speed = .5s

    display grid
    grid-template-rows auto 60px

    background white
    border 1px solid #E2E2E5
    border-radius 5px

    text-align center
    transition all $speed ease-out

    &:focus
      outline none

    .centered
      display: flex;
      justify-content: center;
      align-items: center;

    .card-footer
      color #9E9E9E
      background #f3f7fc
      border-top 1px solid #e2e2e5
      transition all $speed ease-out

      > div
        font-weight normal
        font-size 16px
        display none

    &.inactive
      border 1px dashed #e2e2e5

      .card-footer
        color #9E9E9E
        background #f3f7fc
        border-top 1px dashed #e2e2e5

        .inactive
          display block

    &.active
      $color = #67AC5B
      border-color $color

      h3
        color $color

      .card-footer
        color white
        background $color

        .active
          display block

    &.checking
      $color = #9E9E9E
      border-color $color

      .card-footer
        color white
        background $color

        .checking
          display block

          > div
            position relative
            padding-left 30px

            .loader
              position absolute
              left 0
              top 0

    &.errors
      $color = #E15241
      border-color $color

      .card-footer
        color white !important
        background $color

        .errors
          display block