1.customize-partial-refreshing {
2	opacity: 0.25;
3	transition: opacity 0.25s;
4	cursor: progress;
5}
6
7/* Override highlight when refreshing */
8.customize-partial-refreshing.widget-customizer-highlighted-widget {
9	box-shadow: none;
10}
11
12/* Make shortcut buttons essentially invisible */
13.widget .customize-partial-edit-shortcut,
14.customize-partial-edit-shortcut {
15	position: absolute;
16	float: left;
17	width: 1px; /* required to have a size to be focusable in Safari */
18	height: 1px;
19	padding: 0;
20	margin: -1px 0 0 -1px;
21	border: 0;
22	background: transparent;
23	color: transparent;
24	box-shadow: none;
25	outline: none;
26	z-index: 5;
27}
28
29/**
30 * Styles for the actual shortcut
31 *
32 * Note that some properties are overly verbose to prevent theme interference.
33 */
34.widget .customize-partial-edit-shortcut button,
35.customize-partial-edit-shortcut button {
36	position: absolute;
37	left: -30px;
38	top: 2px;
39	color: #fff;
40	width: 30px;
41	height: 30px;
42	min-width: 30px;
43	min-height: 30px;
44	line-height: 1 !important;
45	font-size: 18px;
46	z-index: 5;
47	background: #3582c4 !important;
48	border-radius: 50%;
49	border: 2px solid #fff;
50	box-shadow: 0 2px 1px rgba(60, 67, 74, 0.15);
51	text-align: center;
52	cursor: pointer;
53	box-sizing: border-box;
54	padding: 3px;
55	animation-fill-mode: both;
56	animation-duration: .4s;
57	opacity: 0;
58	pointer-events: none;
59	text-shadow:
60		0 -1px 1px #135e96,
61		1px 0 1px #135e96,
62		0 1px 1px #135e96,
63		-1px 0 1px #135e96;
64}
65.wp-custom-header .customize-partial-edit-shortcut button {
66	left: 2px
67}
68
69.customize-partial-edit-shortcut button svg {
70	fill: #fff;
71	min-width: 20px;
72	min-height: 20px;
73	width: 20px;
74	height: 20px;
75	margin: auto;
76}
77
78.customize-partial-edit-shortcut button:hover {
79	background: #4f94d4 !important; /* matches primary buttons */
80}
81
82.customize-partial-edit-shortcut button:focus {
83	box-shadow: 0 0 0 2px #4f94d4;
84}
85
86body.customize-partial-edit-shortcuts-shown .customize-partial-edit-shortcut button {
87	animation-name: customize-partial-edit-shortcut-bounce-appear;
88	pointer-events: auto;
89}
90body.customize-partial-edit-shortcuts-hidden .customize-partial-edit-shortcut button {
91	animation-name: customize-partial-edit-shortcut-bounce-disappear;
92	pointer-events: none;
93}
94
95.page-sidebar-collapsed .customize-partial-edit-shortcut button,
96.customize-partial-edit-shortcut-hidden .customize-partial-edit-shortcut button {
97	visibility: hidden;
98}
99
100@keyframes customize-partial-edit-shortcut-bounce-appear {
101	from, 20%, 40%, 60%, 80%, to {
102		animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
103	}
104	0% {
105		opacity: 0;
106		transform: scale3d(.3, .3, .3);
107	}
108	20% {
109		transform: scale3d(1.1, 1.1, 1.1);
110	}
111	40% {
112		transform: scale3d(.9, .9, .9);
113	}
114	60% {
115		opacity: 1;
116		transform: scale3d(1.03, 1.03, 1.03);
117	}
118	80% {
119		transform: scale3d(.97, .97, .97);
120	}
121	to {
122		opacity: 1;
123		transform: scale3d(1, 1, 1);
124	}
125}
126
127@keyframes customize-partial-edit-shortcut-bounce-disappear {
128	from, 20%, 40%, 60%, 80%, to {
129		animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
130	}
131	0% {
132		opacity: 1;
133		transform: scale3d(1, 1, 1);
134	}
135	20% {
136		transform: scale3d(.97, .97, .97);
137	}
138	40% {
139		opacity: 1;
140		transform: scale3d(1.03, 1.03, 1.03);
141	}
142	60% {
143		transform: scale3d(.9, .9, .9);
144	}
145	80% {
146		transform: scale3d(1.1, 1.1, 1.1);
147	}
148	to {
149		opacity: 0;
150		transform: scale3d(.3, .3, .3);
151	}
152}
153
154@media screen and (max-width: 800px) {
155	.widget .customize-partial-edit-shortcut button,
156	.customize-partial-edit-shortcut button {
157		left: -32px;
158	}
159}
160
161@media screen and (max-width: 320px) {
162	.widget .customize-partial-edit-shortcut button,
163	.customize-partial-edit-shortcut button {
164		left: -30px;
165	}
166}
167