/*
File preview

Markup:
    <h2>Loaded</h2>
    <div style="display: block; width: 1200px; height: 500px;">
        <div class="file-preview__overlay" style="position: relative;">
            <div class="file-preview__container">
                <div class="file-preview__header">
                    <div class="file-preview__header-content">
                        <div class="file-preview__close"></div>
                        <div class="file-preview__file-info">
                            <div class="file-preview__file-name">OriginalFileName</div>
                            <div class="file-preview__file-meta">Date:Time - LastUpdatedByName</div>
                        </div>
                        <div class="file-preview__actions">
                            <a href="" class="link--icon icon-download file-preview__action file-preview__action--download">Download</a>
                            <a href="" class="link--icon icon-email file-preview__action file-preview__action--email">Email</a>
                        </div>
                    </div>
                </div>
                <div class="file-preview__content">
                    <div class="file-preview__image-container">
                        <img class="file-preview__preview--image" style="background: white" width="500" src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png?v=9c558ec15d8a">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <h2>Loading</h2>
    <div style="display: block; width: 1200px; height: 500px;">
        <div class="file-preview__overlay" style="position: relative;">
            <div class="file-preview__container">
                <div class="file-preview__header">
                    <div class="file-preview__header-content">
                        <div class="file-preview__close"></div>
                    </div>
                </div>
                <div class="file-preview__content">
                    <div class="file-preview-loading-spinner__body">
                        <span class="file-preview-loading-spinner__spinner"></span>
                        <div class="file-preview-loading-spinner__text">Loading…</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

Name: filePreview

Styleguide 2.25
 */

@container-max-width: 1175px;

@import (reference) "../global-loading-spinner/global-loading-spinner.less";

.file-preview-loading-spinner__mask-contents {
    .global-loading-spinner__mask-contents
}

.file-preview-loading-spinner__body {
    .global-loading-spinner__body;
    background-color: unset;
    border: unset;
    box-shadow: unset;
    opacity: 1;
    top: 50%;
}

.file-preview-loading-spinner__text {
    .global-loading-spinner__text;
    color: #ffffff;
}

.file-preview-loading-spinner__spinner {
    .global-loading-spinner__spinner
}


.file-preview__overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: @z-index-file-preview-overlay;
    overflow-y: auto;
    background: rgba(0,0,0,0.75);
}

.file-preview__container {
    width: 100%;
    height: 100%;
    position: absolute;
}

.file-preview__header {
    background: linear-gradient(0deg, rgba(69,69,69,0) 0%, #313131 100%);
    height: 100px;
}

.file-preview__header-content {
    max-width: @container-max-width;
    margin: 0 auto;
    color: white;
    position: relative;
    padding: 20px 0;
}

.file-preview__close {
    top: 30px;
    left: 15px;
    width: 15px;
    height: 15px;
    cursor: pointer;
    position: absolute;
    z-index: @z-index-modal-close;
    background: url("@{icons}delete-white.svg") no-repeat;
    background-size: 15px 15px;
}

.file-preview__delete {
    padding-left: 22px;
    cursor: pointer;
    z-index: @z-index-modal-close;
    background: url("@{icons}trash-can-white.svg") no-repeat;
    background-size: 15px 15px;
}


.file-preview__file-info {
    margin-left: 55px;

    &.file-preview__file-info-small {
        margin-left: 25px;
    }
}

.file-preview__file-meta {
    font-size: @font-size--11;
}

.file-preview__actions {
    position: absolute;
    top: 30px;
    right: 15px;
    color: white;
}

.file-preview__action {
    color: white;
    margin-right: 15px;

    &:last-of-type {
        margin-right: 0;
    }
}

.file-preview__action--download {
    background-image: url("@{icons}download-white.svg");
    &:hover {
        background-image: url("@{icons}download-white.svg");
    }
}

.file-preview__action--email {
    background-image: url("@{icons}email-white.svg");
    background-position: 0;
}

.file-preview__content {
    max-width: @container-max-width;
    margin: -20px auto 0;
    text-align: center;
    height: 100%;
}

//TYPE
.file-preview__preview--image {
    max-height: 100%;
    max-width: @container-max-width;
    vertical-align: middle;
}

.file-preview__audio-container {
    position: absolute;
    top: 40%;
    left: 0;
    right: 0;
    margin: auto;
}

.file-preview__preview--audio {
    width: 650px;
}

.file-preview__preview--video {
    max-width: 100%;
}

.file-preview__modal-container {
    margin: 100px auto;
    width: 570px;
}

.files__preview-icon-text {
    font-size: @font-size--24;
    margin: 0 25px 25px 0;
    font-weight: @font-weight-medium;
    line-height: 22px;
    color: @theme-grey9;
    word-wrap: break-word;
}

.file-preview__btn-download {
    box-sizing: border-box;
    width: 150px;
    background-position: 30px;
    text-indent: 15px;
}

.file-preview__btn-email {
    box-sizing: border-box;
    width: 150px;
    background-position: 46px;
    text-indent: 15px;
}

.file-preview__reload-text {
    color: #FFFFFF;
    font-size: @font-size--12;

    &:hover {
        color: #FFFFFF;
    }
}

.file-preview-detailed {
    z-index: @z-index-file-preview-detailed;
}