/* Logobar Block
--------------------------------------------- */

.block-logobar .block-logobar--logos {
	list-style: none;
	margin-bottom: 0;
	padding: 0;
}

.block-logobar:not(.is-carousel) .block-logobar--logos {
	display: grid;
	column-gap: var(--wp--style--block-gap);
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
}

.block-logobar .block-logobar--logos li {
	margin-top: var(--wp--preset--spacing--20);
	margin-bottom: var(--wp--preset--spacing--20);
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.block-logobar:not(.is-carousel) .block-logobar--logos img {
	max-width: 180px;
	width: 100%;
    max-height: 80px;
	object-fit: contain;
}

.block-logobar .block-logobar--title {
	font-weight: bold;
	margin-top: var(--wp--style--block-gap);
	font-size: var(--wp--preset--font-size--large);
}

.block-logobar .block-logobar--title span {
	text-decoration: underline;
}

/* Carousel mode styles */

.block-logobar.is-carousel .splide {
	padding: 0 60px;
}

.block-logobar.is-carousel .block-logobar--logos img {
	width: 100%;
	max-height: 60px;
	object-fit: contain;
}

.block-logobar.is-carousel .splide__arrow {
    background: var(--wp--preset--color--secondary);
    height: 2.5rem;
    opacity: 1;
    width: 2.5rem;
}
.block-logobar.is-carousel .splide__arrow svg {
	fill: var(--wp--preset--color--primary);
	width: 1rem;
	height: 1rem;
}
.block-logobar.is-carousel .splide__arrow:hover {
	background: var(--wp--preset--color--accent);
}
.block-logobar.is-carousel .splide__arrow:hover svg {
	fill: var(--wp--preset--color--white);
}
.block-logobar.is-carousel .splide__arrow:disabled {
	opacity: 0.3;
	cursor: not-allowed;
}

.block-logobar.is-carousel .splide__arrow--prev {
	left: 0;
}

.block-logobar.is-carousel .splide__arrow--next {
	right: 0;
}

.block-logobar.is-carousel .splide__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Tablet and up */
@media (min-width: 768px) {
	
	.block-logobar:not(.is-carousel) .block-logobar--logos {
		grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
	}
	
	.block-logobar.is-carousel .splide {
		padding: 0 100px;
	}

}

/* Editor Styles */

.editor-styles-wrapper .block-logobar.is-carousel .block-logobar--logos {
	display: grid;
	column-gap: var(--wp--style--block-gap);
	grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
}