@import '../../../styles/variables.less';

:host {
    position: relative;
    display: block;
    padding: 0;
    margin: 0;
    width: 350px;
    height: 200px;
    & img {
        position: absolute;
        display: block;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: 0;
        animation: appearing 3s linear forwards;
    }
    @keyframes appearing {
        0% {
            opacity: 0;
        }
        100% {
            opacity: 0.5;
        }
    }
    & div.content {
        position: absolute;
        display: block;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        margin: 0;
        z-index: 1;
        & p {
            text-align: center;
        }
        & p.name {
            margin-top: 72px;
        }
        & div.controlls {
            margin-top: 25px;
            text-align: center;
            & button {
                color: var(--scheme-color-1);
                margin-right: 12px;
                &:last-child {
                    margin-right: 0px;
                }
            }
            &:last-child {
                margin-right: 0px;
            }
        }
    }
}