/*!
 * @package	 	Joomla.Plugin
 * @subpackage	Content.pcz_loadvideo
 *
 * @copyright	Copyright (C) 2016 Piotr Konieczny. All rights reserved.
 * @license	 	GNU General Public License version 2 or later; see LICENSE.txt
 */

/*
.plgContentPczLoadVideo-snapshot-button {
    min-width: 26px;
    min-height: 20px;

    background: transparent url('../images/snapshot.png') left center no-repeat;
}
/**/

/** Utilities */
.plgContentPczLoadVideo-hidden {
    visibility: hidden;
}

/** Common */
.wg-video-container .video-js,
.plgContentPczLoadVideo-snapshot-container {
    border: 1px solid #ccc;
}

.wg-video-container .video-js.vjs-fullscreen {
    border-width: 0px;
}

/**
 * Snapshot
 */

/** Container */
.plgContentPczLoadVideo-snapshot-container {
    position: relative;
    overflow: hidden;
    padding-top: 56.25%;
    background-color: #f4f1ea;
}

.plgContentPczLoadVideo-snapshot-container.plgContentPczLoadVideo-hidden {
    display: none;
}

/** Spinner */
.plgContentPczLoadVideo-snapshot-container .uk-icon-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -17.5px;
    margin-left: -17.5px;
}

/** Image */
.plgContentPczLoadVideo-snapshot-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    opacity: 1;
    background: #888;

    transition: all 1.0s ease-out;
}

.plgContentPczLoadVideo-snapshot-container img.plgContentPczLoadVideo-hidden {
    opacity: 0;

    transition-duration: .25s;
}

/** Buttons group */
.plgContentPczLoadVideo-snapshot-container .plgContentPczLoadVideo-snapshot-buttons {
    position: absolute !important;
    top: 50%;
    left: 0;
    right: 0;
    margin-top: -18px;

    text-align: center;

    opacity: 1;

    transition: all 1.0s ease-out;
}

.plgContentPczLoadVideo-snapshot-container .plgContentPczLoadVideo-snapshot-buttons.plgContentPczLoadVideo-hidden {
    top: 25%;

    opacity: 0;

    transition-duration: .25s;
}

/** Single button */
.plgContentPczLoadVideo-snapshot-container .plgContentPczLoadVideo-snapshot-buttons > .uk-icon-button {
    cursor: pointer;
    margin: 0 2px;

    color: #444;
    border: 1px solid #ccc;
    border-bottom-color: #bbb;
}

.plgContentPczLoadVideo-snapshot-container .plgContentPczLoadVideo-snapshot-buttons > .uk-icon-button:hover {
    color: #db2f1c;
    border-color: 1px solid black;
}