+ .badge {
+ margin-left: 7px;
+ vertical-align: top;
+ }
+ }
+}
+
+@mixin play-icon ($width, $height) {
+ width: 0;
+ height: 0;
+
+ position: absolute;
+ left: 50%;
+ top: 50%;
+ transform: translate(-50%, -50%) scale(0.5);
+
+ border-top: ($height / 2) solid transparent;
+ border-bottom: ($height / 2) solid transparent;
+
+ border-left: $width solid rgba(255, 255, 255, 0.95);
+}
+
+@mixin on-small-main-col () {
+ :host-context(.main-col:not(.expanded)) {
+ @media screen and (max-width: $small-view + $menu-width) {
+ @content;
+ }
+ }
+
+ :host-context(.main-col.expanded) {
+ @media screen and (max-width: $small-view) {
+ @content;
+ }
+ }
+}
+
+@mixin on-mobile-main-col () {
+ :host-context(.main-col:not(.expanded)) {
+ @media screen and (max-width: $mobile-view + $menu-width) {
+ @content;
+ }
+ }
+
+ :host-context(.main-col.expanded) {
+ @media screen and (max-width: $mobile-view) {
+ @content;
+ }