twenty-twenty-three.scss — WooCommerce 7.7.0-rc.1

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

woocommerce / assets / css Last commit date

twenty-twenty-three.scss

1162 lines

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