/**
 * Styles for the Connection messages tool.
 */

@import "src/main/app/Resources/styles/mixins";
@import "src/main/app/Resources/styles/variables";

$content-preview-width: 195px;
$content-preview-height: 140px;

.slides-form {
    .slides {
        list-style-type: none;
        padding: 0;
        margin-bottom: $component-margin-bottom;

        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .slide-preview {
        display: flex;
        justify-content: center;
        width: $content-preview-width;
        height: $content-preview-height;
        border: $data-card-inner-border-width solid $data-card-inner-border-color;
        border-radius: $thumbnail-border-radius;
        padding: 4px;
        margin: 5px;
        position: relative;
        overflow: hidden;

        .slide-actions {
            position: absolute;
            top: 0;
            right: 0;
        }

        .btn {
            padding: 4px;

            @include border-radius(0 $thumbnail-border-radius 0 $btn-border-radius);
        }
    }

    .image-thumbnail {
        max-width: 100%;
        max-height: 100%;
    }

    .text-thumbnail {
        font-size: 10px;
    }
}
