/*! Modern: CoBlocks Carousel */
.wp-block-coblocks-gallery-carousel {

	& .flickity-button {
		background-color: transparent !important;
		border: 2px solid var(--go--color--white) !important;
		border-radius: 0;

		&::after {
			background-image: url(../../../dist/images/design-styles/modern/carousel-arrow.svg);
			background-position: center center;
			background-repeat: no-repeat;
			background-size: 100%;
			content: "";
			display: inline-block;
			height: 8px;
			left: 13px;
			position: absolute;
			top: calc(50% - 4px);
			transition: transform 200ms cubic-bezier(0.7, 0, 0.3, 1);
			width: 48px;
		}

		&.next,
		&.previous {
			height: 37px;
			width: 48px;

			&::after {
				height: 8px;
				width: 48px;
			}
		}

		&.previous {
			left: 18px;

			@include media(medium) {
				left: 25px;
			}

			&::after {
				background-color: transparent;
				left: 13px;
				-webkit-mask-image: unset;
				right: auto;
				transform: rotate(180deg);
			}

			&:active::after,
			&:focus::after,
			&:hover::after {
				transform: translateX(-29px) rotate(180deg);
			}
		}

		&.next {
			right: 18px;

			@include media(medium) {
				right: 25px;
			}

			&::after {
				background-color: transparent;
				left: auto;
				-webkit-mask-image: unset;
				right: 13px;
			}

			&:active::after,
			&:focus::after,
			&:hover::after {
				transform: translateX(29px);
			}
		}
	}

}

.has-aligned-cells {

	& .flickity-button::before {
		background: var(--go-button--color--background, var(--go--color--primary));
		bottom: 0;
		content: "";
		display: block;
		height: 100%;
		left: 0;
		position: absolute;
		right: 0;
		top: 0;
		width: 100%;
		z-index: -1;
	}
}
