+
+// applies ratio (default to 16:9) to a child element (using $selector) only using
+// an immediate's parent size. This allows to set a ratio without explicit
+// dimensions, as width/height cannot be computed from each other.
+@mixin block-ratio ($selector: 'div', $inverted-ratio: 9/16) {
+ $padding-percent: percentage($inverted-ratio);
+
+ position: relative;
+ height: 0;
+ width: 100%;
+ padding-top: $padding-percent;
+
+ #{$selector} {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ top: 0;
+ @content;
+ }
+}
+
+@mixin sub-menu-h1 {
+ ::ng-deep h1 {
+ font-size: 1.3rem;
+ border-bottom: 2px solid $grey-background-color;
+ padding-bottom: 15px;
+ margin-bottom: $sub-menu-margin-bottom;
+
+ > span > my-global-icon,
+ > my-global-icon {
+ margin-right: 10px;
+ width: 24px;
+ height: 24px;
+ vertical-align: top;
+ }
+
+ .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;
+ }
+ }
+}