@import "variables";

.card-data {    
    border-radius: 3px;
    border: 0px;
    
    transition: all .2s;
    white-space: nowrap;
    overflow: hidden;    

    &:hover {
        background-color: lighten($column-background, 5);
    }

    &__link {
        display: block;
        text-decoration: none;
        color: whitesmoke;
        overflow: hidden;
        text-overflow: ellipsis;

        border: 1px solid $card-border-color;

        &--image {
            width: 55px;
            height: 55px;
            float: left;
            object-fit: cover;
            border-right: 1px solid $card-border-color;
            margin-right: 10px;

            &--logo {
                display: block;
                font-size: 24px;
                color: lighten($card-border-color, 5);
                margin: 9px 0 0 18px;
            }
        }

        &--title {
            margin: 7px 0 0 0;
            padding-right: 5px;
            font-size: 1em;

            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
        }

        &--host {
            margin: 11px 0 0 0px;
            font-size: 0.8em;
            opacity: .7;

            text-overflow: ellipsis;
        }
    }

    //&__photo {}

    &__video {

        $height-content: 150px;

        &--preview {
            position: relative;

            &--controls {
                position: absolute;
                top: 55px;
                left: 65px;
                width: 100px;
                height: 40px;
                z-index: 10;
                border-radius: 4px;
                background-color: rgba($color: #000000, $alpha: .85);
                padding-left: 12px;
            }

            &--link {
                transition: all .2s;
                display: block;
                color: whitesmoke;
                font-size: 16px;
                margin: 8px 5px 0 5px;
                float: left;

                &:hover {
                    opacity: 0.7;
                }
            }

            &--image {
                width: 100%;
                height: $height-content;
                object-fit: cover;
            }
        }

        &--content {
            width: 100%;
            height: $height-content;
            background-color: #000;
        }
    }

    // &__rich {}
}