@import '../../shared/styles/gutenberg-colors.scss';

.wp-block-jetpack-gif {
	figure {
		transition: padding-top 125ms ease-in-out;
	}
	.components-base-control__field {
		text-align: center;
	}
	.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-container {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		margin: 0 auto;
		max-width: 400px;
		width: 100%;
		z-index: 1;
		.components-base-control__label {
			height: 0;
			margin: 0;
			text-indent: -9999px;
		}
	}
	.wp-block-jetpack-gif_input {
		flex-grow: 1;
		margin-right: 0.5em;
	}
	.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 $dark-gray-500;
		}
		&:focus {
			box-shadow: 0 0 0 2px $blue-medium-500;
			outline: 0;
		}
	}
}
.components-panel__body-gif-branding {
	svg {
		display: block;
		margin: 0 auto;
		max-width: 200px;
	}
	svg path {
		fill: $dark-gray-150;
	}
}