@import ../../styles/helpers

.wrapper
    // position: relative
    border-radius: 20px
    background-color: #00000000
    box-shadow: none
    display: inline-flex
    margin: 0
    width: 403px
    user-select: none
    // &:hover
    //     cursor: pointer
    //     animation: room-hover 0.3s ease-out
    //     animation-fill-mode: forwards
    //     & > .card > img
    //         animation: card-hover 0.3s ease-out
    //         animation-fill-mode: forwards
    // &:not(:hover)
    //     animation: room-leave 0.1s linear
    //     animation-fill-mode: forwards
    //     & > .card > img
    //         animation: card-leave 0.1s linear
    //         animation-fill-mode: forwards
    +m
        width: 281px
        border-radius: 14px
    &:after
        visibility: visible
        border-radius: 19px
        content: ''
        display: block
        height: 254px
        position: absolute
        top: 0
        width: 100%
        box-shadow: inset 0px 1px 2px #FFFFFF3A
        +m
            height: 177px
            border-radius: 13px

@keyframes room-hover
    from
        transform: translateY(0px);
        height: 254px;
        +m
            height: 177px;
    to
        transform: translateY(-32px);
        height: 286px;
        +m
            transform: translateY(-22px);
            height: 199px;
@keyframes room-leave
    from
        transform: translateY(-32px);
        height: 286px;
        +m
            transform: translateY(-22px);
            height: 199px;
    to
        transform: translateY(0px);
        height: 254px;
        +m
            height: 177px;
@keyframes card-hover
    from
        box-shadow: 0px -14px 40px #00000060;
    to
        box-shadow: 0px 18px 40px -4px #0000003C;
        +m
            box-shadow: 0px 8px 40px -4px #0000003C;
@keyframes card-leave
    from
        box-shadow: 0px 18px 40px -4px #0000003C;
        +m
            box-shadow: 0px 8px 40px -4px #0000003C;
    to
        box-shadow: 0px -14px 40px #00000060;

.card
    width: 100%
    text-align: left
    & > img
        border-radius: 20px
        box-shadow: 0px -14px 40px #00000060;
        height: 254px
        width: 100%
        +m
            border-radius: 14px
            height: 177px

.content
    position: absolute
    top: 0px
    padding: 0.75em 1em
    height: 254px
    width: 100%
    +m
        height: 177px

.detail
    color: #898989
    font-size: 0.9em
    font-weight: 400
    +m
        font-size: 0.8em

.title
    color: #FFFFFF
    font-size: 1.15em
    font-weight: 400
    +m
        font-size: 0.9em

.users
    position: absolute
    right: 1em
    color: #00FF81
    font-weight: 400
    +m
        font-size: 0.85em

.icon
    font-family: FontAwesomeSolid
    margin-right: 0.65em

.bottom
    position: absolute
    bottom: 0.75em

.vcenter
    margin: 0 !important
    position: absolute
    top: 50%
    transform: translateY(-50%)