@import ../../../styles/helpers

.group
    a
        text-decoration: none

.head
    position: relative
    display: inline-flex
    align-items: center
    padding: 16px 8px
    +button-2
    color: $neutrals8
    transition: color .2s
    user-select: none
    cursor: pointer
    // -webkit-tap-highlight-color: rgba(0,0,0,0)
    +d
        padding: 0 0 0 0
        margin: 0 32px 0 0
    +t
        font-size: 32px
    +m
        display: flex
        padding: 18px 42px 18px 32px 
        font-size: 24px
    &:hover,
    &.open,
    &.active
        color: $purple-light
        +m
            box-shadow: inset 2px 0 0 0 $red
        svg
            fill: $purple-light
    &.open
        svg
            transform: rotate(180deg)
    svg
        margin-left: 12px
        fill: $neutrals8
        transition: all .2s
        +d
            width: 12px
            height: 12px
        +m
            width: 10px
            height: 10px
            margin-left: auto

.body
    position: absolute
    width: 0px
    overflow: visible
    visibility: hidden
    opacity: 0
    transform: translate(0%,10px) scale(.9)
    transform-origin: 0% -50px
    will-change: transform
    animation: showBody .4s forwards
    +m
        position: static
        width: auto
        // margin-right: -416px
        // padding-top: 48px
        transform: translate(0,0) scale(1)
        visibility: visible
        opacity: 1
        animation: none
        margin-right: 0
        padding-top: 0

@keyframes showBody
  0%
    visibility: hidden
    opacity: 0
    transform: translate(0%,10px) scale(.9)
  100%
    visibility: visible
    opacity: 1
    transform: translate(0%,0) scale(1)

.compact
    &.body
        .inner
            width: 146px
            border-radius: 12px
        .col
            padding: 22px
        .box
            font-weight: 500
            padding: 10px 12px 10px 12px

.inner
    width: 256px
    margin: 0 auto
    transform: translateX(-50%)
    background: $neutrals3
    border-radius: 24px
    box-shadow: 0px 64px 64px -48px rgba(15, 15, 15, 0.1)
    +d
        margin-top: 1em
    +m
        max-width: 100%
        margin: 0
        padding: 0 32px
        box-shadow: none

.row
    display: flex
    +m
        display: block

.col
    padding: 40px
    +m
        padding: 0
    &:first-child
        display: flex
        flex-direction: column
        flex: 0 0 100%
        +m
            flex: 0 0 280px
    &:nth-child(2)
        flex-grow: 1
        border-left: 1px solid $neutrals6
        border-color: $neutrals3
        +m
            display: none

.direction
    margin: -16px -16px 44px
    padding: 14px
    border-radius: 8px
    transition: background .2s
    +m
        display: none
    &:hover
        background: $neutrals1b

.info
    +body-2
    color: $neutrals8

.preview
    margin-top: 24px
    +t
        display: none
    img
        max-width: 80px
    
.menu
    margin: auto -16px 0

.box
    +compact-header-button
    display: flex
    align-items: center
    width: 100%
    padding: 16px 8px 16px 16px
    border-radius: 8px
    font-weight: 600
    transition: all .2s
    color: $neutrals8
    background: transparent
    +m
        color: $neutrals4
    &:hover
        background: $neutrals1b
    &.active
        color: $neutrals8
    &:first-child
        margin-top: -16px
    &:not(:last-child)
        margin-bottom: 8px
        +m
            margin-bottom: 0
    &:last-child
        margin-bottom: -16px

.icon
    display: flex
    justify-content: center
    align-items: center
    width: 32px
    height: 32px
    margin-right: 12px
    border-radius: 50%
    font-size: 19px
    
.line
    display: flex
    margin: 0 -20px

.cell
    flex: 0 0 calc(50% - 40px)
    width: calc(50% - 40px)
    margin: 0 20px
    +d
        flex: 0 0 100%
        width: 100%
    &:first-child
        +d
            display: none

.card,
.item
    color: $neutrals8
    &:hover
        .photo
            box-shadow: 0 0 0 3px $red
            img
                transform: scale(1.05)

.card
    display: block
    .photo
        position: relative
        margin-bottom: 24px
        border-radius: 16px
        .category
            position: absolute
            top: 8px
            left: 8px
    .user
        margin-right: auto
    .title
        +body-2
    
.photo
    overflow: hidden
    transition: box-shadow .2s
    img
        width: 100%
        transition: transform 1.4s

.top
    display: flex
    align-items: flex-start
    
.level
    flex-shrink: 0
    margin-left: 10px

.user
    display: flex

.avatar
    flex-shrink: 0
    width: 40px
    height: 40px
    margin: 5px 16px 0 0
    border-radius: 50%
    overflow: hidden
    background: $neutrals3
    img
        width: 100%
        height: 100%
    
.title
    margin-bottom: 2px
    font-weight: 600

.trainer
    +caption-1
    color: $neutrals4

.content
    margin-top: 12px
    +caption-1
    color: $neutrals4

.item
    display: flex
    align-items: center
    .photo
        flex-shrink: 0
        width: 140px
        margin-right: 24px
        border-radius: 8px
        +d
            width: 110px
    .title
        font-weight: 600
    .category
        margin-bottom: 12px
        +d
            margin-bottom: 8px
    &:not(:last-child)
        margin-bottom: 32px
        +d
            margin-bottom: 24px

.foot
    padding: 40px
    border-top: 1px solid $neutrals6
    border-color: $neutrals3
    +d
        padding: 32px
    +m
        display: none

.stage
    margin-bottom: 32px
    +body-2

.list
    display: flex
    margin: 0 -16px
    .user
        align-items: center
        flex-grow: 1
        margin: 0 16px
        &:nth-child(n+4)
            +d
                display: none
        &:nth-child(n+3)
            +t
                display: none
    .avatar
        width: 56px
        height: 56px