Sengi-Windows-MacOS-Linux/src/app/components/stream/status/attachements/attachements.component.scss

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

.galery {
    width: 100%;
    height: 150px;
    overflow: hidden;
    border-radius: 2px;
    position: relative;

    &__img {
        &--1 {
            width: 100%;
            height: 100%;
            display: inline-block;
        }

        &--2 {
            width: 49%;
            height: 100%;
            display: inline-block;

            &:last-child {
                margin-left: 2%; // border: 1px greenyellow solid;
            }            
        }

        &--3-1 {
            width: 49%;
            height: 100%;
            float: left;
        }

        &--3-2 {
            width: 49%;
            height: 49%;
            margin-left: 2%;
            float: left;

            &:nth-child(even) {
                margin-bottom: 2%;
            }
        }

        &--4 {
            width: 49%;
            height: 49%;            
            margin-bottom: 2%;
            float: left;

            &:nth-child(even) {
                margin-left: 2%;
            }
        }

    }


    &__image {
        width: 100%;
        height: 100%;

        &--link {            
            //display: inline;
            cursor: zoom-in;
            outline: 1px solid orange;
        }

        &--1 {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: 50% 50%;
        }

        &--link-2 {
            width: 49%;
            height: 100%;

            &:last-child {
                margin-left: 2%; // border: 1px greenyellow solid;
            }

            & img, & video {
                width: 49%;
                height: 100%;
                object-fit: cover;
                object-position: 50% 50%;
            }

            // & video {              
            //     object-fit: cover;
            //     object-position: 50% 50%;                
            // }
        }

        &--link-3-1 {
            width: 49%;
            height: 100%;
            float: left;

            & img, & video {
                width: 100%;
                height: 100%;
                object-fit: cover;
                object-position: 50% 50%;
            }
        }

        &--link-3-2 {
            width: 49%;
            height: 49%;
            margin-left: 2%;
            float: left;

            &:nth-child(even) {
                margin-bottom: 2%;
            }

            & img, & video {
                width: 100%;
                height: 100%;
                object-fit: cover;
                object-position: 50% 50%;
            }
        }

        &--link-4 {
            width: 49%;
            height: 49%;

            &:nth-child(even) {
                margin-left: 2%;
            }

            & img, & video {
                width: 49%;
                height: 49%;
                object-fit: cover;
                object-position: 50% 50%;
                margin-bottom: 2%;
            }
        }
    }

    // &__gifv {
    //     width: 100%;
    //     height: 100%;
    //     object-fit: cover;
    //     cursor: zoom-in;
    //     border-radius: 2px;
    // }

    &__video {
        width: 100%;
        height: 100%;
        object-fit: contain;
        background-color: black;
        border-radius: 2px;
    }

    &__play-control {
        z-index: 2;
        position: absolute;
        bottom: 5px;
        left: 0;
        // outline: 1px greenyellow solid;    
    }

    &__control {
        z-index: 1;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        opacity: 0;
        transition: all .2s;
        height: 100px;
        padding-top: 55px;

        &--button {
            display: inline-block;
            color: rgb(211, 211, 211);            
            font-size: 16px;
            padding: 10px 15px;

            width: 40px;
            height: 40px;

            &:hover {
                color: #fff;
            }
        }

        &--play {
            position: absolute;
            left: 0;
        }

        &--expand {
            position: absolute;
            right: 0;
        }

        &--mute {
            position: absolute;
            left: 40px;
            // margin-left: 40px;
        }

        background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .1), rgba(0, 0, 0, .6), rgba(0, 0, 0, 1));
    }

    &__hover {
        &:hover .galery__control {
            opacity: 100;

        }
    }
}


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

    &:focus {
        outline: none;
    }
}