_dsgnsystm: Replace drop-down arrow with open(+) and close(x) icons

_dsgnsystm/header.php

@@ -32,6 +32,8 @@
 					<input type="checkbox" role="button" aria-haspopup="true" id="toggle" class="hide-visually">
 					<label for="toggle" id="toggle-menu" class="button">
 						<?php _e( 'Menu', '_dsgnsystm' ); ?>
+						<span class="dropdown-icon open">+</span>
+						<span class="dropdown-icon close">&times;</span>
 						<span class="hide-visually expanded-text">expanded</span>
 						<span class="hide-visually collapsed-text">collapsed</span>
 					</label>

_dsgnsystm/sass/components/header/_site-main-navigation.scss

@@ -26,6 +26,20 @@
 		text-decoration: underline;
 	}
 
+	.dropdown-icon.close {
+		display: none;
+	}
+
+	#toggle:checked + #toggle-menu {
+		.open {
+			display: none;
+		}
+
+		.close {
+			display: inline;
+		}
+	}
+
 	@include media(mobile) {
 
 		& > div {

_dsgnsystm/style-rtl.css

@@ -1973,6 +1973,18 @@ table th,
 	display: block;
 }
 
+.main-navigation .dropdown-icon.close {
+	display: none;
+}
+
+.main-navigation #toggle:checked + #toggle-menu .open {
+	display: none;
+}
+
+.main-navigation #toggle:checked + #toggle-menu .close {
+	display: inline;
+}
+
 .main-navigation #toggle:focus + #toggle-menu {
 	background-color: indigo;
 	outline: inherit;

_dsgnsystm/style.css

@@ -1984,6 +1984,18 @@ table th,
 	text-decoration: underline;
 }
 
+.main-navigation .dropdown-icon.close {
+	display: none;
+}
+
+.main-navigation #toggle:checked + #toggle-menu .open {
+	display: none;
+}
+
+.main-navigation #toggle:checked + #toggle-menu .close {
+	display: inline;
+}
+
 @media only screen and (min-width: 560px) {
 	.main-navigation > div {
 		display: block;