@use "@automattic/jetpack-base-styles/gutenberg-base-styles" as gb;

.wp-block-jetpack-gif {

	figure {
		transition: padding-top 125ms ease-in-out;

		.wp-block-jetpack-gif_input-container {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			margin-bottom: 10px;
		}

		.wp-block-jetpack-gif_input {
			max-width: 400px;
		}
	}

	.components-base-control__field {
		text-align: center;
	}

	.components-placeholder__label svg {
		margin-right: 1ch;
	}

	.wp-block-jetpack-gif_cover {
		background: none;
		border: none;
		height: 100%;
		left: 0;
		margin: 0;
		padding: 0;
		position: absolute;
		top: 0;
		width: 100%;
		z-index: 1;

		&:focus {
			outline: none;
		}
	}

	.wp-block-jetpack-gif_input {
		flex: 1;
		margin-right: 6px;
	}

	.wp-block-jetpack-gif_thumbnails-container {
		display: flex;
		margin: -2px 0 2px 0;
		margin-left: calc(-4px / 2);
		overflow-x: auto;
		width: calc(100% + 4px);

		&::-webkit-scrollbar {
			display: none;
		}
	}

	.wp-block-jetpack-gif_thumbnail-container {
		align-items: center;
		background-size: cover;
		background-repeat: no-repeat;
		background-position: 50% 50%;
		border: none;
		border-radius: 3px;
		cursor: pointer;
		display: flex;
		justify-content: center;
		margin: 2px;
		padding: 0;
		padding-bottom: calc(100% / 10 - 4px);
		width: calc(100% / 10 - 4px);

		&:hover {
			box-shadow: 0 0 0 1px gb.$gray-600;
		}

		&:focus {
			box-shadow: 0 0 0 2px var(--wp-admin-theme-color);
			outline: 0;
		}
	}
}

.components-panel__body-gif-branding {

	svg {
		display: block;
		margin: 0 auto;
		max-width: 200px;
	}

	svg path {
		fill: gb.$gray-200;
	}
}
