/*
 This file is part of keks-meet (https://codeberg.org/metamuffin/keks-meet)
 which is licensed under the GNU Affero General Public License (version 3); see /COPYING.
 Copyright (C) 2023 metamuffin <metamuffin.org>

.room
    overflow-y: auto
    width: 100%
    display: flex
    flex-wrap: wrap
    justify-content: space-around
    align-content: stretch
    padding: 0.5em

.user
    background-color: var(--bg)
    border: 0px solid transparent
    border-radius: 5px
    padding: 1em
    margin: 0.5em
    vertical-align: top
    min-width: 15em
    position: relative
    flex: 1 1
    display: flex
    flex-direction: column

.user .info .name
    font-weight: 400

.user.local .info .name
    text-decoration: underline

.user .info
    margin-bottom: 1em

.user .resource
    display: inline-block

.resource
    position: relative
    margin: 0.5em

.local-controls
    display: inline

.local-controls::before
    content: "|"

.transfer-status
    background-color: #00000040

.progress-bar
    z-index: -1
    padding: 0px
    margin: 0px
    height: 6px
    border-radius: 3px
    background-color: var(--ac-light)

.resource-track
    border-radius: 4px
    border: 2px solid transparent
    box-sizing: border-box
    transition: border 0.15s

.resource-track.audio-active
    border: 2px solid var(--ac-light)

.resource-track.audio-mute
    border: 2px solid rgb(255, 86, 86)

.connection-status
    font-size: small
.status-neutral
    color: var(--textgrey)
.status-good
    color: var(--green)
.status-fail
    color: var(--red)

.media-video
    border-radius: 5px
    button.center
        position: absolute
        top: 50%
        left: 50%
        transform: translate(-50%,-50%)
    button.topright
        position: absolute
        top: 0px
        right: 0px
    transition: filter 0.5s
    flex: 1 1 auto
    background-color: black

.media-audio
    border-radius: 5px
    height: 5em
    width: 20em

.media-freeze
    filter: saturate(0%)

video
    position: absolute
    max-width: 100%
    max-height: 100%
    left: 50%
    top: 50%
    transform: translate(-50%, -50%)