@import "variables";
@import "commons";
@import "mixins";

.media {
    width: calc(100%);
    padding: 5px 5px 0px 5px;

    &__loading{
        width: calc(100%);
        //border: 1px solid $status-secondary-color;
        // background: rgb(0, 96, 134);
        overflow: hidden;
        padding: 0;
    }
    &__loaded{
        width: calc(100%);
        height: 75px;
        //border: 1px solid $status-secondary-color;
        position: relative;
        transition: all .2s;

        &--hover {
            position: absolute;
            top:0;
            bottom:0;
            left:0;
            right:0;
            z-index: 10;
            opacity: 0;
            background: rgba(black, .5); 
        }

        &--migrating{
            position: absolute;
            top:0;
            bottom:0;
            left:0;
            right:0;
            z-index: 20;
            opacity: 100;
            background: rgba(black, .7); 
        }
        
        &:hover &--hover {
            opacity: 100;
        }

        &--button {
            width: 10px;
            height: 10px;
            position: absolute;
            top:0px;
            right:8px;
            color: white;
        }

        &--description {
            position: absolute;
            bottom:5px;
            left: 5px;
            width: calc(100% - 10px);
        }

        &--preview {
            width: calc(100%);
            height: calc(100%);
         
            object-fit: cover;
            object-position: 50% 50%;    
        }
    }   
}

.audio {
    width: calc(100%);
    height: 30px;

    &__player {
        width: calc(100% - 20px);
        height: 30px;        
    }

    &__button {
        display: block;
        width: 10px;
        height: 10px;
        color: white;
        float: right;
        margin-top: 0px;
        margin-right: 5px;            
    }
}