fix(big-play-button): component customization

Allows to easily change the visual aspect of the component without having to adjust the positioning.

- remove `margin` top/left used to center the component
- add `translate` x/y to center the component regardless of its size
- remove the `line-height` used to center the play `icon`
- add display `flex` to center of pseudo-elements
- keep `height` at 100% to fill the parent as before

src/css/components/_big-play.scss

@@ -1,8 +1,5 @@
-@use "sass:math";
-
 .video-js .vjs-big-play-button {
   font-size: 3em;
-  line-height: $big-play-button--line-height;
   height: $big-play-button--height;
   width: $big-play-button--width; // Firefox bug: For some reason without width the icon wouldn't show up. Switched to using width and removed padding.
   display: block;
@@ -10,11 +7,10 @@
   top: 50%;
   left: 50%;
   padding: 0;
-  margin-top: -(math.div($big-play-button--height, 2));
-  margin-left: -(math.div($big-play-button--width, 2));
   cursor: pointer;
   opacity: 1;
   border: $big-play-button--border-size solid $primary-foreground-color;
+  transform: translate(-50%, -50%);
 
   // Need a slightly gray bg so it can be seen on black backgrounds
   @include background-color-with-alpha($primary-background-color, $primary-background-transparency);
@@ -26,7 +22,10 @@
   & .vjs-icon-placeholder:before {
     @extend .vjs-icon-play;
 
-    @extend %icon-default;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
   }
 }