/*----------------------------------------------------------------------------------------------
 *
 *	Base
 *
 *--------------------------------------------------------------------------------------------*/
.ayg {	
	box-sizing: border-box;
	margin-bottom: 1em;
	line-height: 1.5;
}

.ayg *, 
.ayg *:before, 
.ayg *:after {
	box-sizing: inherit;
}

/*----------------------------------------------------------------------------------------------
 *
 *	Spinner
 *
 *--------------------------------------------------------------------------------------------*/
@keyframes ayg-wait {
	12.5% {
		background-position-x: -4px, -4px, -4px, -4px, -4px, -4px, -4px, -4px, -4px, -4px, 0, 0;
	}

	25% {
		background-position-x: -4px, -4px, -4px, -4px, -4px, -4px, -4px, -4px, 0, 0, 6px, 6px;
	}

	37.5% {
		background-position-x: -4px, -4px, -4px, -4px, -4px, -4px, 0, 0, 6px, 6px, 12px, 12px;
	}

	50% {
		background-position-x: -4px, -4px, -4px, -4px, 0, 0, 6px, 6px, 12px, 12px, -4px, -4px;
	}

	62.5% {
		background-position-x: -4px, -4px, 0, 0, 6px, 6px, 12px, 12px, -4px, -4px, -4px, -4px;
	}

	75% {
		background-position-x:  0, 0, 6px,  6px, 12px, 12px, -4px, -4px,  -4px, -4px,  -4px, -4px;
	}

	87.5% {
		background-position-x:  6px, 6px, 12px, 12px, -4px, -4px, -4px, -4px,  -4px, -4px,  -4px, -4px;
	}

	100% {
		background-position-x: 12px, 12px, -4px, -4px, -4px, -4px, -4px, -4px,  -4px, -4px,  -4px, -4px;
	}
}

.ayg-loading {
	background: 
		linear-gradient(0deg, #f4f5fa 1px, transparent 0, transparent 8px, #f4f5fa 8px),   /* 6  */
		linear-gradient(90deg, #f4f5fa 1px, #f6f9fb 0, #f6f9fb 3px, #f4f5fa 3px),

		linear-gradient(0deg, #ececf5 1px, transparent 0, transparent 8px, #ececf5 8px),   /* 5  */
		linear-gradient(90deg, #ececf5 1px, #f2f3f9 0, #f2f3f9 3px, #ececf5 3px),

		linear-gradient(0deg, #e7eaf4 1px, transparent 0, transparent 8px, #e7eaf4 8px),   /* 4  */
		linear-gradient(90deg, #e7eaf4 1px, #eef1f8 0, #eef1f8 3px, #e7eaf4 3px),

		linear-gradient(0deg, #b9bedd 1px, transparent 0, transparent 10px, #b9bedd 10px), /* 3  */
		linear-gradient(90deg, #b9bedd 1px, #d0d5e8 0, #d0d5e8 3px, #b9bedd 3px),

		linear-gradient(0deg, #9fa6d2 1px, transparent 0, transparent 15px, #9fa6d2 15px), /* 2  */
		linear-gradient(90deg, #9fa6d2 1px, #c0c5e1 0, #c0c5e1 3px, #9fa6d2 3px),

		linear-gradient(0deg, #8490c6 1px, transparent 0, transparent 15px, #8490c6 15px), /* 1  */
		linear-gradient(90deg, #8490c6 1px, #aeb5da 0, #aeb5da 3px, #8490c6 3px); 

    background-position-x: -4px; /* Hide All */
    background-position-y: 3px, 3px, 3px, 3px, 3px, 3px, 2px, 2px, 0, 0, 0, 0;

	background-repeat: no-repeat;

	background-size: 
		4px 9px,   /* 6 */
		4px 9px,

		4px 9px,   /* 5 */
		4px 9px,

		4px 9px,   /* 4 */
		4px 9px,

		4px 11px,  /* 3 */
		4px 11px,

		4px 16px,  /* 2 */
		4px 16px,

		4px 16px,  /* 1 */
		4px 16px;	

    zoom: 1; /* Increase this for a bigger symbol*/	
	width: 16px;
    min-width: 16px;	
	height: 16px;
    min-height: 16px;

    animation: ayg-wait .80s steps(1, start) infinite;
}

/*----------------------------------------------------------------------------------------------
 *
 *	Search Form
 *
 *--------------------------------------------------------------------------------------------*/
ayg-search-form {
	display: flex;
    flex-direction: column;
    gap: 0.5em;
    margin-bottom: 1.5em;
}

ayg-search-form form {
    display: flex;
    position: relative;    
}

ayg-search-form form input {	
	flex-grow: 1;
}

ayg-search-form form button {
	position: absolute;	
	top: 0;
	right: 0;
	bottom: 0;	
}

ayg-search-form form button,
ayg-search-form form button:hover,
ayg-search-form form button:focus {	
	margin: 0;
	border: 0;
	box-shadow: none;
	background: transparent;
	background-color: transparent;
	background-image: none;
	padding: 0;
	width: 2em;
	height: 100%;
	line-height: 1;
}

ayg-search-form form .ayg-loading {
    display: flex;
}

ayg-search-form .ayg-status-message {
    display: flex;
    align-items: center;
    gap: 0.35em;	
	color: #008000;
    font-size: small;
}

ayg-search-form .ayg-status-message.ayg-error {
	color: #FF4500;
}

/*----------------------------------------------------------------------------------------------
 *
 *	Player
 *
 *--------------------------------------------------------------------------------------------*/
/* Custom Element */
ayg-player {
    border-radius: 3px;
    background: #000 url( '../../../public/assets/images/spinner-dark.gif' ) center center no-repeat;
}

/* Theme Integration */
.ayg-player {
    display: flex;
    flex-direction: column;
    gap: 1.5em;
}

.ayg-player-container {
    width: 100%;
    margin: auto;
}

.ayg-player-caption {
    display: flex;
    flex-direction: column;
    gap: 1em;
}

.ayg-player-caption .ayg-player-title {
    margin: 0;
    padding: 0;
}

.ayg-player-description-more {
    display: none;
}

.ayg-player-description-toggle-btn {
    display: inline;
    padding-left: 0.5em;
}

/*----------------------------------------------------------------------------------------------
 *
 *	Responsive Grid
 *
 *--------------------------------------------------------------------------------------------*/
.ayg-row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -0.75em;
}

.ayg-col {
    width: 100%;
}

@media only screen and (min-width: 420px) {
    .ayg-col-xs-2 { 
        width: 50%; 
    }
}

@media only screen and (min-width: 600px) {
    .ayg-col-sm-3 { 
        width: 33.33%; 
    }  
}

@media only screen and (min-width: 768px) {
    .ayg-col-2 { 
        width: 50%; 
    }

    .ayg-col-3 { 
        width: 33.33%; 
    }    

    .ayg-col-4 { 
        width: 25%; 
    }

    .ayg-col-5 { 
        width: 20%; 
    }

    .ayg-col-6 { 
        width: 16.66%; 
    }

    .ayg-col-7 { 
        width: 14.28%; 
    }

    .ayg-col-8 { 
        width: 12.5%; 
    }

    .ayg-col-9 { 
        width: 11.11%; 
    }

    .ayg-col-10 { 
        width: 10%; 
    }

    .ayg-col-11 { 
        width: 9.09%; 
    }

    .ayg-col-12 { 
        width: 8.33%; 
    }
}

/*----------------------------------------------------------------------------------------------
 *
 *	Thumbnail
 *
 *--------------------------------------------------------------------------------------------*/
.ayg-thumbnail {
    display: flex;  
    flex-direction: column;  
    gap: 0.75em;
    margin: 0.75em;
    cursor: pointer;
}

.ayg-thumbnail p, 
.ayg-thumbnail br {
    display: none;
}

.ayg-thumbnail .ayg-thumbnail-media {
    position: relative;
    aspect-ratio: var(--ayg-image-ratio, 16 / 9);
    border-radius: 3px; 
    overflow: hidden;
}

.ayg-thumbnail .ayg-thumbnail-image {
    display: block;
    width: 100%;
    max-width: 100%;
    height: 100%;
    object-fit: cover;
}

.ayg-thumbnail .ayg-thumbnail-now-playing {
    pointer-events: none;
    display: none;
	position: absolute;
	right: 5px;
	bottom: 5px;
	z-index: 3;
	border-radius: 2px;
	background-color: rgba( 0, 0, 0, 0.8 );
	padding: 0.35em 0.5em;	
	line-height: 1;
	color: #fff;
	font-size: 0.85em;
}

.ayg-thumbnail .ayg-thumbnail-icon-play {
    pointer-events: none;
    display: inline-block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate( -50%, -50% );
    width: 30%;
    height: 30%;
    min-width: 36px;
    min-height: 36px;
    max-width: 64px;
    max-height: 64px;
	vertical-align: middle;	
	z-index: 3;	
}

.ayg-thumbnail .ayg-thumbnail-caption {
    display: flex;
    flex-direction: column;
    gap: 0.35em;
    word-wrap: break-word;
}

.ayg-thumbnail .ayg-thumbnail-title {
    line-height: 1.5;
    font-size: 1.1em;
    font-weight: 600;
}

.ayg-active .ayg-thumbnail-icon-play {
    display: none !important;
}

.ayg-active .ayg-thumbnail-now-playing  {
    display: inline-block !important;
}

/*----------------------------------------------------------------------------------------------
 *
 *	Pagination
 *
 *--------------------------------------------------------------------------------------------*/
.ayg-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1em;
    margin-bottom: 1em;
}

.ayg-pagination .ayg-btn {
    cursor: pointer;
}

.ayg-pagination-info {
    display: flex;
    align-items: center;
    gap: 4px;
}

.ayg-pagination-info,
.ayg-pagination-info * {
    line-height: 1;
}

.ayg-pagination.ayg-loading {
    margin-left: auto;
    margin-right: auto;
}

.ayg-pagination.ayg-loading * {
    visibility: hidden;
}

/*----------------------------------------------------------------------------------------------
 *
 *	Block Editor
 *
 *--------------------------------------------------------------------------------------------*/
.wp-block-automatic-youtube-gallery-block .components-spinner {
    display: flex;
    align-items: center;
    width: 100%;
}

.wp-block-automatic-youtube-gallery-block .components-placeholder {
    display: none;
}

.is-loading .wp-block-automatic-youtube-gallery-block {
    opacity: 0.5;
}

/*----------------------------------------------------------------------------------------------
 *
 *	Theme
 *
 *--------------------------------------------------------------------------------------------*/
.ayg-theme {
    display: flex;
    flex-direction: column;
    gap: 1.5em;
}
