@import "../App/App"

.User
  &__Activate
    background-color: var(--sec-bg-color)
    border-radius: $borderRadius
    padding: .5rem


  &__Info
    background-color: var(--sec-bg-color)
    border-radius: $borderRadius
    display: flex
    align-items: flex-end
    flex-direction: column

    @media (max-width: 250px)
      flex-direction: column

    &_Cover
      height: 20rem
      width: 100%
      background-position: center
      background-size: cover
      background-repeat: no-repeat

      @media (max-width: 500px)
        height: 10rem !important

    &_Main
      display: flex
      align-items: flex-end
      background-color: var(--sec-bg-color)
      width: 100%
      padding: 0.5rem
      border-radius: 0 0 $borderRadius $borderRadius
      box-sizing: border-box

    &_Nick
      font-size: 1.5rem
      font-weight: 600

    &_Group
      border: 1px solid #eeeeee
      border-radius: 4px
      padding: .1rem
      text-align: center
      font-size: 1rem
      font-weight: 300

    &_Avatar
      background-size: cover
      background-position: center
      width: 96px
      height: 96px
      border-radius: 50%
      margin-right: .5rem

  &__Statistic
    background-color: var(--sec-bg-color)
    border-radius: $borderRadius
    padding: $primaryPadding
    margin-top: 1rem
    display: flex
    flex-direction: row
    flex-wrap: wrap

    &_Item
      width: calc(100% / 5 - 1rem)
      @media (max-width: 1060px)
        width: calc(100% / 4 - 1rem)
      @media (max-width: 900px)
        width: calc(100% / 3 - 1rem)
      @media (max-width: 680px)
        width: calc(100% / 2 - 1rem)
      @media (max-width: 460px)
        width: calc(100% - 1rem)


      padding: .5rem 0
      margin: 0 .5rem

      .User__Statistic_Title
        font-weight: 500
        margin-bottom: .2rem

      .User__Statistic_Blocks
        display: flex
        flex-direction: column
        color: white

        @media (max-width: 300px)
          width: 100%

        .User__Statistic_Block
          display: flex
          padding: .5rem
          height: 1.2rem !important

          &:first-child
            border-radius: $borderRadius $borderRadius 0 0

          &:last-child
            border-radius: 0 0 $borderRadius $borderRadius

        .Planned
          background: #339999

        .Completed
          background: #339933

        .Dropped
          background: #993333

        .InProgress
          background: #993399

        .Deferred
          background: #333333

        .Planned:after, .Completed:after, .Dropped:after, .InProgress:after, .Deferred:after
          content: attr(data-count)
          margin-left: 1rem
          height: 1rem

  &__List
    background-color: var(--sec-bg-color)
    border-radius: $borderRadius
    padding: $primaryPadding
    margin-top: 1rem

    &_Title
      font-size: 1.2rem
      margin: .3rem 0
      display: flex
      justify-content: space-between

    &_Items
      padding: $blockPadding * 3
      background-color: var(--block-sec-color)
      border-radius: $borderRadius
      display: flex
      flex-wrap: wrap
      justify-content: center