twenty-twenty-three.scss — WooCommerce 10.8.0-beta.1

woocommerce / assets / css / twenty-twenty-three.scss

woocommerce / assets / css Last commit date

twenty-twenty-three.scss

1175 lines

1	/**
2	* Fonts
3	*/
4	@import "fonts";
5
6	@import "mixins";
7	@import "animation";
8
9	/**
10	* Forms
11	*/
12	@import "forms";
13
14	/*
15	Layout fix.
16	*/
17	.woocommerce-page {
18
19	main {
20	// This is to allow .woocommerce div to have width of 1000px on styles with full width layout (such as Pitch).
21	max-width: calc(1000px + var(--wp--style--root--padding-right) + var(--wp--style--root--padding-left));
22	margin-left: auto;
23	margin-right: auto;
24
25	.woocommerce {
26	@include clearfix();
27	}
28	}
29	}
30
31	.theme-twentytwentythree {
32	.container-colors {
33	display: flex;
34	flex-direction: row;
35	}
36
37	.cube {
38	width: 20%;
39	height: 100px;
40	text-align: center;
41	vert-align: middle;
42	}
43
44	.base {
45	background-color: var(--wp--preset--color--base);
46	}
47
48	.contrast {
49	background-color: var(--wp--preset--color--contrast);
50	color: var(--wp--preset--color--base);
51	}
52
53	.primary {
54	background-color: var(--wp--preset--color--primary);
55	}
56
57	.secondary {
58	background-color: var(--wp--preset--color--secondary);
59	}
60
61	.tertiary {
62	background-color: var(--wp--preset--color--tertiary);
63	}
64
65
66	}
67
68	.woocommerce {
69
70	/*
71	Common/global
72	*/
73
74	// Make quantity selector less wide.
75	.quantity {
76	input[type="number"]="number""] {
77	width: 3em;
78	}
79
80	input[type="number"]="number""]::-webkit-inner-spin-button,
81	input[type="number"]="number""]::-webkit-outer-spin-button {
82	opacity: 1;
83	}
84	}
85
86	// Breadcrumbs are unnecessary on the shop page.
87	&.woocommerce-shop .woocommerce-breadcrumb {
88	display: none;
89	}
90
91	// Make sure breadcrumbs are not overlapping with Sale badge on the Single product page, etc.
92	.woocommerce-breadcrumb {
93	margin-bottom: 1rem;
94	}
95	// Checkout notice group styling.
96	.woocommerce-NoticeGroup-checkout {
97	ul.woocommerce-error[role="alert"]="alert""] {
98	color: var(--wp--preset--color--contrast);
99	background: var(--wp--preset--color--primary);
100
101	&::before {
102	display: none;
103	}
104	li {
105	display: inherit;
106	margin-bottom: 1rem;
107	}
108	}
109	}
110
111	/*
112	Shop page.
113	*/
114
115	// Styling the buttons on the Shop page.
116	a.button,
117	button[name="add-to-cart"]="add-to-cart""],
118	input[name="submit"]="submit""],
119	button.single_add_to_cart_button,
120	button[type="submit"]="submit""]:not(.wp-block-search__button) {
121	display: inline-block;
122	text-align: center;
123	word-break: break-word;
124	padding: 1rem 2rem;
125	margin-top: 1rem;
126	text-decoration: none;
127	font-size: medium;
128	cursor: pointer;
129	}
130
131	// Reset the margin top in the Add to Cart + Options block.
132	// @see https://github.com/woocommerce/woocommerce/pull/60413
133	// Extra class for specificity.
134	.wp-block-add-to-cart-with-options .wp-block-button__link.wp-block-button__link {
135	margin-top: 0;
136	}
137
138	// Style the 'Showing A-B of X results' text.
139	.woocommerce-result-count {
140	margin-top: 0;
141	}
142
143	.woocommerce-ordering > label {
144	margin-right: 0.25rem;
145	}
146
147	// The 'order by' dropdown on the Shop page is rather tiny unless the font size is increased.
148	select.orderby {
149	font-size: var(--wp--preset--font-size--medium);
150	}
151
152	// Products.
153	ul.products {
154
155	padding-inline-start: 0;
156	display: flex;
157	align-items: stretch;
158	flex-direction: row;
159	flex-wrap: wrap;
160	justify-content: flex-start;
161	@media only screen and (max-width: 768px) {
162	justify-content: space-between;
163	}
164
165	li.product {
166	list-style: none;
167	margin-top: var(--wp--style--block-gap);
168	text-align: center;
169	display: flex;
170	flex-direction: column;
171	justify-content: space-between;
172	align-items: flex-start;
173
174	a.woocommerce-loop-product__link {
175	text-decoration: none;
176	display: block;
177	border: 0;
178	}
179
180	h2.woocommerce-loop-product__title {
181	color: var(--wp--preset--color--contrast);
182	font-family: var(--wp--preset--font-family--system-font);
183	text-decoration: none;
184	margin-bottom: 0;
185	}
186
187	h2.woocommerce-loop-category__title {
188	font-size: revert;
189	}
190
191	// Add to cart/Select options/Read more buttons.
192	a.button {
193	padding: 0.8rem 10%;
194	margin-left: auto;
195	margin-right: auto;
196
197	&.loading {
198	opacity: 0.5;
199	}
200	}
201
202	// View cart link.
203	a.added_to_cart {
204	margin: 1rem auto;
205	}
206
207	}
208	}
209
210	// Position page numbers under list of products horizontally in the centre of the page.
211	ul.page-numbers {
212	text-align: center;
213	}
214
215	// On sale badge.
216	span.onsale {
217	top: -1rem;
218	right: -1rem;
219	position: absolute;
220	background: var(--wp--preset--color--tertiary);
221	color: var(--wp--preset--color--contrast);
222	border-radius: 2rem;
223	line-height: 2.6rem;
224	font-size: 0.8rem;
225	padding: 0 0.5rem 0 0.5rem;
226	}
227
228	/*
229	Single product page.
230	*/
231
232	div.product {
233	position: relative;
234
235	> span.onsale {
236	position: absolute;
237	left: -1rem;
238	top: -1rem;
239	width: 1.8rem;
240	z-index: 1;
241	}
242
243	// How price gets displayed
244	.entry-summary {
245	.woocommerce-Price-amount,
246	del,
247	.price {
248	font-size: var(--wp--preset--font-size--large);
249	}
250	}
251
252	div.woocommerce-product-gallery {
253	position: relative;
254
255	.woocommerce-product-gallery__trigger {
256	@include woocommerce-product-gallery__trigger;
257	}
258
259	figure.woocommerce-product-gallery__wrapper,
260	div.woocommerce-product-gallery__wrapper {
261	margin: 0;
262	}
263
264	}
265
266	.woocommerce-product-gallery__image a {
267	display: block;
268	line-height: 0;
269	outline-offset: -1px;
270	}
271
272	div.summary {
273	font-size: 1rem;
274
275	h1.product_title {
276	font-size: var(--wp--preset--font-size--huge);
277	margin: 0;
278	}
279
280	figure.woocommerce-product-gallery__wrapper,
281	div.woocommerce-product-gallery__wrapper {
282	margin: 0;
283	}
284
285	.woocommerce-product-rating {
286	.star-rating {
287	display: inline-block;
288	}
289	.woocommerce-review-link {
290	display: inline-block;
291	overflow: hidden;
292	position: relative;
293	top: -0.5em;
294	font-size: 1em;
295	}
296	}
297	}
298
299	table.variations tr {
300
301	display: table-row;
302	margin-bottom: 0;
303	text-align: left;
304
305	td select {
306	margin: calc(var(--wp--style--block-gap) / 4) 0;
307	}
308	}
309
310	.single_variation_wrap {
311	margin-top: var(--wp--style--block-gap);
312
313	// Prevent height flickering when selecting a variation.
314	.single_variation .woocommerce-variation-description > :first-child {
315	margin-top: 0;
316	}
317	}
318
319	ol.flex-control-thumbs {
320	padding-left: 0;
321	float: left;
322
323	li {
324	list-style: none;
325	cursor: pointer;
326	float: left;
327	width: 18%;
328	margin-right: 1rem;
329	}
330
331	}
332
333	a.reset_variations {
334	margin-left: 0.5em;
335	}
336
337	table.group_table {
338	td {
339	padding-right: 0.5rem;
340	padding-bottom: 1rem;
341	}
342
343	margin-bottom: var(--wp--style--block-gap);
344	}
345
346	.related.products {
347	margin-top: 7rem;
348	clear: both;
349	}
350
351	.upsells.products {
352	clear: both;
353	}
354	}
355
356	// Reviews tab.
357	.woocommerce-Reviews {
358	ol.commentlist {
359	list-style: none;
360	padding-left: 0;
361
362	li {
363	margin-bottom: var(--wp--style--block-gap);
364	}
365
366	img.avatar {
367	float: left;
368	}
369
370	p.meta {
371	font-size: 1rem;
372	}
373
374	.comment-text {
375	display: flow-root;
376	padding-left: var(--wp--style--block-gap);
377
378	.star-rating {
379	margin-top: 0;
380	margin-right: unset;
381	margin-left: unset;
382	}
383	}
384	}
385
386	.comment-form-rating {
387	label {
388	display: inline-block;
389	padding-right: var(--wp--style--block-gap);
390	padding-top: var(--wp--style--block-gap);
391	}
392
393	p.stars {
394	display: inline;
395	a::before {
396	color: var(--wp--preset--color--contrast);
397	}
398	}
399	}
400
401	.comment-form-comment {
402	label {
403	float: left;
404	padding-right: var(--wp--style--block-gap);
405	}
406	}
407
408	#review_form_wrapper {
409	margin-top: 5rem;
410	}
411	}
412
413	// Rating: show stars instead of 1, 2, 3, 4, 5.
414	.star-rating {
415	overflow: hidden;
416	position: relative;
417	height: 1em;
418	line-height: 1;
419	width: 5.4rem;
420	font-family: WooCommerce;
421	font-style: normal;
422	color: var(--wp--preset--color--contrast);
423	margin: 1rem auto 0.7rem auto;
424
425	&::before {
426	content: "\73\73\73\73\73";
427	float: left;
428	top: 0;
429	left: 0;
430	position: absolute;
431	font-size: 1rem;
432	}
433
434	span {
435	overflow: hidden;
436	float: left;
437	top: 0;
438	left: 0;
439	position: absolute;
440	padding-top: 1.5em;
441	}
442
443	span::before {
444	content: "\53\53\53\53\53";
445	top: 0;
446	position: absolute;
447	left: 0;
448	font-size: 1rem;
449	}
450	}
451
452	// Rating stars.
453	p.stars {
454	margin-top: 0;
455
456	a {
457	position: relative;
458	height: 1.2em;
459	width: 1.2em;
460	text-indent: -999em;
461	display: inline-block;
462	text-decoration: none;
463	box-shadow: none;
464	font-style: normal;
465
466	&::before {
467	display: block;
468	position: absolute;
469	top: 0;
470	left: 0;
471	width: 1em;
472	height: 1em;
473	line-height: 1;
474	font-family: WooCommerce;
475	font-size: 24px;
476	content: "\e021";
477	text-indent: 0;
478	}
479
480	&:hover {
481
482	~ a::before {
483	content: "\e021";
484	}
485	}
486	}
487
488	&:hover {
489
490	a {
491
492	&::before {
493	content: "\e020";
494	}
495	}
496	}
497
498	&.selected {
499
500	a.active {
501
502	&::before {
503	content: "\e020";
504	}
505
506	~ a::before {
507	content: "\e021";
508	}
509	}
510
511	a:not(.active) {
512
513	&::before {
514	content: "\e020";
515	}
516	}
517	}
518	}
519	}
520
521	// Description/Additional info/Reviews tabs.
522	.woocommerce-tabs {
523	padding-top: var(--wp--style--block-gap);
524	}
525
526	ul.wc-tabs {
527	padding: 0;
528	border-bottom-style: solid;
529	border-bottom-width: 1px;
530	border-bottom-color: #eae9eb;
531
532	li {
533	opacity: 0.5;
534	color: var(--wp--preset--color--contrast);
535	margin: 0;
536	padding: 0.5em 1em 0.5em 1em;
537	border-color: #eae9eb;
538	border-top-left-radius: 5px;
539	border-top-right-radius: 5px;
540	float: left;
541	border-style: solid;
542	border-width: 1px;
543	font-weight: 600;
544	font-size: var(--wp--preset--font-size--medium);
545
546	&:first-child {
547	border-left-color: #eae9eb;
548	margin-left: 1em;
549	}
550
551	&.active {
552	background: var(--wp--preset--color--tertiary);
553	color: var(--wp--preset--color--contrast);
554	opacity: 1;
555	}
556
557	a {
558	text-decoration: none;
559	color: var(--wp--preset--color--contrast);
560	}
561	}
562	}
563
564	.woocommerce-Tabs-panel {
565	padding-top: var(--wp--style--block-gap);
566	font-size: var(--wp--preset--font-size--small);
567	margin-left: 1em;
568
569	// Hide repeated heading.
570	h2:first-of-type {
571	display: none;
572	}
573
574	// Attributes table styles.
575	table.woocommerce-product-attributes {
576	tbody {
577
578	td, th {
579	padding: 0.2rem 0.2rem 0.2rem 0;
580
581	p {
582	margin: 0;
583	}
584	}
585
586	th {
587	text-align: left;
588	padding-right: 1rem;
589	}
590	}
591	}
592	}
593
594	.woocommerce-page {
595	.woocommerce-cart-form {
596
597	// Make coupon code input less ginormous.
598	#coupon_code {
599	padding: 0 1rem;
600	}
601
602	.actions {
603	button.button {
604	height: initial;
605	}
606	}
607
608	// Cart table, aka review of cart items.
609	table.shop_table_responsive {
610
611	td,
612	th {
613	padding: 1rem 0 0.5rem 1rem;
614	}
615
616	tbody {
617
618	tr:last-of-type {
619	border-top: none;
620	}
621
622	@media only screen and (max-width: 768px) {
623	td {
624	padding-left: 0;
625	}
626
627	.product-remove {
628	text-align: left !important;
629	}
630
631	#coupon_code {
632	float: left;
633	}
634	}
635	}
636
637	.product-remove {
638	font-size: var(--wp--preset--font-size--large);
639
640	a {
641	text-decoration: none;
642	}
643	}
644	}
645	}
646
647	// Elements around "Proceed to Checkout" button.
648	.cart-collaterals {
649	margin-top: 1.5rem;
650
651	h2 {
652	text-transform: uppercase;
653	font-family: inherit;
654	}
655
656	table.shop_table_responsive {
657
658	tr {
659	border-top: none;
660	}
661
662	th {
663	width: 11rem;
664	}
665
666	td,
667	th {
668	padding: 1rem 0;
669	vertical-align: text-top;
670	}
671	}
672
673	button[name="calc_shipping"]="calc_shipping""] {
674	padding: 1rem 2rem;
675	}
676
677	.woocommerce-Price-amount {
678	font-weight: normal;
679	}
680	}
681
682	// Style the payment gateway selection input--improve the size of the click target, etc
683	input[type="radio"]="radio""][name="payment_method"]="payment_method""],
684	input[type="radio"]="radio""].shipping_method {
685	display: none;
686
687	& + label {
688
689	&::before {
690	content: "";
691	display: inline-block;
692	width: 1rem;
693	height: 1rem;
694	border: 2px solid var(--wp--preset--color--black);
695	background: var(--wp--preset--color--white);
696	margin-left: 4px;
697	margin-right: 1.2rem;
698	border-radius: 100%;
699	transform: translateY(0.2rem);
700	}
701	}
702
703	& ~ .payment_box {
704	padding-left: 3rem;
705	margin-top: 1rem;
706	}
707
708	&:checked + label {
709
710	&::before {
711	background: radial-gradient(circle at center, black 45%, white 0);
712	}
713	}
714	}
715
716	// Style labels like "Remember me?" or "Ship to different address".
717	label.woocommerce-form__label-for-checkbox {
718	font-weight: normal;
719	cursor: pointer;
720
721	span {
722
723	&::before {
724	content: "";
725	display: inline-block;
726	height: 1rem;
727	width: 1rem;
728	border: 2px solid var(--wp--preset--color--black);
729	background: var(--wp--preset--color--white);
730	margin-right: 0.5rem;
731	transform: translateY(0.2rem);
732	}
733	}
734
735	input[type="checkbox"]="checkbox""] {
736	display: none;
737	}
738
739	input[type="checkbox"]="checkbox""]:checked + span::before {
740	background: var(--wp--preset--color--black);
741	box-shadow: inset 0.2rem 0.2rem var(--wp--preset--color--white), inset -0.2rem -0.2rem var(--wp--preset--color--white);
742	}
743	}
744
745	// Cart totals, Cart page table or Order list in My Account.
746	table.shop_table_responsive {
747	text-align: left;
748
749	th,
750	td {
751	font-size: var(--wp--preset--font-size--small);
752	font-weight: normal;
753	}
754
755	th {
756	padding-bottom: 1rem;
757	}
758
759	tbody {
760
761	tr {
762	border-top: 1px solid var(--wp--preset--color--contrast);
763	}
764
765	td {
766	a.button,
767	button {
768	margin-bottom: 1rem;
769	padding: 0.5rem 1rem 0.5rem 1rem;
770	}
771
772	&.woocommerce-orders-table__cell-order-actions {
773	a.button {
774	display: block;
775
776	@media only screen and (max-width: 768px) {
777	width: 50%;
778	margin-left: auto;
779	}
780	}
781	}
782	}
783	}
784	}
785
786	table.shop_table,
787	table.shop_table_responsive {
788	tbody {
789	.product-name {
790
791	.variation {
792	dt {
793	font-style: italic;
794	margin-right: 0.25rem;
795	float: left;
796	}
797
798	dd {
799	font-style: normal;
800
801	a {
802	font-style: normal;
803	}
804	}
805	}
806	}
807	}
808
809	td,
810	th {
811	padding: 0.5rem;
812	}
813	}
814
815	// Improve styling of the 'Have a coupon?' section on the checkout page.
816	form.checkout_coupon {
817	padding-left: 1.5rem;
818	// 1.5 rem is to account for extra padding we added above.
819	width: calc(100% - 1.5rem);
820
821	.form-row {
822	button[name="apply_coupon"]="apply_coupon""] {
823	margin-top: 0;
824	}
825	}
826	}
827
828	// Hide the dot to the left of list items as we style the checkboxes: Shipping method and Payment method selection.
829	ul.wc_payment_methods,
830	ul.woocommerce-shipping-methods {
831	margin-top: 0;
832	margin-bottom: 0;
833	list-style-type: none;
834	padding-left: 0;
835
836	input[type="radio"]="radio""] {
837	margin-right: 0.6rem;
838	}
839
840	li.wc_payment_method {
841	margin-bottom: 1rem;
842	}
843	}
844
845	// PayPal logo in payment list on classic checkout page, more specific selector for precedence over general theme styles.
846	ul.wc_payment_methods li.payment_method_paypal img {
847	max-height: 24px;
848	vertical-align: middle;
849	float: right;
850	margin: 0;
851	}
852
853	// Layout of the checkout: Billing vs Shipping address, Cart overview, etc.
854	.woocommerce-checkout,
855	&.woocommerce-order-pay {
856	display: table;
857
858	h3 {
859	font-family: inherit;
860	font-size: var(--wp--preset--font-size--large);
861	font-weight: 700;
862	}
863
864	.col2-set {
865	width: 43%;
866	float: right;
867	}
868
869	.blockUI.blockOverlay {
870	position: relative;
871	@include loader();
872	}
873
874	#customer_details {
875	width: 53%;
876	float: left;
877
878	.col-1,
879	.col-2 {
880	width: 100%;
881	float: none;
882	}
883	}
884
885	@media only screen and (max-width: 768px) {
886	.col2-set,
887	#customer_details {
888	width: 100%;
889	float: none;
890	}
891	}
892
893	.woocommerce-billing-fields__field-wrapper,
894	.woocommerce-checkout-review-order-table,
895	.woocommerce-checkout-payment,
896	#payment {
897	margin-top: 4rem;
898	}
899
900	.woocommerce-checkout-review-order-table,
901	#order_review .shop_table {
902	border-collapse: collapse;
903	width: 100%;
904
905	thead {
906	display: none;
907	}
908
909	th {
910	text-align: left;
911	font-weight: normal;
912	}
913
914	th,
915	td {
916	padding: 1rem 1rem 1rem 0;
917	vertical-align: text-top;
918	}
919
920	tbody {
921	border-bottom: 1px solid #d2ced2;
922	}
923
924	tr.order-total {
925	border-top: 1px solid #d2ced2;
926	}
927
928	.product-quantity {
929	font-weight: normal;
930	}
931
932	.product-total,
933	.cart-subtotal,
934	.order-total,
935	.tax-rate,
936	input[type="radio"]="radio""].shipping_method:checked + label,
937	input[type="hidden"]="hidden""].shipping_method + label {
938	.woocommerce-Price-amount {
939	font-weight: bold;
940	}
941	}
942	}
943
944	button#place_order {
945	width: 100%;
946	text-transform: uppercase;
947	}
948	}
949
950	/*
951	Thank you page (after checkout).
952	*/
953
954	// Adds a tiny bit of vertical spacing on the Thank you (after checkout) page.
955	.woocommerce-order > * {
956	margin-bottom: var(--wp--style--block-gap);
957	}
958
959	// Bottom section of the Thank you page---customer details: align, add border, make it look nice.
960	.woocommerce-customer-details {
961	address {
962	border: 1px solid var(--wp--preset--color--black);
963	font-style: inherit;
964
965	p[class^="woocommerce-customer-details--"]^="woocommerce-customer-details--""] {
966	&:first-of-type {
967	margin-top: 2rem;
968	}
969
970	margin-top: 1rem;
971	margin-bottom: 0;
972	}
973
974	.woocommerce-customer-details--phone::before {
975	content: "\01F4DE";
976	margin-right: 1rem;
977	}
978
979	.woocommerce-customer-details--email::before {
980	content: "\2709";
981	margin-right: 1rem;
982	font-size: 1.8rem;
983	}
984	}
985	}
986
987	// Better styling for Order line items on the Thank you page: create a table and align it to the left side.
988	.woocommerce-table--order-details {
989	border: 1px solid var(--wp--preset--color--black);
990
991	th,
992	td {
993	text-align: left;
994	border-top: 1px solid var(--wp--preset--color--black);
995	border-bottom: 1px solid var(--wp--preset--color--black);
996	font-weight: normal;
997	}
998
999	thead th {
1000	text-transform: uppercase;
1001	}
1002
1003	.wc-item-meta {
1004	list-style-type: none;
1005	padding-inline-start: 2rem;
1006
1007	li > p {
1008	margin-block-start: 0.3rem;
1009	}
1010	}
1011	}
1012	}
1013
1014	/*
1015	My Account
1016	*/
1017
1018	.woocommerce-account {
1019
1020	// Make sure the floated content of My Account section doesn't overlap with the footer.
1021	.woocommerce {
1022	overflow: auto;
1023
1024	table.woocommerce-table--order-downloads,
1025	table.woocommerce-MyAccount-orders {
1026	thead tr {
1027	border-top: 2px solid var(--wp--preset--color--contrast);
1028
1029	span {
1030	font-weight: bold;
1031	}
1032
1033	}
1034
1035	tbody a.button {
1036	margin: calc(var(--wp--style--block-gap) / 6) 0;
1037	}
1038	}
1039
1040	.woocommerce-MyAccount-navigation li {
1041	&.is-active a {
1042	&::before {
1043	content: "> ";
1044	}
1045	}
1046
1047	a {
1048	text-decoration: initial;
1049
1050	&:hover {
1051	text-decoration: initial;
1052	}
1053	}
1054	}
1055
1056
1057	}
1058
1059	// Make the Log in form on My Account page less wide.
1060	.woocommerce-form-login {
1061	max-width: 516px;
1062	margin: 0 auto;
1063	}
1064
1065	}
1066
1067	// Store-wide notice
1068	.theme-twentytwentythree .woocommerce-store-notice {
1069	color: black;
1070	border-top: 2px solid var(--wp--preset--color--primary);
1071	background: lightgray;
1072	padding: 2rem;
1073	position: fixed;
1074	bottom: 0;
1075	left: 0;
1076	width: 100%;
1077	z-index: 999;
1078	margin: 0;
1079
1080	.woocommerce-store-notice__dismiss-link {
1081	float: right;
1082	margin-right: 4rem;
1083	color: inherit;
1084	}
1085	}
1086
1087	/*
1088	Notice messages (like 'Added to cart', 'Billing address needs to be filled in', etc.
1089	*/
1090	.woocommerce-message,
1091	.woocommerce-error,
1092	.woocommerce-info {
1093	background-color: rgba( 176, 176, 176, 0.6 );
1094	color: #222;
1095	border-top-color: var( --wp--preset--color--primary );
1096	border-top-style: solid;
1097	border-top-width: 2px;
1098	padding: 1rem 1.5rem 1rem 3.5rem;
1099	margin-bottom: 2rem;
1100	list-style: none;
1101	font-size: var( --wp--preset--font-size--small );
1102	position: relative;
1103
1104	@include clearfix();
1105
1106	&[role='alert']='alert']::before {
1107	background: #d5d5d5;
1108	color: black;
1109	border-radius: 5rem;
1110	font-size: 1rem;
1111	content: "\e028";
1112	display: inline-block;
1113	margin-right: 1rem;
1114	height: 1.5em;
1115	line-height: 1.5em;
1116	text-align: center;
1117	width: 1.5em;
1118	position: absolute;
1119	top: 1em;
1120	left: 1.5em;
1121	}
1122
1123	a.button {
1124	margin-bottom: -0.5rem;
1125	margin-top: -0.5rem;
1126	border: none;
1127	padding: 0.5rem 1rem;
1128	}
1129	}
1130
1131	.woocommerce-error {
1132	&[role='alert']='alert']::before {
1133	content: 'X';
1134	}
1135	}
1136
1137	.woocommerce-message {
1138	&[role='alert']='alert']::before {
1139	content: '\2713';
1140	}
1141	}
1142
1143	/**
1144	* Coupon error notice
1145	*/
1146	.woocommerce-cart {
1147	td.actions .coupon .coupon-error-notice {
1148	@include coupon-error-notice-cart();
1149	margin-top: 0;
1150	}
1151	}
1152
1153	form.checkout_coupon {
1154	.coupon-error-notice {
1155	@include coupon-error-notice-checkout();
1156	}
1157
1158	.input-text.has-error:focus {
1159	border-color: var(--wc-red);
1160	}
1161	}
1162
1163	/**
1164	* Checkout error message
1165	*/
1166	.woocommerce-checkout {
1167	form .form-row.woocommerce-invalid input.input-text {
1168	border-color: var(--wc-red);
1169	}
1170
1171	.checkout-inline-error-message {
1172	@include checkout-inline-error-message();
1173	}
1174	}
1175