SASS updated for icon changes

1 files changed, 12 insertions, 18 deletions

diff --git a/src/sass/plyr.scss b/src/sass/plyr.scss
index 00e5c459..51eae73d 100644
--- a/src/sass/plyr.scss
+++ b/src/sass/plyr.scss
@@ -202,13 +202,13 @@ $bp-captions-large: 		768px; // When captions jump to the larger font size
 				transition: fill .3s ease;
 			}
 		}
-		input + label,
-		input.inverted:checked + label {
+		[type="checkbox"] + label,
+		.inverted:checked + label {
 			color: $control-color-inactive;
 		}
 		button,
-		input.inverted + label,
-		input:checked + label {
+		.inverted + label,
+		[type="checkbox"]:checked + label {
 			color: $control-color;
 		}
 		button {
@@ -216,18 +216,19 @@ $bp-captions-large: 		768px; // When captions jump to the larger font size
 			background: transparent;
 			overflow: hidden;
 		}
-		input:focus + label,
+		[type="checkbox"]:focus + label,
 		button:focus {
 			@include tab-focus();
 			color: $control-color-focus;
 		}
 		button:hover,
-		input + label:hover {
+		[type="checkbox"] + label:hover {
 			background: $control-bg-hover;
 			color: $control-color-hover;
 		}
 		.icon-exit-fullscreen,
-		.icon-muted {
+		.icon-muted,
+		.icon-captions-on {
 			display: none;
 		}
 		.player-time {
@@ -301,15 +302,6 @@ $bp-captions-large: 		768px; // When captions jump to the larger font size
 		display: inline-block;
 	}
 
-	// Muted
-	&.muted .player-controls .icon-muted {
-		display: block;
-
-		& + svg {
-			display: none;
-		}
-	}
-
 	// Volume control
 	// <input[type='range']> element
 	// Specificity is for bootstrap compatibility
@@ -412,8 +404,10 @@ $bp-captions-large: 		768px; // When captions jump to the larger font size
 		}
 	}
 
-	// When true full screen, show exit fullscreen icon
-	&.fullscreen-active .icon-exit-fullscreen {
+	// Change icons on state change
+	&.fullscreen-active .icon-exit-fullscreen,
+	&.muted .player-controls .icon-muted,
+	&.captions-active .player-controls .icon-captions-on {
 		display: block;
 
 		& + svg {