diff --git a/assets/css/brightcove_playlist.css b/assets/css/brightcove_playlist.css
index 0c8ff9a..8b1f654 100644
--- a/assets/css/brightcove_playlist.css
+++ b/assets/css/brightcove_playlist.css
@@ -1,17 +1,13 @@
 .brightcove-playlist {
-	background-color: white;
+	background-color: var(--bc-color-white);
 	font-size: 80%;
 	padding: 20px 20px 10px 20px;
 }
 
-.brightcove-playlist-masthead {}
-
 h3.brightcove-playlist-title {
 	margin: 0 0 10px 0;
 }
 
-.brightcove-playlist-description {}
-
 .brightcove-playlist-item {
 	border-top: 1px solid #eee;
 	display: table;
diff --git a/assets/css/components/colors.css b/assets/css/components/colors.css
index 6b31539..d11d256 100644
--- a/assets/css/components/colors.css
+++ b/assets/css/components/colors.css
@@ -7,7 +7,7 @@ div.brightcove-messages {
 	text-align: left;
 	width: calc(100% - 4px);
 
-	.updated {
+	& .updated {
 		margin-bottom: 15px;
 		margin-left: 0;
 	}
@@ -15,9 +15,9 @@ div.brightcove-messages {
 
 div.brightcove-uploader {
 
-	div.brightcove-messages {
+	& div.brightcove-messages {
 
-		.updated {
+		& .updated {
 			margin: 20px 15px 2px;
 		}
 	}
diff --git a/assets/css/components/modals.css b/assets/css/components/modals.css
index 5645fcf..6c2d312 100644
--- a/assets/css/components/modals.css
+++ b/assets/css/components/modals.css
@@ -1,19 +1,19 @@
 .brightcove-modal {
 
-	.media-frame-title,
-	.media-frame-router,
-	.media-frame-content,
-	.media-frame-toolbar {
+	& .media-frame-title,
+	& .media-frame-router,
+	& .media-frame-content,
+	& .media-frame-toolbar {
 		left: 0;
 	}
 
-	.brightcove-media {
+	& .brightcove-media {
 		overflow: hidden;
 	}
 
-	.brightcove {
+	& .brightcove {
 
-		.wp-filter {
+		& .wp-filter {
 			border: 0;
 			box-shadow: none;
 			margin: 0;
@@ -21,14 +21,14 @@
 			width: 100%;
 		}
 
-		.media-toolbar-secondary {
+		& .media-toolbar-secondary {
 			min-width: 280px;
 			padding: 0;
 		}
 
-		.media-toolbar-primary.search-form {
+		& .media-toolbar-primary.search-form {
 
-			input[type="search"] {
+			& input[type="search"] {
 				float: left;
 				margin: 0;
 				padding-bottom: 0;
@@ -36,25 +36,25 @@
 			}
 		}
 
-		#media-search {
+		& #media-search {
 			float: left;
 			margin-left: 10px;
 			margin-right: 5px;
 		}
 	}
 
-	.pending-uploads {
+	& .pending-uploads {
 		display: block;
 		margin: 20px;
 		width: calc(100% - 40px);
 	}
 
-	.brightcove-upload-queued-files {
+	& .brightcove-upload-queued-files {
 		border: 0;
 		width: 100%;
 	}
 
-	.brightcove.media-frame-content {
+	& .brightcove.media-frame-content {
 		padding: 0 20px;
 		width: 100%;
 
@@ -63,13 +63,13 @@
 		}
 	}
 
-	.brightcove.video-preview {
+	& .brightcove.video-preview {
 		margin-top: 20px;
 	}
 
-	.video-preview-frame {
+	& .video-preview-frame {
 
-		.brightcove {
+		& .brightcove {
 
 			&.media-frame-content {
 				border-right: 1px solid #ddd;
diff --git a/assets/css/components/playlists.css b/assets/css/components/playlists.css
index b154252..d9e2594 100644
--- a/assets/css/components/playlists.css
+++ b/assets/css/components/playlists.css
@@ -7,64 +7,64 @@
 	padding: 20px;
 	width: 100%;
 
-	.settings {
+	& .settings {
 		margin-bottom: 20px;
 		max-width: 50%;
 	}
 
-	.playlist-name {
+	& .playlist-name {
 		font-weight: 700;
 
-		span {
+		& span {
 			display: inline-block;
 			margin-left: 10px;
 			margin-right: 20px;
 		}
 
-		input {
+		& input {
 			width: 65%;
 		}
 	}
 
-	.playlist-videos-list {
+	& .playlist-videos-list {
 		border-right: 1px solid #ddd;
 		clear: both;
 	}
 
-	.playlist-add-videos-list,
-	.playlist-videos-list {
+	& .playlist-add-videos-list,
+	& .playlist-videos-list {
 		box-sizing: border-box;
 		float: left;
 		width: 50%;
 
-		h2 {
+		& h2 {
 			border-bottom: 1px solid #ddd;
 			margin-bottom: 0;
 			padding-bottom: 10px;
 			padding-left: 10px;
 		}
 
-		ul {
+		& ul {
 			height: 450px;
 			overflow: auto;
 		}
 
-		.attachment {
+		& .attachment {
 			width: 100% !important;
 		}
 
-		.thumbnail {
+		& .thumbnail {
 			float: left;
 			width: 162px;
 		}
 
-		.bc-info {
+		& .bc-info {
 			clear: none;
 			float: left;
 			margin-left: 10px;
 		}
 
-		.row-actions {
+		& .row-actions {
 			clear: both;
 			display: block;
 			left: auto;
diff --git a/assets/css/components/uploads.css b/assets/css/components/uploads.css
index 6cbac9d..4312453 100644
--- a/assets/css/components/uploads.css
+++ b/assets/css/components/uploads.css
@@ -10,7 +10,7 @@
 
 .brightcove-pending-upload {
 
-	td {
+	& td {
 		cursor: pointer;
 
 		&:nth-child(1) {
@@ -33,8 +33,8 @@
 
 .brightcove-pending-upload.selected {
 	background-color: #35a3ca; /* copied from sidebar menu */
-	td {
-		color: #fff;
+	& td {
+		color: var(--bc-color-white);
 	}
 }
 
@@ -56,17 +56,17 @@
 }
 
 .pending-uploads {
-	background-color: #fff;
+	background-color: var(--bc-color-white);
 	display: table-cell;
 	text-align: left;
 	vertical-align: top;
 	width: 70%;
 
-	table.widefat {
+	& table.widefat {
 		border: 0;
 	}
 
-	.brightcove-start-upload {
+	& .brightcove-start-upload {
 		margin-bottom: 10px;
 		margin-left: 10px;
 	}
@@ -75,7 +75,7 @@
 .brightcove-media,
 .brightcove-media-videos {
 
-	.spinner {
+	& .spinner {
 		float: none;
 		margin: 5px 0;
 		vertical-align: top;
diff --git a/assets/css/components/video-edit.css b/assets/css/components/video-edit.css
index e14b013..f13ae1d 100644
--- a/assets/css/components/video-edit.css
+++ b/assets/css/components/video-edit.css
@@ -1,10 +1,10 @@
 .brightcove.video-edit {
 
-	.image-preview,
-	.setting {
+	& .image-preview,
+	& .setting {
 		margin-bottom: 8px;
 
-		.description {
+		& .description {
 			margin-left: 0;
 
 			@media screen and (min-width: 900px) {
@@ -13,22 +13,22 @@
 		}
 	}
 
-	.setting-content,
-	select {
+	& .setting-content,
+	& select {
 		margin-left: 7px;
 	}
 
-	.setting-content {
+	& .setting-content {
 		float: left;
 		width: 64%;
 
-		.button-secondary {
+		& .button-secondary {
 			clear: left;
 			display: inline-block;
 		}
 	}
 
-	.attachment {
+	& .attachment {
 		cursor: pointer;
 		padding: 8px 0 0;
 		width: auto;
@@ -37,58 +37,58 @@
 			display: block;
 			max-width: 100%;
 
-			.check {
+			& .check {
 				display: block;
 				top: 9px;
 			}
 
-			.button {
+			& .button {
 				display: none;
 			}
 		}
 
-		img {
+		& img {
 			height: auto;
 			max-width: 100%;
 		}
 	}
 
-	.action-row {
+	& .action-row {
 		clear: both;
 
-		.delete {
+		& .delete {
 			color: #a00;
 			display: inline-block;
 			padding-top: 6px;
 		}
 	}
 
-	.label-repeater {
+	& .label-repeater {
 
 		&.empty-row {
 			display: none;
 		}
 	}
 
-	button.-captions,
-	.caption-url {
+	& button.-captions,
+	& .caption-url {
 		float: left;
 	}
 
-	button.-captions {
+	& button.-captions {
 		margin-right: 1em;
 	}
 
-	.caption-url {
+	& .caption-url {
 		color: #666;
 		line-height: 28px;
 	}
 
-	.add-remote-caption {
+	& .add-remote-caption {
 		line-height: 28px;
 	}
 
-	.caption-repeater {
+	& .caption-repeater {
 		border-bottom: 1px solid #d5d5d5;
 		-moz-box-sizing: border-box;
 		box-sizing: border-box;
@@ -109,25 +109,25 @@
 		}
 	}
 
-	input.brightcove-captions {
+	& input.brightcove-captions {
 		clear: both;
 		margin-bottom: 0.75em;
 		width: 100%;
 	}
 
-	input.brightcove-labels {
+	& input.brightcove-labels {
 		clear: both;
 		margin-bottom: 0.2em;
 		margin-top: 0.7em;
 		width: 100%;
 	}
 
-	.caption-secondary-fields {
+	& .caption-secondary-fields {
 
 		@mixin clearfix;
 		clear: both;
 
-		label {
+		& label {
 
 			@mixin clearfix;
 			box-sizing: border-box;
@@ -140,16 +140,16 @@
 				padding-right: 1em;
 			}
 
-			span,
-			input[type="text"],
-			select {
+			& span,
+			& input[type="text"],
+			& select {
 				margin: 0;
 				min-width: 100%;
 				text-align: left;
 				width: 100%;
 			}
 
-			input[type="checkbox"] {
+			& input[type="checkbox"] {
 				margin: auto;
 			}
 		}
@@ -160,7 +160,7 @@
 		text-align: left;
 
 		& li {
-			background-color: #fff;
+			background-color: var(--bc-color-white);
 			border: 1px solid #8c8f94;
 			border-radius: 4px;
 			display: inline-block;
diff --git a/assets/css/components/video-grid.css b/assets/css/components/video-grid.css
index d2cf1ec..3fa11d5 100644
--- a/assets/css/components/video-grid.css
+++ b/assets/css/components/video-grid.css
@@ -1,6 +1,6 @@
 .brightcove {
 
-	.media-toolbar {
+	& .media-toolbar {
 		height: auto;
 		position: relative;
 		right: 10px;
@@ -12,7 +12,7 @@
 		}
 	}
 
-	.media-toolbar-secondary {
+	& .media-toolbar-secondary {
 		box-sizing: border-box;
 		padding: 12px 0;
 	}
@@ -20,13 +20,13 @@
 
 .wp-core-ui {
 
-	.brightcove.attachment {
+	& .brightcove.attachment {
 		float: none;
 	}
 
-	.brightcove.attachment:focus,
-	.selected.brightcove.attachment:focus,
-	.brightcove.attachment.details:focus {
+	& .brightcove.attachment:focus,
+	& .selected.brightcove.attachment:focus,
+	& .brightcove.attachment.details:focus {
 		-webkit-box-shadow: none;
 		box-shadow: none;
 	}
@@ -35,7 +35,7 @@
 .brightcove.media-frame-content,
 .playlist-edit-container {
 
-	.spinner {
+	& .spinner {
 		display: inline-block;
 		margin: 7px;
 		visibility: visible;
@@ -45,9 +45,9 @@
 		}
 	}
 
-	.menu-visible {
+	& .menu-visible {
 
-		.highlighted .thumbnail {
+		& .highlighted .thumbnail {
 			-webkit-box-shadow: 0 0 2px 5px #5b9dd9;
 			box-shadow: 0 0 2px 5px #5b9dd9;
 			outline: none;
@@ -56,11 +56,11 @@
 
 	background-color: transparent;
 
-	ul {
+	& ul {
 		text-align: justify;
 	}
 
-	.attachment {
+	& .attachment {
 		display: inline-block;
 		margin: 0;
 		padding: 10px;
@@ -80,7 +80,7 @@
 			width: 25%;
 		}
 
-		.attachment-preview {
+		& .attachment-preview {
 			background-color: transparent;
 			box-shadow: none;
 
@@ -89,7 +89,7 @@
 			}
 		}
 
-		.thumbnail {
+		& .thumbnail {
 			margin-bottom: 10px;
 
 			overflow: hidden;
@@ -99,16 +99,16 @@
 				display: none;
 			}
 
-			img {
+			& img {
 				display: block;
 				height: auto;
 				position: relative;
 				width: 100%;
 			}
 
-			.processing {
+			& .processing {
 				background: rgba(50, 50, 50, 0.7);
-				color: #fff;
+				color: var(--bc-color-white);
 				font-size: 12px;
 				height: 100%;
 				left: 0;
@@ -118,7 +118,7 @@
 				width: 100%;
 				z-index: 9999;
 
-				span {
+				& span {
 					left: 0;
 					margin-top: -9px;
 					position: absolute;
@@ -128,8 +128,8 @@
 				}
 			}
 
-			.duration,
-			.video-count {
+			& .duration,
+			& .video-count {
 				background-color: var(--bc-color-white);
 				bottom: 0;
 				padding: 3px;
@@ -140,14 +140,14 @@
 			}
 		}
 
-		.bc-info {
+		& .bc-info {
 			clear: both;
 			display: block;
 			height: auto;
 			padding: 1px;
 			position: relative;
 
-			.bc-name {
+			& .bc-name {
 				background-color: transparent;
 				box-shadow: none !important;
 				clear: both;
@@ -159,12 +159,12 @@
 				top: 95px;
 				word-break: break-word;
 
-				div {
+				& div {
 					padding: 0;
 				}
 			}
 
-			.bc-updated {
+			& .bc-updated {
 				clear: both;
 				color: var(--bc-color-grey);
 				float: left;
@@ -173,11 +173,11 @@
 			}
 		}
 
-		.media-actions {
+		& .media-actions {
 			clear: both;
 			text-align: right;
 
-			.button {
+			& .button {
 				margin-left: 1em;
 			}
 
@@ -187,19 +187,19 @@
 		}
 	}
 
-	.brightcove-datetime-wrapper {
+	& .brightcove-datetime-wrapper {
 		display: flex;
 	}
 
-	.brightcove-datetime-colon {
+	& .brightcove-datetime-colon {
 		font-size: 14px;
 		margin-right: 0;
 		min-width: auto;
 		width: 10px;
 	}
 
-	.schedule-start-date,
-	.schedule-end-date {
+	& .schedule-start-date,
+	& .schedule-end-date {
 		margin-right: calc(4% + 7px);
 	}
 }
@@ -209,21 +209,21 @@
 
 	height: 100%;
 
-	.attachment-detail {
+	& .attachment-detail {
 
-		.thumbnail {
+		& .thumbnail {
 			clear: both;
 			position: relative;
 
-			img {
+			& img {
 				display: block;
 				height: auto;
 				max-width: 100%;
 			}
 
-			.processing {
+			& .processing {
 				background: rgba(50, 50, 50, 0.7);
-				color: #fff;
+				color: var(--bc-color-white);
 				font-size: 12px;
 				height: 100%;
 				left: 0;
@@ -233,7 +233,7 @@
 				width: 100%;
 				z-index: 9999;
 
-				span {
+				& span {
 					left: 0;
 					margin-top: -6px;
 					position: absolute;
@@ -243,15 +243,15 @@
 				}
 			}
 
-			.detail-duration,
-			.detail-video-count {
+			& .detail-duration,
+			& .detail-video-count {
 				bottom: 0;
 				padding: 0;
 				position: absolute;
 				right: 0;
 				z-index: 1000;
 
-				span {
+				& span {
 					background-color: var(--bc-color-white);
 					float: right;
 					padding: 3px;
@@ -259,15 +259,15 @@
 			}
 		}
 
-		.video-info,
-		.playlist-info,
-		.inpageexperiences-info {
+		& .video-info,
+		& .playlist-info,
+		& .inpageexperiences-info {
 			margin: 10px 0;
 			overflow: hidden;
 
-			.video-name,
-			.playlist-name,
-			.inpageexperiences-name {
+			& .video-name,
+			& .playlist-name,
+			& .inpageexperiences-name {
 				clear: both;
 				float: left;
 				font-size: 130%;
@@ -276,7 +276,7 @@
 				word-break: break-word;
 			}
 
-			.bc-video-section {
+			& .bc-video-section {
 				display: block;
 				float: left;
 				height: auto;
@@ -284,37 +284,37 @@
 				width: 100%;
 			}
 
-			.brightcove-player {
+			& .brightcove-player {
 				display: block;
 				padding: 3px 0;
 			}
 
-			.account-name,
-			.created-date,
-			.playlist-id,
-			.playlist-type,
-			.updated-date,
-			.video-created,
-			.video-long-description,
-			.video-description,
-			.video-updated {
+			& .account-name,
+			& .created-date,
+			& .playlist-id,
+			& .playlist-type,
+			& .updated-date,
+			& .video-created,
+			& .video-long-description,
+			& .video-description,
+			& .video-updated {
 				clear: both;
 				color: var(--bc-color-grey);
 				display: block;
 				float: left;
 
-				.title {
+				& .title {
 					margin-right: 5px;
 				}
 			}
 		}
 
-		.video-details,
-		.playlist-details,
-		.inpageexperiences-details {
+		& .video-details,
+		& .playlist-details,
+		& .inpageexperiences-details {
 
-			.left-col,
-			label {
+			& .left-col,
+			& label {
 				clear: left;
 				display: inline-block;
 				float: left;
@@ -322,30 +322,30 @@
 				width: 100px;
 			}
 
-			.right-col {
+			& .right-col {
 				display: inline-block;
 				float: left;
 				padding-top: 5px;
 			}
 
-			.clear {
+			& .clear {
 				clear: both;
 			}
 
-			input[type="number"] {
+			& input[type="number"] {
 				width: 20%;
 			}
 
-			input[type="checkbox"] {
+			& input[type="checkbox"] {
 				margin-left: 10px;
 			}
 
-			textarea {
+			& textarea {
 				margin-top: 10px;
 				width: 100%;
 			}
 
-			#custom {
+			& #custom {
 				display: none;
 			}
 		}
@@ -366,7 +366,7 @@
 
 	.brightcove.media-frame-content {
 
-		.attachment {
+		& .attachment {
 			padding: 20px 10px;
 		}
 	}
diff --git a/assets/css/components/video-page.css b/assets/css/components/video-page.css
index c98ecd6..454e01f 100644
--- a/assets/css/components/video-page.css
+++ b/assets/css/components/video-page.css
@@ -23,18 +23,18 @@
 	position: static;
 	width: calc(100% - 370px);
 
-	.video-preview {
+	& .video-preview {
 		padding-bottom: 56.25%;
 		position: relative;
 
-		iframe {
+		& iframe {
 			height: 100%;
 			position: absolute;
 			width: 100%;
 		}
 	}
 
-	.brightcove-buttons {
+	& .brightcove-buttons {
 		float: right;
 		margin-top: 20px;
 	}
@@ -45,7 +45,7 @@
 		width: calc(100% - 20px);
 	}
 
-	.video-edit {
+	& .video-edit {
 		max-width: 721px;
 		padding: 5px;
 	}
@@ -53,13 +53,13 @@
 
 .brightcove-buttons {
 
-	.delete {
+	& .delete {
 		color: #a00;
 		display: inline-block;
 		padding-top: 6px;
 
 		&:hover {
-			color: red;
+			color: #f00;
 		}
 	}
 }
@@ -70,7 +70,7 @@
 	position: relative;
 	top: auto;
 
-	a.brightcove-toolbar {
+	& a.brightcove-toolbar {
 		margin-left: 1em;
 	}
 }
@@ -86,7 +86,7 @@
 	top: auto;
 	width: 300px;
 
-	.brightcove-buttons {
+	& .brightcove-buttons {
 
 		&::after {
 			clear: both;
@@ -95,7 +95,7 @@
 		}
 	}
 
-	.more-actions {
+	& .more-actions {
 		float: right;
 	}
 }
@@ -103,11 +103,11 @@
 .brightcove.media-toolbar {
 	padding: 0;
 
-	.wp-filter {
+	& .wp-filter {
 		padding: 0 16px;
 	}
 
-	.media-toolbar-secondary {
+	& .media-toolbar-secondary {
 		margin: 8px;
 	}
 }
@@ -116,7 +116,7 @@
 
 	.brightcove.media-toolbar {
 
-		.brightcove.media-toolbar-secondary {
+		& .brightcove.media-toolbar-secondary {
 			margin: 4px;
 		}
 	}
@@ -127,7 +127,7 @@
 	.brightcove.media-frame-content,
 	.brightcove-media.playlist {
 
-		.video-preview {
+		& .video-preview {
 			padding-bottom: 43.25%;
 		}
 	}