do not output css when silent mode is turned on

main.scss

@@ -1,6 +1,4 @@
 $o-crossword-is-silent: true !default;
-$o-buttons-is-silent: false;
-
 @import "o-colors/main";
 @import "o-grid/main";
 @import "o-typography/main";
@@ -12,6 +10,7 @@ $o-buttons-is-silent: false;
 @import "src/scss/base";
 @import "src/scss/orientation";
 @import "src/scss/print";
+@import "src/scss/mobile";
 
 @if ($o-crossword-is-silent == false) {
 	@include oCrosswordAll;
@@ -20,4 +19,3 @@ $o-buttons-is-silent: false;
 	$o-crossword-is-silent: true !global;
 }
 
-@import "src/scss/mobile";

src/js/oCrossword.js

@@ -493,7 +493,7 @@ OCrossword.prototype.assemble = function assemble() {
 		this.rootEl.insertBefore(buttonRow, wrapper);
 
 		const resetButton = document.createElement('button');
-		resetButton.classList.add('o-crossword-reset', 'o-buttons', 'o-buttons--mono');
+		resetButton.classList.add('o-crossword-reset', 'o-buttons', 'o-crossword-button');
 		if(answersEmpty() || isAnswerVersion) {
 			resetButton.classList.add('hidden');
 		}
@@ -503,28 +503,28 @@ OCrossword.prototype.assemble = function assemble() {
 		buttonRow.appendChild(resetButton);
 
 		const toggleViewButtonAboveGrid = document.createElement('button');
-		toggleViewButtonAboveGrid.classList.add('o-crossword-mobile-toggle', 'o-buttons', 'o-buttons--mono');
+		toggleViewButtonAboveGrid.classList.add('o-crossword-mobile-toggle', 'o-buttons', 'o-crossword-button');
 		toggleViewButtonAboveGrid.textContent = isGridView?'List view':'Grid view';
 
 		this.addEventListener(toggleViewButtonAboveGrid, 'click', toggleMobileViews);
 		this.rootEl.insertBefore(toggleViewButtonAboveGrid, gridWrapper);
 
 		const toggleViewButtonTop = document.createElement('button');
-		toggleViewButtonTop.classList.add('o-crossword-mobile-toggle', 'o-buttons', 'o-buttons--mono');
+		toggleViewButtonTop.classList.add('o-crossword-mobile-toggle', 'o-buttons', 'o-crossword-button');
 		toggleViewButtonTop.textContent = isGridView?'List view':'Grid view';
 
 		this.addEventListener(toggleViewButtonTop, 'click', toggleMobileViews);
 		buttonRow.appendChild(toggleViewButtonTop);
 
 		const toggleColumnsButton = document.createElement('button');
-		toggleColumnsButton.classList.add('o-crossword-mobile-toggle', 'o-buttons', 'o-buttons--mono');
+		toggleColumnsButton.classList.add('o-crossword-mobile-toggle', 'o-buttons', 'o-crossword-button');
 		toggleColumnsButton.textContent = isSingleColumnView?'2 col':'1 col';
 
 		this.addEventListener(toggleColumnsButton, 'click', toggleColumnView);
 		buttonRow.appendChild(toggleColumnsButton);
 
 		const toggleViewButtonBottom = document.createElement('button');
-		toggleViewButtonBottom.classList.add('o-crossword-mobile-toggle', 'o-buttons', 'o-buttons--mono');
+		toggleViewButtonBottom.classList.add('o-crossword-mobile-toggle', 'o-buttons', 'o-crossword-button');
 		toggleViewButtonBottom.textContent = isGridView?'List view':'Grid view';
 
 		this.addEventListener(toggleViewButtonBottom, 'click', toggleMobileViews);

src/scss/_base.scss

@@ -58,6 +58,10 @@
 		box-sizing: border-box;
 	}
 
+	.o-crossword-button {
+		@include oButtons($theme: "mono");
+	}
+
 	.hidden {
 		display: none;
 	}

src/scss/_mixins.scss

@@ -11,4 +11,8 @@
 	.#{$classname} {
 		@include oCrosswordBase;
 	}
+	@include _oCrosswordOrientation;
+	@include _oCrosswordPrint;
+	@include _oCrosswordMobile;
+
 }

src/scss/_mobile.scss

@@ -1,5 +1,6 @@
 // sass-lint:disable no-vendor-prefixes
-@media screen and (max-width: $break-phone) {
+@mixin _oCrosswordMobile () {
+    @media screen and (max-width: $break-phone) {
     .o-crossword table, 
     .o-crossword .o-crossword-grid-wrapper .o-crossword-magic-input {
         font-size: 1.2rem;
@@ -57,4 +58,5 @@
             }
         }
     }
+    }
 }

src/scss/_orientation.scss

@@ -2,11 +2,13 @@
 //below forces portrait mode on mobile phones
 //it uses "min-aspect-ratio" to detect landscape,
 //since keyboard popping will make "orientation" wrong in some cases
-@media screen and (min-aspect-ratio: 13/9) and (max-width: $break-phone) {
-  body:not(.iOS) #main-container {
-    transform: rotate(-90deg);
-    width: 100% /* screen width */ ;
-    height: 100% /* screen height */ ;
-    overflow: scroll;
+@mixin _oCrosswordOrientation () {
+  @media screen and (min-aspect-ratio: 13/9) and (max-width: $break-phone) {
+    body:not(.iOS) #main-container {
+      transform: rotate(-90deg);
+      width: 100% /* screen width */ ;
+      height: 100% /* screen height */ ;
+      overflow: scroll;
+    }
   }
 }

src/scss/_print.scss

@@ -1,5 +1,6 @@
 // sass-lint:disable no-qualifying-elements, no-important, no-vendor-prefixes
-@media print {
+@mixin _oCrosswordPrint () {
+	@media print {
 	@page {
 		margin: 1cm 0.5cm;
 	}
@@ -140,4 +141,5 @@
 	.o-crossword-reset {
 		display: none;
 	}
+	}
 }