@import "../../node_modules/tracim_frontend_lib/src/css/Variable.styl"

flexwrap()
  display flex
  flex-wrap wrap

.dashboard
  width 100%
  &__header
    flexwrap()
    align-items center
    justify-content space-between
    &__title
      width auto
      &__text
        margin 0
    &__advancedmode
      cursor pointer
  &__workspace-wrapper
    flexwrap()
  &__workspace
    margin-right 20px
    width calc(65% - 20px) //20px => margin-right
    &__title
      margin-bottom 20px
      font-size 40px
      font-weight 500
      color darkthirdColor
    &__detail
      margin-bottom 20px
      font-size 18px
  &__calltoaction
    flexwrap()
    margin 100px 0
    &__button
      &:active
        box-shadow inset 0px 0px 5px 2px #656565
      &__text
        color white
        &__icon
          font-size 30px
        &__title
          font-size 18px
  &__workspaceInfo
    flexwrap()

/**** MEDIAQUERIES *****/

/**** MEDIA 576px & 1199px ****/

// Regroup the common rules

@media (min-width min-sm) and (max-width: max-lg)

  .dashboard
    &__workspace
      width auto
    &__userstatut
      width auto
    &__calltoaction
      justify-content center


/**** MEDIAQUERIES ****/

/**** MEDIA 992px & 1199px ****/

@media (min-width: min-lg) and (max-width: max-lg)

  .dashboard
    &__workspace
      width 100%

/**** MEDIA 768px & 991px ****/

@media (min-width: min-md) and (max-width: max-md)

  .dashboard
    &__workspace
      width 100%

/**** MEDIA 576px & 767px ****/

@media (min-width: min-sm) and (max-width: max-sm)

  .dashboard
    &__workspace
      width 100%

/**** MEDIA 575px ****/

@media (max-width: max-xs)

  .dashboard
    &__header
      &__advancedmode
        margin 25px 15px
    &__workspace
      width 100%
    &__calltoaction
      flex-direction column
      align-items center
      justify-content center
      &__button
        margin 20px 0