.wp-block-themeisle-blocks-slider {
	--arrows-color: #333;
	--arrows-background-color: #fff;
	--pagination-color: rgba(255,255,255,0.5);
	--pagination-active-color: #fff;
	--border-color: black;
	--border-width: 0;
	--border-radius: 0;
	--width: auto;

	.glide--carousel, &> div {
		width: var( --width );
		border: var( --border-width ) solid var( --border-color );
		border-radius: var( --border-radius );
		overflow: hidden;

		display: grid;
	}

	.glide__slides {
		height: 400px;

		@media ( min-width: 600px ) and ( max-width: 960px ) {
			height: var( --height-tablet ) !important;
		}

		@media ( max-width: 600px ) {
			height: var( --height-mobile ) !important;
		}
	}

	.wp-block-themeisle-blocks-slider-item-wrapper {
		position: relative;

		&.is-hidden {
			display: none;
		}

		&.is-selected {
			figure {
				&:after {
					box-shadow: inset 0 0 0 5px #0085ba;
					content: "";
					top: 0;
					right: 0;
					bottom: 0;
					left: 0;
					position: absolute;
				}
			}
		}

		figure {
			height: 100%;
			margin: 0;

			img {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}

		.wp-block-themeisle-blocks-slider-item-move-menu {
			position: absolute;
			top: 2px;
			left: 2px;
			background:#fff;
			border: 1px solid rgba(30, 30, 30, 1);
			border-radius: 2px;
			transition: box-shadow .2s ease-out;
			margin: 8px;
			display: inline-flex;
			z-index: 20;

			.components-button {
				color: rgba(30, 30, 30, 1);
				padding: 6px;
				min-width: 36px;

				&:hover {
					box-shadow: none;
				}
			}
		}

		.wp-block-themeisle-blocks-slider-item-delete-menu {
			position: absolute;
			top: 2px;
			right: 2px;
			background:#fff;
			border: 1px solid rgba(30, 30, 30, 1);
			border-radius: 2px;
			transition: box-shadow .2s ease-out;
			margin: 8px;
			display: inline-flex;
			z-index: 20;

			.components-button {
				color: rgba(30, 30, 30, 1);
				padding: 6px;
				min-width: 36px;

				&:hover {
					box-shadow: none;
				}
			}
		}

		.block-editor-rich-text__editable {
			position: absolute;
			bottom: 0;
			margin-bottom: 0px;
			width: 100%;
			max-height: 100%;
			overflow-y: auto;
			z-index: 20;
			white-space: pre-wrap;
			overflow: auto;
			padding: 40px 10px 9px;
			color: #fff;
			text-align: center;
			font-size: 16px;
			background: linear-gradient(0deg, rgba(0,0,0,.7),rgba(0,0,0,.3) 70%, transparent);
			cursor: text;

			figcaption {
				white-space: pre-wrap;
				bottom: 0;
				margin-bottom: 0px;
				width: 100%;
				max-height: 100%;
				overflow: auto;
				padding: 40px 10px 9px;
				color: #fff;
				text-align: center;
				font-size: 16px;
				background: linear-gradient(0deg, rgba(0,0,0,.7),rgba(0,0,0,.3) 70%, transparent);
				cursor: text;

				&.is-hidden {
					display: none;
				}
			}
		}
	}

	.glide__arrows {
		.glide__arrow {
			background: var( --arrows-background-color );
			border: none;
			color: var( --arrows-color );
			padding: 12px;
			opacity: 0.75;

			&:hover {
				opacity: 1;
			}

			&.glide__arrow--right {
				path {
					transform: translate(100px,100px) rotate(180deg);
				}
			}

			svg {
				display: block;
				fill: var( --arrows-color );
			}
		}
	}

	.glide__track {
		.glide__bullet {
			background-color: var( --pagination-color );
		}

		.glide__bullet--active {
			background-color: var( --pagination-active-color );
		}
	}
}

.wp-block-themeisle-blocks-slider-uploader {
	margin: 20px 0;
}

