twenty-twenty-three.scss — WooCommerce 9.4.0-rc.2

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

woocommerce / assets / css Last commit date

twenty-twenty-three.scss

1174 lines

1	/**
2	* Fonts
3	*/
4	@import "fonts";
5
6	@import "mixins";
7	@import "animation";
8
9
10	/*
11	Layout fix.
12	*/
13	.woocommerce-page {
14
15	main {
16	// This is to allow .woocommerce div to have width of 1000px on styles with full width layout (such as Pitch).
17	max-width: calc(1000px + var(--wp--style--root--padding-right) + var(--wp--style--root--padding-left));
18	margin-left: auto;
19	margin-right: auto;
20
21	.woocommerce {
22	@include clearfix();
23	}
24	}
25	}
26
27	.theme-twentytwentythree {
28	.container-colors {
29	display: flex;
30	flex-direction: row;
31	}
32
33	.cube {
34	width: 20%;
35	height: 100px;
36	text-align: center;
37	vert-align: middle;
38	}
39
40	.base {
41	background-color: var(--wp--preset--color--base);
42	}
43
44	.contrast {
45	background-color: var(--wp--preset--color--contrast);
46	color: var(--wp--preset--color--base);
47	}
48
49	.primary {
50	background-color: var(--wp--preset--color--primary);
51	}
52
53	.secondary {
54	background-color: var(--wp--preset--color--secondary);
55	}
56
57	.tertiary {
58	background-color: var(--wp--preset--color--tertiary);
59	}
60
61
62	}
63
64	.woocommerce {
65
66	/*
67	Common/global
68	*/
69
70	// Make quantity selector less wide.
71	.quantity {
72	input[type="number"]="number""] {
73	width: 3em;
74	}
75
76	input[type="number"]="number""]::-webkit-inner-spin-button,
77	input[type="number"]="number""]::-webkit-outer-spin-button {
78	opacity: 1;
79	}
80	}
81
82	// Breadcrumbs are unnecessary on the shop page.
83	&.woocommerce-shop .woocommerce-breadcrumb {
84	display: none;
85	}
86
87	// Make sure breadcrumbs are not overlapping with Sale badge on the Single product page, etc.
88	.woocommerce-breadcrumb {
89	margin-bottom: 1rem;
90	}
91	// Checkout notice group styling.
92	.woocommerce-NoticeGroup-checkout {
93	ul.woocommerce-error[role="alert"]="alert""] {
94	color: var(--wp--preset--color--contrast);
95	background: var(--wp--preset--color--primary);
96
97	&::before {
98	display: none;
99	}
100	li {
101	display: inherit;
102	margin-bottom: 1rem;
103	}
104	}
105	}
106
107	/*
108	Shop page.
109	*/
110
111	// Styling the buttons on the Shop page.
112	a.button,
113	button[name="add-to-cart"]="add-to-cart""],
114	input[name="submit"]="submit""],
115	button.single_add_to_cart_button,
116	button[type="submit"]="submit""]:not(.wp-block-search__button) {
117	display: inline-block;
118	text-align: center;
119	word-break: break-word;
120	padding: 1rem 2rem;
121	margin-top: 1rem;
122	text-decoration: none;
123	font-size: medium;
124	cursor: pointer;
125
126	}
127
128	// Style the 'Showing A-B of X results' text.
129	.woocommerce-result-count {
130	margin-top: 0;
131	}
132
133	// The 'order by' dropdown on the Shop page is rather tiny unless the font size is increased.
134	select.orderby {
135	font-size: var(--wp--preset--font-size--medium);
136	}
137
138	// Products.
139	ul.products {
140
141	padding-inline-start: 0;
142	display: flex;
143	align-items: stretch;
144	flex-direction: row;
145	flex-wrap: wrap;
146	justify-content: flex-start;
147	@media only screen and (max-width: 768px) {
148	justify-content: space-between;
149	}
150
151	li.product {
152	list-style: none;
153	margin-top: var(--wp--style--block-gap);
154	text-align: center;
155	display: flex;
156	flex-direction: column;
157	justify-content: space-between;
158	align-items: flex-start;
159
160	a.woocommerce-loop-product__link {
161	text-decoration: none;
162	display: block;
163	border: 0;
164	}
165
166	h2.woocommerce-loop-product__title {
167	color: var(--wp--preset--color--contrast);
168	font-family: var(--wp--preset--font-family--system-font);
169	text-decoration: none;
170	margin-bottom: 0;
171	}
172
173	h2.woocommerce-loop-category__title {
174	font-size: revert;
175	}
176
177	// Add to cart/Select options/Read more buttons.
178	a.button {
179	padding: 0.8rem 10%;
180	margin-left: auto;
181	margin-right: auto;
182
183	&.loading {
184	opacity: 0.5;
185	}
186	}
187
188	// View cart link.
189	a.added_to_cart {
190	margin: 1rem auto;
191	}
192
193	}
194	}
195
196	// Position page numbers under list of products horizontally in the centre of the page.
197	ul.page-numbers {
198	text-align: center;
199	}
200
201	// On sale badge.
202	span.onsale {
203	top: -1rem;
204	right: -1rem;
205	position: absolute;
206	background: var(--wp--preset--color--tertiary);
207	color: var(--wp--preset--color--contrast);
208	border-radius: 2rem;
209	line-height: 2.6rem;
210	font-size: 0.8rem;
211	padding: 0 0.5rem 0 0.5rem;
212	}
213
214	/*
215	Single product page.
216	*/
217
218	div.product {
219	position: relative;
220
221	> span.onsale {
222	position: absolute;
223	left: -1rem;
224	top: -1rem;
225	width: 1.8rem;
226	z-index: 1;
227	}
228
229	// How price gets displayed
230	.entry-summary {
231	.woocommerce-Price-amount,
232	del,
233	.price {
234	font-size: var(--wp--preset--font-size--large);
235	}
236	}
237
238	div.woocommerce-product-gallery {
239	position: relative;
240
241	a.woocommerce-product-gallery__trigger {
242	position: absolute;
243	top: 1rem;
244	right: 1rem;
245	z-index: 1;
246	text-decoration: none;
247	border-radius: 1rem;
248	border-style: solid;
249	line-height: 1.5rem;
250	padding: 0;
251	font-size: 0.6rem;
252	background: var(--wp--preset--color--white);
253	border-color: var(--wp--preset--color--white);
254	height: 1.5rem;
255	width: 1.5rem;
256	overflow: hidden;
257
258	&::before {
259	content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" focusable="false" viewBox="0 0 24 24" width="24" height="24"><path d="M13.5 6C10.5 6 8 8.5 8 11.5c0 1.1.3 2.1.9 3l-3.4 3 1 1.1 3.4-2.9c1 .9 2.2 1.4 3.6 1.4 3 0 5.5-2.5 5.5-5.5C19 8.5 16.5 6 13.5 6zm0 9.5c-2.2 0-4-1.8-4-4s1.8-4 4-4 4 1.8 4 4-1.8 4-4 4z" /></svg>');
260	display: block;
261	transform: rotateY(180deg);
262	margin-left: 1.55rem;
263	}
264	}
265
266	figure.woocommerce-product-gallery__wrapper,
267	div.woocommerce-product-gallery__wrapper {
268	margin: 0;
269	}
270
271	}
272
273	div.summary {
274	font-size: 1rem;
275
276	h1.product_title {
277	font-size: var(--wp--preset--font-size--huge);
278	margin: 0;
279	}
280
281	figure.woocommerce-product-gallery__wrapper,
282	div.woocommerce-product-gallery__wrapper {
283	margin: 0;
284	}
285
286	.woocommerce-product-rating {
287	.star-rating {
288	display: inline-block;
289	}
290	.woocommerce-review-link {
291	display: inline-block;
292	overflow: hidden;
293	position: relative;
294	top: -0.5em;
295	font-size: 1em;
296	}
297	}
298	}
299
300	table.variations tr {
301
302	display: table-row;
303	margin-bottom: 0;
304	text-align: left;
305
306	td select {
307	margin: calc(var(--wp--style--block-gap) / 4) 0;
308	}
309	}
310
311	.single_variation_wrap {
312	margin-top: var(--wp--style--block-gap);
313
314	// Prevent height flickering when selecting a variation.
315	.single_variation .woocommerce-variation-description > :first-child {
316	margin-top: 0;
317	}
318	}
319
320	ol.flex-control-thumbs {
321	padding-left: 0;
322	float: left;
323
324	li {
325	list-style: none;
326	cursor: pointer;
327	float: left;
328	width: 18%;
329	margin-right: 1rem;
330	}
331
332	}
333
334	a.reset_variations {
335	margin-left: 0.5em;
336	}
337
338	table.group_table {
339	td {
340	padding-right: 0.5rem;
341	padding-bottom: 1rem;
342	}
343
344	margin-bottom: var(--wp--style--block-gap);
345	}
346
347	.related.products {
348	margin-top: 7rem;
349	clear: both;
350	}
351
352	.upsells.products {
353	clear: both;
354	}
355	}
356
357	// Reviews tab.
358	.woocommerce-Reviews {
359	ol.commentlist {
360	list-style: none;
361	padding-left: 0;
362
363	li {
364	margin-bottom: var(--wp--style--block-gap);
365	}
366
367	img.avatar {
368	float: left;
369	}
370
371	p.meta {
372	font-size: 1rem;
373	}
374
375	.comment-text {
376	display: flow-root;
377	padding-left: var(--wp--style--block-gap);
378
379	.star-rating {
380	margin-top: 0;
381	margin-right: unset;
382	margin-left: unset;
383	}
384	}
385	}
386
387	.comment-form-rating {
388	label {
389	display: inline-block;
390	padding-right: var(--wp--style--block-gap);
391	padding-top: var(--wp--style--block-gap);
392	}
393
394	p.stars {
395	display: inline;
396	a::before {
397	color: var(--wp--preset--color--contrast);
398	}
399	}
400	}
401
402	.comment-form-comment {
403	label {
404	float: left;
405	padding-right: var(--wp--style--block-gap);
406	}
407	}
408
409	#review_form_wrapper {
410	margin-top: 5rem;
411	}
412	}
413
414	// Rating: show stars instead of 1, 2, 3, 4, 5.
415	.star-rating {
416	overflow: hidden;
417	position: relative;
418	height: 1em;
419	line-height: 1;
420	width: 5.4rem;
421	font-family: WooCommerce;
422	font-style: normal;
423	color: var(--wp--preset--color--contrast);
424	margin: 1rem auto 0.7rem auto;
425
426	&::before {
427	content: "\73\73\73\73\73";
428	float: left;
429	top: 0;
430	left: 0;
431	position: absolute;
432	font-size: 1rem;
433	}
434
435	span {
436	overflow: hidden;
437	float: left;
438	top: 0;
439	left: 0;
440	position: absolute;
441	padding-top: 1.5em;
442	}
443
444	span::before {
445	content: "\53\53\53\53\53";
446	top: 0;
447	position: absolute;
448	left: 0;
449	font-size: 1rem;
450	}
451	}
452
453	// Rating stars.
454	p.stars {
455	margin-top: 0;
456
457	a {
458	position: relative;
459	height: 1em;
460	width: 1em;
461	text-indent: -999em;
462	display: inline-block;
463	text-decoration: none;
464	box-shadow: none;
465	font-style: normal;
466
467	&::before {
468	display: block;
469	position: absolute;
470	top: 0;
471	left: 0;
472	width: 1em;
473	height: 1em;
474	line-height: 1;
475	font-family: WooCommerce;
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	// Layout of the checkout: Billing vs Shipping address, Cart overview, etc.
846	.woocommerce-checkout,
847	&.woocommerce-order-pay {
848	display: table;
849
850	h3 {
851	font-family: inherit;
852	font-size: var(--wp--preset--font-size--large);
853	font-weight: 700;
854	}
855
856	.col2-set {
857	width: 43%;
858	float: right;
859	}
860
861	.blockUI.blockOverlay {
862	position: relative;
863	@include loader();
864	}
865
866	#customer_details {
867	width: 53%;
868	float: left;
869
870	.col-1,
871	.col-2 {
872	width: 100%;
873	float: none;
874	}
875	}
876
877	@media only screen and (max-width: 768px) {
878	.col2-set,
879	#customer_details {
880	width: 100%;
881	float: none;
882	}
883	}
884
885	.woocommerce-billing-fields__field-wrapper,
886	.woocommerce-checkout-review-order-table,
887	.woocommerce-checkout-payment,
888	#payment {
889	margin-top: 4rem;
890	}
891
892	.woocommerce-checkout-review-order-table,
893	#order_review .shop_table {
894	border-collapse: collapse;
895	width: 100%;
896
897	thead {
898	display: none;
899	}
900
901	th {
902	text-align: left;
903	font-weight: normal;
904	}
905
906	th,
907	td {
908	padding: 1rem 1rem 1rem 0;
909	vertical-align: text-top;
910	}
911
912	tbody {
913	border-bottom: 1px solid #d2ced2;
914	}
915
916	tr.order-total {
917	border-top: 1px solid #d2ced2;
918	}
919
920	.product-quantity {
921	font-weight: normal;
922	}
923
924	.product-total,
925	.cart-subtotal,
926	.order-total,
927	.tax-rate,
928	input[type="radio"]="radio""].shipping_method:checked + label,
929	input[type="hidden"]="hidden""].shipping_method + label {
930	.woocommerce-Price-amount {
931	font-weight: bold;
932	}
933	}
934	}
935
936	button#place_order {
937	width: 100%;
938	text-transform: uppercase;
939	}
940	}
941
942	/*
943	Thank you page (after checkout).
944	*/
945
946	// Adds a tiny bit of vertical spacing on the Thank you (after checkout) page.
947	.woocommerce-order > * {
948	margin-bottom: var(--wp--style--block-gap);
949	}
950
951	// Bottom section of the Thank you page---customer details: align, add border, make it look nice.
952	.woocommerce-customer-details {
953	address {
954	border: 1px solid var(--wp--preset--color--black);
955	font-style: inherit;
956
957	p[class^="woocommerce-customer-details--"]^="woocommerce-customer-details--""] {
958	&:first-of-type {
959	margin-top: 2rem;
960	}
961
962	margin-top: 1rem;
963	margin-bottom: 0;
964	}
965
966	.woocommerce-customer-details--phone::before {
967	content: "\01F4DE";
968	margin-right: 1rem;
969	}
970
971	.woocommerce-customer-details--email::before {
972	content: "\2709";
973	margin-right: 1rem;
974	font-size: 1.8rem;
975	}
976	}
977	}
978
979	// Better styling for Order line items on the Thank you page: create a table and align it to the left side.
980	.woocommerce-table--order-details {
981	border: 1px solid var(--wp--preset--color--black);
982
983	th,
984	td {
985	text-align: left;
986	border-top: 1px solid var(--wp--preset--color--black);
987	border-bottom: 1px solid var(--wp--preset--color--black);
988	font-weight: normal;
989	}
990
991	thead th {
992	text-transform: uppercase;
993	}
994
995	.wc-item-meta {
996	list-style-type: none;
997	padding-inline-start: 2rem;
998
999	li > p {
1000	margin-block-start: 0.3rem;
1001	}
1002	}
1003	}
1004	}
1005
1006	/*
1007	My Account
1008	*/
1009
1010	.woocommerce-account {
1011
1012	// Make sure the floated content of My Account section doesn't overlap with the footer.
1013	.woocommerce {
1014	overflow: auto;
1015
1016	table.woocommerce-table--order-downloads,
1017	table.woocommerce-MyAccount-orders {
1018	thead tr {
1019	border-top: 2px solid var(--wp--preset--color--contrast);
1020
1021	span {
1022	font-weight: bold;
1023	}
1024
1025	}
1026
1027	tbody a.button {
1028	margin: calc(var(--wp--style--block-gap) / 6) 0;
1029	}
1030	}
1031
1032	.woocommerce-MyAccount-navigation li {
1033	&.is-active a {
1034	&::before {
1035	content: "> ";
1036	}
1037	}
1038
1039	a {
1040	text-decoration: initial;
1041
1042	&:hover {
1043	text-decoration: initial;
1044	}
1045	}
1046	}
1047
1048
1049	}
1050
1051	// Make the Log in form on My Account page less wide.
1052	.woocommerce-form-login {
1053	max-width: 516px;
1054	margin: 0 auto;
1055	}
1056
1057	}
1058
1059	// TODO: This could look nicer.
1060	.select2-container {
1061
1062	.select2-selection,
1063	.select2-dropdown {
1064	border: 1px solid var(--wp--preset--color--black);
1065	border-radius: 0;
1066	}
1067
1068	.select2-dropdown {
1069	border-top: 0;
1070
1071	.select2-search__field {
1072	border: 1px solid var(--wp--preset--color--black);
1073	border-radius: 0;
1074	}
1075	}
1076	}
1077
1078
1079	// Store-wide notice
1080	.theme-twentytwentythree .woocommerce-store-notice {
1081	color: black;
1082	border-top: 2px solid var(--wp--preset--color--primary);
1083	background: lightgray;
1084	padding: 2rem;
1085	position: fixed;
1086	bottom: 0;
1087	left: 0;
1088	width: 100%;
1089	z-index: 999;
1090	margin: 0;
1091
1092	.woocommerce-store-notice__dismiss-link {
1093	float: right;
1094	margin-right: 4rem;
1095	color: inherit;
1096	}
1097	}
1098
1099	/*
1100	Notice messages (like 'Added to cart', 'Billing address needs to be filled in', etc.
1101	*/
1102	.woocommerce-message,
1103	.woocommerce-error,
1104	.woocommerce-info {
1105	background-color: rgba( 176, 176, 176, 0.6 );
1106	color: #222;
1107	border-top-color: var( --wp--preset--color--primary );
1108	border-top-style: solid;
1109	border-top-width: 2px;
1110	padding: 1rem 1.5rem 1rem 3.5rem;
1111	margin-bottom: 2rem;
1112	list-style: none;
1113	font-size: var( --wp--preset--font-size--small );
1114	position: relative;
1115
1116	@include clearfix();
1117
1118	&[role='alert']='alert']::before {
1119	background: #d5d5d5;
1120	color: black;
1121	border-radius: 5rem;
1122	font-size: 1rem;
1123	content: "\e028";
1124	display: inline-block;
1125	margin-right: 1rem;
1126	height: 1.5em;
1127	line-height: 1.5em;
1128	text-align: center;
1129	width: 1.5em;
1130	position: absolute;
1131	top: 1em;
1132	left: 1.5em;
1133	}
1134
1135	a.button {
1136	margin-bottom: -0.5rem;
1137	margin-top: -0.5rem;
1138	border: none;
1139	padding: 0.5rem 1rem;
1140	}
1141	}
1142
1143	.woocommerce-error {
1144	&[role='alert']='alert']::before {
1145	content: 'X';
1146	}
1147	}
1148
1149	.woocommerce-message {
1150	&[role='alert']='alert']::before {
1151	content: '\2713';
1152	}
1153	}
1154
1155	/**
1156	* Coupon error notice
1157	*/
1158	.woocommerce-cart {
1159	td.actions .coupon .coupon-error-notice {
1160	@include coupon-error-notice-cart();
1161	margin-top: 0;
1162	}
1163	}
1164
1165	form.checkout_coupon {
1166	.coupon-error-notice {
1167	@include coupon-error-notice-checkout();
1168	}
1169
1170	.input-text.has-error:focus {
1171	border-color: var(--wc-red);
1172	}
1173	}
1174