/**
 * Please note that these styles will be loaded before editor styles.
 * If a theme's editor style specifies the same classname, these may be overwritten. 
 */

/*--------------------------------------------------------------
1.0 WP-Tavern Polaroid Instant Camera Image Block Style
https://wptavern.com/building-a-scotch-tape-image-block-style
--------------------------------------------------------------*/

/* Design for the <figure> wrapper. */
.wp-block-image.is-style-scotch-tape,
.wp-block-image.is-style-scotch-tape-left,
.wp-block-image.is-style-scotch-tape-right {
	position:         relative;
	overflow:         visible;
	padding:          2rem;
	background-color: #e1e1e1;
	box-shadow:       0 4px 10px 0 rgba( 0, 0, 0, 0.3 ),
	                  0 0 4rem rgba( 255, 255, 235, 0.5 ) inset;
}

.wp-block-image.is-style-scotch-tape-left {
	background-color: #e1e1d2;
    transform:        rotate(-1.1deg);
}

.wp-block-image.is-style-scotch-tape-right {
	background-color: #ebebdc;
    transform:        rotate(.9deg);
}

/* Design for the "tape." */
.wp-block-image.is-style-scotch-tape::before,
.wp-block-image.is-style-scotch-tape-left::before,
.wp-block-image.is-style-scotch-tape-right::before {
	content:    "";
	display:    block;
	position:   absolute;
	width:      7rem;
	height:     2rem;
	margin:     auto auto auto -3.5rem;
	z-index:    1;
	left:       50%;
	top:        -0.5rem;
	background: rgba( 255, 255, 235, 0.5 );
	box-shadow: 0 4px 10px 0 rgba( 0, 0, 0, 0.3 );
}

/* Remove TT2's image shadow. */
.wp-block-image.is-style-scotch-tape img {
	box-shadow: none;
}

/* Adjustments for the caption. */
.wp-block-image.is-style-scotch-tape figcaption,
.wp-block-image.is-style-scotch-tape-left figcaption,
.wp-block-image.is-style-scotch-tape-right figcaption {
	display:     block;
	margin:      1rem 0 0;
	line-height: 1;
	font-size:   1rem;
	font-family: 'Pangolin', cursive;
	font-weight: 700;
}

.wp-block-image.is-style-scotch-tape-left figcaption {
    transform:   rotate(.2deg);
}

.wp-block-image.is-style-scotch-tape-right figcaption {
    transform:   rotate(-.1deg);
}