// H5P variables.
$core-h5p-placeholder-bg-color: $gray !default;
$core-h5p-placeholder-text-color: $text-color !default;

ion-app.app-root core-h5p-player {
    .core-h5p-placeholder {
        position: relative;
        width: 100%;
        height: 230px;
        background: url('../assets/img/icons/h5p.svg') center top 25px / 100px auto no-repeat $core-h5p-placeholder-bg-color;
        color: $core-h5p-placeholder-text-color;

        .icon {
            color: $core-h5p-placeholder-text-color;
        }

        .core-h5p-placeholder-play-button, .core-h5p-placeholder-spinner {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .core-h5p-placeholder-play-button {
            font-size: 30px;
            min-height: 50px;
        }

        .core-h5p-placeholder-download-container {
            position: absolute;
            top: 0;
            right: 0;

            ion-spinner {
                margin-right: 0.75em;
            }

            core-download-refresh > ion-icon {
                margin: 0.4rem 0.2rem;
                padding: 0 0.5em;
                line-height: .67;
            }
        }

        ion-spinner circle {
            stroke: $core-h5p-placeholder-text-color;
        }
    }

}