// /**
//  * Copyright © Magento, Inc. All rights reserved.
//  * See COPYING.txt for license details.
//  */

//
//  Video Management Variables
//  _____________________________________________

@video-gallery-icon__color: @color-black;
@video-gallery-icon__size: 4rem;
@video-gallery-icon__z-index: @image-gallery-image__z-index + 1;

//
//  Extends
//  _____________________________________________

.abs-video-gallery-icon {
    .lib-icon-font(
    @icon-video__content,
    @_icon-font: @icons-admin__font-name,
    @_icon-font-size: @video-gallery-icon__size,
    @_icon-font-color: @video-gallery-icon__color,
    @_icon-font-color-hover: @video-gallery-icon__color,
    @_icon-font-text-hide: true,
    @_icon-font-display: block
    );

    &:before {
        left: 0;
        margin-top: -@video-gallery-icon__size / 2;
        opacity: .5;
        position: absolute;
        right: 0;
        top: 50%;
        z-index: @video-gallery-icon__z-index;
    }
}

//
//  Video Management
//  _____________________________________________

.image.video-placeholder {
    display: inline-block;
    position: relative;
    text-decoration: none;

    &:before {
        background: url(../Magento_ProductVideo/images/gallery-sprite.png) no-repeat left bottom;
        content: '';
        height: 49px;
        left: 50%;
        margin-left: -24px;
        opacity: .7;
        position: absolute;
        top: 18px;
        width: 49px;
        z-index: 1;
    }

    .image-placeholder-text {
        font-weight: 400;
    }
}

.preview-image-hidden-input {
    display: none;
}

.video-item {
    .product-image-wrapper {
        &:extend(.abs-video-gallery-icon all);

        &:hover {
            &:before {
                opacity: .3;
            }
        }
    }
}

//  Style slideout panel - Add video
.mage-new-video-dialog {
    form.admin__scope-old {
        float: left;
        width: 65%;
    }

    .video-player-sidebar {
        float: left;
        width: 34.99999%;
    }

    .video-player-container {
        &:extend(.abs-video-gallery-icon all);

        border: 1px solid @color-gray89;
        height: 20vw;
        margin-bottom: 30px;
        position: relative;
        width: 100%;
    }

    .video-information {
        display: none;
        margin-bottom: 7px;

        &:after {
            clear: both;
            content: '';
            display: block;
            height: 0;
            visibility: hidden;
        }

        label {
            display: block;
            float: left;
            font-family: @font-family__base;
            font-size: @font-size__s + .2;
            font-weight: @font-weight__semibold;
            text-align: right;
            width: 25%;
        }

        span {
            display: block;
            float: left;
            font-family: @font-family__base;
            font-size: @font-size__s + .2;
            font-weight: @font-weight__light;
            padding-left: 20px;
            width: 74.9999%;
        }
    }

    .product-video {
        height: 100%;
        position: relative;
        width: 100%;
        z-index: 20;
    }

    //  TODO UI: this code must be deleted when video slideout panel will be implemented with ui-components
    .admin__scope-old {
        //  re-arrange checkboxes fields in slideout video panel (base, small image etc)
        .admin__field {
            &.field-role,
            &.field-video_image,
            &.field-video_small_image,
            &.field-video_thumbnail,
            &.field-video_swatch_image,
            &.field-new_video_disabled {
                .admin__field-control {
                    #mix-grid .column(3, @field-grid__columns);
                    float: left;
                    margin-left: 80px;
                    position: relative;

                    input {
                        float: right;
                    }
                }

                .admin__field-label {
                    cursor: pointer;
                    left: 0;
                    margin-left: 26%;
                    padding-left: 45px;
                    position: absolute;
                    width: 250px;

                    &:before {
                        content: none;
                    }

                    span {
                        float: left;
                    }
                }
            }

            &.field-new_video_disabled {
                margin-top: 32px;
            }

            &.field.field-new_video_screenshot {
                margin-bottom: 5px;
            }

            &.field.field-new_video_screenshot_preview {
                margin-bottom: 50px;
            }

            &.field-role-label {
                height: 0;

                .admin__field-control {
                    #mix-grid .column(3, @field-grid__columns);
                    float: left;
                    margin-left: 80px;
                    position: relative;

                    .control-value {
                        color: @color-black;
                        float: right;
                        font-family: @font-family__base;
                        font-size: @font-size__s + .2;
                        font-weight: @font-weight__semibold;
                        position: relative;
                        right: 50px;
                        top: 21px;
                    }
                }
            }

            label > input[type='checkbox'] {
                margin: -3px 3px 0 0;
                vertical-align: middle;
            }

            input[type='checkbox'] {
                .lib-css(appearance, none, 1);
                background: @color-white;
                border: 1px solid @color-gray68;
                border-radius: 2px;
                cursor: pointer;
                display: inline-block;
                height: 16px;
                margin: 0 5px 0 0;
                position: relative;
                transition: all .1s ease-in;
                vertical-align: middle;
                width: 16px;

                &:focus {
                    border-color: @color-blue-pure;
                    box-shadow: none;
                    outline: 0;
                }

                &[disabled] {
                    background-color: @color-lighter-gray;
                    border-color: @color-gray68;
                    opacity: .5;
                }

                &:checked {
                    &:after {
                        color: @color-brownie;
                        content: '\e62d';
                        display: inline-block;
                        font-family: 'Admin Icons';
                        font-size: 11px;
                        font-weight: 400;
                        left: 0;
                        line-height: 13px;
                        position: absolute;
                        text-align: center;
                        top: 0;
                        width: 14px;
                    }
                }
            }

            .control {
                > input[type='checkbox'] {
                    padding: 0;
                    width: 16px;
                }
            }
        }
    }
}

.image.video-placeholder > button[data-role='add-video-button'],
.image.video-placeholder > button {
    background: transparent;
    border: 0;
    height: 100%;
    position: relative;
    width: 100%;
    z-index: 10;
}

.add-video-button-container {
    float: right;
}

.image-upload-error {
    background: @color-pink-light;
    color: @color-gray19;
    font-size: 12px;
    font-weight: 400;
    padding: 7px 7px 7px 35px;
    position: relative;

    .image-upload-error-cross {
        height: 20px;
        left: 8px;
        position: absolute;
        top: 9px;
        width: 20px;

        &:before,
        &:after {
            background-color: @color-red9;
            content: ' ';
            height: 20px;
            left: 8px;
            position: absolute;
            width: 4px;
        }

        &:before {
            transform: rotate(45deg);
        }

        &:after {
            transform: rotate(-45deg);
        }
    }
}