refactor: 💡 style ember-asciinema-player

✅ Closes: ICU-8380

ui/admin/app/components/session-recording/player/index.hbs

@@ -1,4 +1,4 @@
-<div class='session-recording-player-layout'>
+<div class='session-recording-player'>
   <div class='session-recording-player-header'>
     <Hds::Link::Standalone
       @icon='arrow-left'

ui/admin/app/styles/app.scss

@@ -686,3 +686,66 @@
   }
   /* stylelint-enable selector-class-pattern */
 }
+
+// session recording player
+.session-recording-player {
+  --player-background-color: #252937;
+  --player-divider: #656a761a;
+  --link-color: #fff;
+
+  background-color: var(--player-background-color);
+  border-radius: 0.75rem;
+
+  &-header {
+    padding-left: 1rem;
+    height: 3rem;
+    width: 100%;
+    border-bottom: var(--player-divider) 0.125rem solid;
+
+    // override of standalone link styles to allow for
+    // static colors in light and dark mode
+    .hds-link-standalone {
+      height: inherit;
+    }
+
+    a {
+      color: var(--link-color);
+    }
+
+    a:hover {
+      color: var(--link-color);
+
+      .hds-link-standalone__text {
+        text-decoration-color: var(--link-color);
+      }
+    }
+  }
+
+  &-theme {
+    .asciinema-theme-asciinema {
+      background-color: var(--player-background-color);
+    }
+
+    .asciinema-terminal {
+      background-color: var(--player-background-color);
+      border-color: var(--player-background-color);
+      border-width: 1rem;
+    }
+
+    .asciinema-player {
+      border-radius: 0.75rem;
+    }
+
+    .asciinema-player-wrapper {
+      &.hud .control-bar {
+        bottom: 0rem;
+      }
+
+      .control-bar {
+        bottom: 0rem;
+        background: var(--player-background-color);
+        border-top: var(--player-divider) 0.125rem solid;
+      }
+    }
+  }
+}