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

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

woocommerce / assets / css Last commit date

twenty-twenty-three.scss

1198 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	div.woocommerce-product-gallery__wrapper {
290	margin: 0;
291	}
292
293	}
294
295	div.summary {
296	font-size: 1rem;
297
298	h1.product_title {
299	font-size: var(--wp--preset--font-size--huge);
300	margin: 0;
301	}
302
303	figure.woocommerce-product-gallery__wrapper,
304	div.woocommerce-product-gallery__wrapper {
305	margin: 0;
306	}
307
308	.woocommerce-product-rating {
309	.star-rating {
310	display: inline-block;
311	}
312	.woocommerce-review-link {
313	display: inline-block;
314	overflow: hidden;
315	position: relative;
316	top: -0.5em;
317	font-size: 1em;
318	}
319	}
320	}
321
322	table.variations tr {
323
324	display: table-row;
325	margin-bottom: 0;
326	text-align: left;
327
328	td select {
329	margin: calc(var(--wp--style--block-gap) / 4) 0;
330	}
331	}
332
333	.single_variation_wrap {
334	margin-top: var(--wp--style--block-gap);
335
336	// Prevent height flickering when selecting a variation.
337	.single_variation .woocommerce-variation-description > :first-child {
338	margin-top: 0;
339	}
340	}
341
342	ol.flex-control-thumbs {
343	padding-left: 0;
344	float: left;
345
346	li {
347	list-style: none;
348	cursor: pointer;
349	float: left;
350	width: 18%;
351	margin-right: 1rem;
352	}
353
354	}
355
356	a.reset_variations {
357	margin-left: 0.5em;
358	}
359
360	table.group_table {
361	td {
362	padding-right: 0.5rem;
363	padding-bottom: 1rem;
364	}
365
366	margin-bottom: var(--wp--style--block-gap);
367	}
368
369	.related.products {
370	margin-top: 7rem;
371	clear: both;
372	}
373
374	.upsells.products {
375	clear: both;
376	}
377	}
378
379	// Reviews tab.
380	.woocommerce-Reviews {
381	ol.commentlist {
382	list-style: none;
383	padding-left: 0;
384
385	li {
386	margin-bottom: var(--wp--style--block-gap);
387	}
388
389	img.avatar {
390	float: left;
391	}
392
393	p.meta {
394	font-size: 1rem;
395	}
396
397	.comment-text {
398	display: flow-root;
399	padding-left: var(--wp--style--block-gap);
400
401	.star-rating {
402	margin-top: 0;
403	margin-right: unset;
404	margin-left: unset;
405	}
406	}
407	}
408
409	.comment-form-rating {
410	label {
411	display: inline-block;
412	padding-right: var(--wp--style--block-gap);
413	padding-top: var(--wp--style--block-gap);
414	}
415
416	p.stars {
417	display: inline;
418	a::before {
419	color: var(--wp--preset--color--contrast);
420	}
421	}
422	}
423
424	.comment-form-comment {
425	label {
426	float: left;
427	padding-right: var(--wp--style--block-gap);
428	}
429	}
430
431	#review_form_wrapper {
432	margin-top: 5rem;
433	}
434	}
435
436	// Rating: show stars instead of 1, 2, 3, 4, 5.
437	.star-rating {
438	overflow: hidden;
439	position: relative;
440	height: 1em;
441	line-height: 1;
442	width: 5.4rem;
443	font-family: star;
444	font-style: normal;
445	color: var(--wp--preset--color--contrast);
446	margin: 1rem auto 0.7rem auto;
447
448	&::before {
449	content: "\73\73\73\73\73";
450	float: left;
451	top: 0;
452	left: 0;
453	position: absolute;
454	font-size: 1rem;
455	}
456
457	span {
458	overflow: hidden;
459	float: left;
460	top: 0;
461	left: 0;
462	position: absolute;
463	padding-top: 1.5em;
464	}
465
466	span::before {
467	content: "\53\53\53\53\53";
468	top: 0;
469	position: absolute;
470	left: 0;
471	font-size: 1rem;
472	}
473	}
474
475	// Rating stars.
476	p.stars {
477	margin-top: 0;
478
479	a {
480	position: relative;
481	height: 1em;
482	width: 1em;
483	text-indent: -999em;
484	display: inline-block;
485	text-decoration: none;
486	box-shadow: none;
487	font-style: normal;
488
489	&::before {
490	display: block;
491	position: absolute;
492	top: 0;
493	left: 0;
494	width: 1em;
495	height: 1em;
496	line-height: 1;
497	font-family: WooCommerce;
498	content: "\e021";
499	text-indent: 0;
500	}
501
502	&:hover {
503
504	~ a::before {
505	content: "\e021";
506	}
507	}
508	}
509
510	&:hover {
511
512	a {
513
514	&::before {
515	content: "\e020";
516	}
517	}
518	}
519
520	&.selected {
521
522	a.active {
523
524	&::before {
525	content: "\e020";
526	}
527
528	~ a::before {
529	content: "\e021";
530	}
531	}
532
533	a:not(.active) {
534
535	&::before {
536	content: "\e020";
537	}
538	}
539	}
540	}
541
542	// Highlights for specific info, e.g. on the My Account > Orders > Order X: Order ___ was placed on ____
543	mark {
544	font-weight: bold;
545	background-color: transparent;
546	}
547
548	}
549
550	// Description/Additional info/Reviews tabs.
551	.woocommerce-tabs {
552	padding-top: var(--wp--style--block-gap);
553	}
554
555	ul.wc-tabs {
556	padding: 0;
557	border-bottom-style: solid;
558	border-bottom-width: 1px;
559	border-bottom-color: #eae9eb;
560
561	li {
562	opacity: 0.5;
563	color: var(--wp--preset--color--contrast);
564	margin: 0;
565	padding: 0.5em 1em 0.5em 1em;
566	border-color: #eae9eb;
567	border-top-left-radius: 5px;
568	border-top-right-radius: 5px;
569	float: left;
570	border-style: solid;
571	border-width: 1px;
572	font-weight: 600;
573	font-size: var(--wp--preset--font-size--medium);
574
575	&:first-child {
576	border-left-color: #eae9eb;
577	margin-left: 1em;
578	}
579
580	&.active {
581	background: var(--wp--preset--color--tertiary);
582	color: var(--wp--preset--color--contrast);
583	opacity: 1;
584	}
585
586	a {
587	text-decoration: none;
588	color: var(--wp--preset--color--contrast);
589	}
590	}
591	}
592
593	.woocommerce-Tabs-panel {
594	padding-top: var(--wp--style--block-gap);
595	font-size: var(--wp--preset--font-size--small);
596	margin-left: 1em;
597
598	// Hide repeated heading.
599	h2:first-of-type {
600	display: none;
601	}
602
603	// Attributes table styles.
604	table.woocommerce-product-attributes {
605	tbody {
606
607	td, th {
608	padding: 0.2rem 0.2rem 0.2rem 0;
609
610	p {
611	margin: 0;
612	}
613	}
614
615	th {
616	text-align: left;
617	padding-right: 1rem;
618	}
619	}
620	}
621	}
622
623	.woocommerce-page {
624	.woocommerce-cart-form {
625
626	// Make coupon code input less ginormous.
627	#coupon_code {
628	padding: 0 1rem;
629	}
630
631	.actions {
632	button.button {
633	height: initial;
634	}
635	}
636
637	// Cart table, aka review of cart items.
638	table.shop_table_responsive {
639
640	td,
641	th {
642	padding: 1rem 0 0.5rem 1rem;
643	}
644
645	tbody {
646
647	tr:last-of-type {
648	border-top: none;
649	}
650
651	@media only screen and (max-width: 768px) {
652	td {
653	padding-left: 0;
654	}
655
656	.product-remove {
657	text-align: left !important;
658	}
659
660	#coupon_code {
661	float: left;
662	margin-bottom: 1rem;
663	}
664	}
665	}
666
667	.product-remove {
668	font-size: var(--wp--preset--font-size--large);
669
670	a {
671	text-decoration: none;
672	}
673	}
674	}
675	}
676
677	// Elements around "Proceed to Checkout" button.
678	.cart-collaterals {
679	margin-top: 1.5rem;
680
681	h2 {
682	text-transform: uppercase;
683	font-family: inherit;
684	}
685
686	table.shop_table_responsive {
687
688	tr {
689	border-top: none;
690	}
691
692	th {
693	width: 11rem;
694	}
695
696	td,
697	th {
698	padding: 1rem 0;
699	vertical-align: text-top;
700	}
701	}
702
703	button[name="calc_shipping"]="calc_shipping""] {
704	padding: 1rem 2rem;
705	}
706
707	.woocommerce-Price-amount {
708	font-weight: normal;
709	}
710	}
711
712	// Style the payment gateway selection input--improve the size of the click target, etc
713	input[type="radio"]="radio""][name="payment_method"]="payment_method""],
714	input[type="radio"]="radio""].shipping_method {
715	display: none;
716
717	& + label {
718
719	&::before {
720	content: "";
721	display: inline-block;
722	width: 1rem;
723	height: 1rem;
724	border: 2px solid var(--wp--preset--color--black);
725	background: var(--wp--preset--color--white);
726	margin-left: 4px;
727	margin-right: 1.2rem;
728	border-radius: 100%;
729	transform: translateY(0.2rem);
730	}
731	}
732
733	& ~ .payment_box {
734	padding-left: 3rem;
735	margin-top: 1rem;
736	}
737
738	&:checked + label {
739
740	&::before {
741	background: radial-gradient(circle at center, black 45%, white 0);
742	}
743	}
744	}
745
746	// Style labels like "Remember me?" or "Ship to different address".
747	label.woocommerce-form__label-for-checkbox {
748	font-weight: normal;
749	cursor: pointer;
750
751	span {
752
753	&::before {
754	content: "";
755	display: inline-block;
756	height: 1rem;
757	width: 1rem;
758	border: 2px solid var(--wp--preset--color--black);
759	background: var(--wp--preset--color--white);
760	margin-right: 0.5rem;
761	transform: translateY(0.2rem);
762	}
763	}
764
765	input[type="checkbox"]="checkbox""] {
766	display: none;
767	}
768
769	input[type="checkbox"]="checkbox""]:checked + span::before {
770	background: var(--wp--preset--color--black);
771	box-shadow: inset 0.2rem 0.2rem var(--wp--preset--color--white), inset -0.2rem -0.2rem var(--wp--preset--color--white);
772	}
773	}
774
775	// Cart totals, Cart page table or Order list in My Account.
776	table.shop_table_responsive {
777	text-align: left;
778
779	th,
780	td {
781	font-size: var(--wp--preset--font-size--small);
782	font-weight: normal;
783	}
784
785	th {
786	padding-bottom: 1rem;
787	}
788
789	tbody {
790
791	tr {
792	border-top: 1px solid var(--wp--preset--color--contrast);
793	}
794
795	td {
796	a.button,
797	button {
798	margin-bottom: 1rem;
799	padding: 0.5rem 1rem 0.5rem 1rem;
800	}
801
802	&.woocommerce-orders-table__cell-order-actions {
803	a.button {
804	display: block;
805
806	@media only screen and (max-width: 768px) {
807	width: 50%;
808	margin-left: auto;
809	}
810	}
811	}
812	}
813	}
814	}
815
816	table.shop_table,
817	table.shop_table_responsive {
818	tbody {
819	.product-name {
820
821	.variation {
822	dt {
823	font-style: italic;
824	margin-right: 0.25rem;
825	float: left;
826	}
827
828	dd {
829	font-style: normal;
830
831	a {
832	font-style: normal;
833	}
834	}
835	}
836	}
837	}
838
839	td,
840	th {
841	padding: 0.5rem;
842	}
843	}
844
845	// Improve styling of the 'Have a coupon?' section on the checkout page.
846	form.checkout_coupon {
847	padding-left: 1.5rem;
848	// 1.5 rem is to account for extra padding we added above.
849	width: calc(100% - 1.5rem);
850
851	.form-row {
852	button[name="apply_coupon"]="apply_coupon""] {
853	margin-top: 0;
854	}
855	}
856	}
857
858	// Hide the dot to the left of list items as we style the checkboxes: Shipping method and Payment method selection.
859	ul.wc_payment_methods,
860	ul.woocommerce-shipping-methods {
861	margin-top: 0;
862	margin-bottom: 0;
863	list-style-type: none;
864	padding-left: 0;
865
866	input[type="radio"]="radio""] {
867	margin-right: 0.6rem;
868	}
869
870	li.wc_payment_method {
871	margin-bottom: 1rem;
872	}
873	}
874
875	// Layout of the checkout: Billing vs Shipping address, Cart overview, etc.
876	.woocommerce-checkout,
877	&.woocommerce-order-pay {
878	display: table;
879
880	h3 {
881	font-family: inherit;
882	font-size: var(--wp--preset--font-size--large);
883	font-weight: 700;
884	}
885
886	.col2-set {
887	width: 43%;
888	float: right;
889	}
890
891	.blockUI.blockOverlay {
892	position: relative;
893	@include loader();
894	}
895
896	#customer_details {
897	width: 53%;
898	float: left;
899
900	.col-1,
901	.col-2 {
902	width: 100%;
903	float: none;
904	}
905	}
906
907	@media only screen and (max-width: 768px) {
908	.col2-set,
909	#customer_details {
910	width: 100%;
911	float: none;
912	}
913	}
914
915	.woocommerce-billing-fields__field-wrapper,
916	.woocommerce-checkout-review-order-table,
917	.woocommerce-checkout-payment,
918	#payment {
919	margin-top: 4rem;
920	}
921
922	.woocommerce-checkout-review-order-table,
923	#order_review .shop_table {
924	border-collapse: collapse;
925	width: 100%;
926
927	thead {
928	display: none;
929	}
930
931	th {
932	text-align: left;
933	font-weight: normal;
934	}
935
936	th,
937	td {
938	padding: 1rem 1rem 1rem 0;
939	vertical-align: text-top;
940	}
941
942	tbody {
943	border-bottom: 1px solid #d2ced2;
944	}
945
946	tr.order-total {
947	border-top: 1px solid #d2ced2;
948	}
949
950	.product-quantity {
951	font-weight: normal;
952	}
953
954	.product-total,
955	.cart-subtotal,
956	.order-total,
957	.tax-rate,
958	input[type="radio"]="radio""].shipping_method:checked + label,
959	input[type="hidden"]="hidden""].shipping_method + label {
960	.woocommerce-Price-amount {
961	font-weight: bold;
962	}
963	}
964	}
965
966	button#place_order {
967	width: 100%;
968	text-transform: uppercase;
969	}
970	}
971
972	/*
973	Thank you page (after checkout).
974	*/
975
976	// Adds a tiny bit of vertical spacing on the Thank you (after checkout) page.
977	.woocommerce-order > * {
978	margin-bottom: var(--wp--style--block-gap);
979	}
980
981	// Improves the presentation of order overview (order #, date, email, etc, not the line items) on the Thank you page.
982	ul.woocommerce-order-overview {
983
984	li {
985	display: inline;
986	text-transform: uppercase;
987
988	strong {
989	text-transform: none;
990	display: block;
991	}
992	}
993	}
994
995	// Bottom section of the Thank you page---customer details: align, add border, make it look nice.
996	.woocommerce-customer-details {
997	address {
998	border: 1px solid var(--wp--preset--color--black);
999	font-style: inherit;
1000
1001	p[class^="woocommerce-customer-details--"]^="woocommerce-customer-details--""] {
1002	&:first-of-type {
1003	margin-top: 2rem;
1004	}
1005
1006	margin-top: 1rem;
1007	margin-bottom: 0;
1008	}
1009
1010	.woocommerce-customer-details--phone::before {
1011	content: "\01F4DE";
1012	margin-right: 1rem;
1013	}
1014
1015	.woocommerce-customer-details--email::before {
1016	content: "\2709";
1017	margin-right: 1rem;
1018	font-size: 1.8rem;
1019	}
1020	}
1021	}
1022
1023	// Better styling for Order line items on the Thank you page: create a table and align it to the left side.
1024	.woocommerce-table--order-details {
1025	border: 1px solid var(--wp--preset--color--black);
1026
1027	th,
1028	td {
1029	text-align: left;
1030	border-top: 1px solid var(--wp--preset--color--black);
1031	border-bottom: 1px solid var(--wp--preset--color--black);
1032	font-weight: normal;
1033	}
1034
1035	thead th {
1036	text-transform: uppercase;
1037	}
1038
1039	.wc-item-meta {
1040	list-style-type: none;
1041	padding-inline-start: 2rem;
1042
1043	li > p {
1044	margin-block-start: 0.3rem;
1045	}
1046	}
1047	}
1048	}
1049
1050	/*
1051	My Account
1052	*/
1053
1054	.woocommerce-account {
1055
1056	// Make sure the floated content of My Account section doesn't overlap with the footer.
1057	.woocommerce {
1058	overflow: auto;
1059
1060	table.woocommerce-table--order-downloads,
1061	table.woocommerce-MyAccount-orders {
1062	thead tr {
1063	border-top: 2px solid var(--wp--preset--color--contrast);
1064
1065	span {
1066	font-weight: bold;
1067	}
1068
1069	}
1070
1071	tbody a.button {
1072	margin: calc(var(--wp--style--block-gap) / 6) 0;
1073	}
1074	}
1075
1076	.woocommerce-MyAccount-navigation li {
1077	&.is-active a {
1078	&::before {
1079	content: "> ";
1080	}
1081	}
1082
1083	a {
1084	text-decoration: initial;
1085
1086	&:hover {
1087	text-decoration: initial;
1088	}
1089	}
1090	}
1091
1092
1093	}
1094
1095	// Make the Log in form on My Account page less wide.
1096	.woocommerce-form-login {
1097	max-width: 516px;
1098	margin: 0 auto;
1099	}
1100
1101	}
1102
1103	// TODO: This could look nicer.
1104	.select2-container {
1105
1106	.select2-selection,
1107	.select2-dropdown {
1108	border: 1px solid var(--wp--preset--color--black);
1109	border-radius: 0;
1110	}
1111
1112	.select2-dropdown {
1113	border-top: 0;
1114
1115	.select2-search__field {
1116	border: 1px solid var(--wp--preset--color--black);
1117	border-radius: 0;
1118	}
1119	}
1120	}
1121
1122
1123	// Store-wide notice
1124	.theme-twentytwentythree .woocommerce-store-notice {
1125	color: black;
1126	border-top: 2px solid var(--wp--preset--color--primary);
1127	background: lightgray;
1128	padding: 2rem;
1129	position: fixed;
1130	bottom: 0;
1131	left: 0;
1132	width: 100%;
1133	z-index: 999;
1134	margin: 0;
1135
1136	.woocommerce-store-notice__dismiss-link {
1137	float: right;
1138	margin-right: 4rem;
1139	color: inherit;
1140	}
1141	}
1142
1143	/*
1144	Notice messages (like 'Added to cart', 'Billing address needs to be filled in', etc.
1145	*/
1146	.woocommerce-message,
1147	.woocommerce-error,
1148	.woocommerce-info {
1149	background-color: rgba( 176, 176, 176, 0.6 );
1150	color: #222;
1151	border-top-color: var( --wp--preset--color--primary );
1152	border-top-style: solid;
1153	border-top-width: 2px;
1154	padding: 1rem 1.5rem 1rem 3.5rem;
1155	margin-bottom: 2rem;
1156	list-style: none;
1157	font-size: var( --wp--preset--font-size--small );
1158	position: relative;
1159
1160	@include clearfix();
1161
1162	&[role='alert']='alert']::before {
1163	background: #d5d5d5;
1164	color: black;
1165	border-radius: 5rem;
1166	font-size: 1rem;
1167	content: "\e028";
1168	display: inline-block;
1169	margin-right: 1rem;
1170	height: 1.5em;
1171	line-height: 1.5em;
1172	text-align: center;
1173	width: 1.5em;
1174	position: absolute;
1175	top: 1em;
1176	left: 1.5em;
1177	}
1178
1179	a.button {
1180	margin-bottom: -0.5rem;
1181	margin-top: -0.5rem;
1182	border: none;
1183	padding: 0.5rem 1rem;
1184	}
1185	}
1186
1187	.woocommerce-error {
1188	&[role='alert']='alert']::before {
1189	content: 'X';
1190	}
1191	}
1192
1193	.woocommerce-message {
1194	&[role='alert']='alert']::before {
1195	content: '\2713';
1196	}
1197	}
1198