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;

    &__image {
        width: 100%;
        height: 100%;
        &--link {
            cursor: zoom-in;
        }
        &--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 {
                width: 49%;
                height: 100%;
                object-fit: cover;
                object-position: 50% 50%;
            }
        }
        &--link-3-1 {
            width: 49%;
            height: 100%;
            float: left;
            & img {
                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 {
                width: 100%;
                height: 100%;
                object-fit: cover;
                object-position: 50% 50%;
            }
        }
        &--link-4 {
            width: 49%;
            height: 49%;
            &:nth-child(even) {
                margin-left: 2%;
            }
            & img {
                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: 0;
        left: 5px;  
        // 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 {
            @include clearButton; 
            color: rgb(211, 211, 211);         
            font-size: 16px;
            padding: 10px 15px;

            &:hover {
                color: #fff;         
            }
        }

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

        &--mute {
            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;
           
        }
    }
}