/**
 * This module provides specific style definitions for the AssetPreview component
 *
 * @module fonio/components/AssetPreview
 */
@import '../../parameters.scss';

.fonio-AssetPreview
{
    // @extend .flex-stretched-column;

    .preview-container
    {
        position: relative;

        overflow: hidden;
        flex: 5;
        display: flex;
        flex-flow: column nowrap;
        // min-width: 80%;

        min-height: 16rem;
        max-height: 20rem;
        background: rgba(0,0,0,0.05);
        // height: 20rem;
        .image-container
        {
            position: relative;
            overflow: hidden;
            text-align: center;

            

            // display: flex;
            // justify-content: center;
            img
            {
                max-height: 20rem;
                max-width: 100%;
                box-sizing: content-box;
            }
        }

        > div{
            max-height: 100%;
            max-width: 100%;
        }
    }
    .asset-metadata
    {
        flex: 1;

        // padding: $gutter-medium;

        cursor: pointer;

        // @extend .flex-stretched-row;
        // @extend .interactive-item;
        // &:hover
        // {
        //     @extend .interactive-item-intent;
        // }

        .column
        {
            flex: 1;
            &:not(:last-of-type)
            {
                // padding-right: $gutter-medium;
            }
        }
        button
        {
            width: 100%;
            // margin-bottom: $gutter-medium;

            // @extend .important-item;

            // &:hover
            // {
            //     @extend .important-item-intent;
            // }
        }
        p
        {
            overflow: auto;

            width: 100%;
            max-height: 10rem;
        }

        h5
        {
            // font-size: $font-size-3;
            font-weight: bold;

            display: flex;
            align-items: center;
            flex-flow: row nowrap;

            margin-top: 0;
            // margin-bottom: $gutter-medium;
        }

        .type-icon
        {
            width: 2rem;
            // margin-right: $gutter-medium;
        }

        .displaced
        {
            margin-left: 2rem;
        }

        .line-buttons-container
        {
            button
            {
                width: unset;
                // margin-right: $gutter-medium;
            }
        }

        h6
        {
            // font-size: $font-size-2-5;
            font-weight: bold;

            margin-top: 0;
            // margin-bottom: $gutter-medium;
        }
    }
    iframe
    {
        position: absolute;

        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;

        border: none;

        left: 0;
        top: 0;
    }
    .player-container{
        background: rgba(0,0,0,0.05);
        max-width: 100%;
        max-height: 100%;
        width: 100%;
        height: 100%;
        overflow: hidden;
        > div{
            width: 100%!important;
            height: 100%!important;
        }
    }
    img
    {
        max-width: 100%;
    }

    .ReactTable{
        color: #333;
    }
}