Remove right padding from media player control bar

- Use scss extension fpr styles file

projects/common/components/media-elements/media-player-control-bar/media-player-control-bar.component.css → projects/common/components/media-elements/media-player-control-bar/media-player-control-bar.component.scss

@@ -2,13 +2,12 @@
   background-color: #f1f1f1;
   display: flex;
   flex-direction: row;
-  padding-right: 10px;
   overflow: hidden;
 }
 
 .control-button {
-  min-width: 20px;
-  padding: 0 5px;
+  min-width: 24px;
+  padding: 0 6px;
 }
 
 .enabled-control:hover{

projects/common/components/media-elements/media-player-control-bar/media-player-control-bar.component.ts

@@ -11,7 +11,7 @@ import { takeUntil } from 'rxjs/operators';
 @Component({
   selector: 'aspect-media-player-control-bar',
   templateUrl: './media-player-control-bar.component.html',
-  styleUrls: ['./media-player-control-bar.component.css']
+  styleUrls: ['./media-player-control-bar.component.scss']
 })
 export class MediaPlayerControlBarComponent implements OnInit, OnChanges, OnDestroy {
   @Input() player!: HTMLVideoElement | HTMLAudioElement;