/**
 * The following styles get applied both on the front of your site
 * and in the editor.
 */

.wp-block-oacs-slider {
	display: flex;
	flex-wrap: wrap;
	list-style-type: none;
    padding: 0;
    
	.blocks-gallery-image,
	.blocks-gallery-item {
		// Add space between thumbnails, and unset right most thumbnails later.
		margin: 0 0 8px 0;
		display: flex;
		flex-grow: 1;
		flex-direction: column;
		justify-content: center;
		position: relative;

		figure {
			margin: 0;
            height: 100%;
			margin: auto;
			position: relative;
            
			// IE doesn't support flex so omit that.
			@supports (position: sticky) {
				display: flex;
				align-items: flex-end;
				justify-content: flex-start;
            }
        }

		img {
			display: block;
			max-width: 100%;
			height: auto;
		}

        // IE doesn't handle cropping, so we need an explicit width here.
		img {
			width: 100%;

			// IE11 doesn't read rules inside this query. They are applied only to modern browsers.
			@supports (position: sticky) {
				width: auto;
			}
        }
        
		figcaption {
            position: absolute;
            bottom: 0;
			right: 0;
			left: 0;
			max-height: 100%;
            overflow: auto;
            padding: 40px 10px 5px;
			color: #fff;
			text-align: center;
			font-size: 13px;
            background: linear-gradient(0deg, rgba( $color: #000, $alpha: 0.7 ) 0, rgba($color: #000, $alpha: 0.3) 60%, transparent);
            
            img {
				display: inline;
			}
		}
	}

	// Cropped
	&.is-cropped .blocks-gallery-image,
	&.is-cropped .blocks-gallery-item {
      a,
      img {
			// IE11 doesn't support object-fit, so just make sure images aren't skewed.
			// The following rules are for all browsers.
			width: 100%;

			// IE11 doesn't read rules inside this query. They are applied only to modern browsers.
			@supports (position: sticky) {
				height: 100%;
				flex: 1;
				object-fit: cover;
            }
        }
	}

	// On mobile and responsive viewports, we allow only 1 or 2 columns at the most.
	& .blocks-gallery-image,
	& .blocks-gallery-item {
		width: calc(100% / 2);
		// width: calc(100% / 2 - 8px);
        
		&:nth-of-type(even) {
			margin-right: 0;
		}
	}

	&.columns-1 .blocks-gallery-image,
	&.columns-1 .blocks-gallery-item {
		width: 100%;
		margin-right: 0;
	}

	// Beyond mobile viewports, we allow up to 8 columns.
	@media (min-width:600px) {
		@for $i from 3 through 8 {
			&.columns-#{ $i } .blocks-gallery-image,
			&.columns-#{ $i } .blocks-gallery-item {
				width: calc((100% - 16px * #{ $i - 1 }) / #{ $i });
				margin-right: 16px;
			}
		}

		// Unset the right margin on every rightmost gallery item to ensure center balance.
		@for $column-count from 1 through 8 {
			&.columns-#{ $column-count } .blocks-gallery-image:nth-of-type(#{ $column-count }n),
			&.columns-#{ $column-count } .blocks-gallery-item:nth-of-type(#{ $column-count }n) {
				margin-right: 0;
			}
		}
	}

	// Last item always needs margins reset.
	// When block is selected, only reset the right margin of the 2nd to last item.
	.blocks-gallery-image:last-child,
	.blocks-gallery-item:last-child,
	.is-selected & .blocks-gallery-image:nth-last-child(2),
	.is-selected & .blocks-gallery-item:nth-last-child(2),
	.is-typing & .blocks-gallery-image:nth-last-child(2),
	.is-typing & .blocks-gallery-item:nth-last-child(2) {
		margin-right: 0;
	}

    // Make the "Add new Gallery item" button full-width (so it always appears
	// below other items).
	.blocks-gallery-item {
		&.has-add-item-button {
			width: 100%;
		}
    }
    
	// Apply max-width to floated items that have no intrinsic width.
	&.alignleft,
	&.alignright {
		max-width: 636px / 2;
		width: 100%;
    }
    
    // Keep the display property consistent when alignments are applied
	// to preserve columns
	&.alignleft,
	&.aligncenter,
	&.alignright {
		display: flex;
	}

	// If the gallery is centered, center the content inside as well.
	&.aligncenter {
		.blocks-gallery-item figure {
			justify-content: center;
		}
	}
}