+
+// 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: math.div(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 {
+ @include margin-right(10px);
+ width: 24px;
+ height: 24px;
+ vertical-align: top;
+ }
+
+ .badge {
+ @include 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: #{math.div($height, 2)} solid transparent;
+ border-bottom: #{math.div($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;
+ }
+ }
+}
+
+@mixin margin ($block-start, $inline-end, $block-end, $inline-start) {
+ @include margin-left($inline-start);
+ @include margin-right($inline-end);
+
+ margin-top: $block-start;
+ margin-bottom: $block-end;
+}
+
+@mixin padding ($block-start, $inline-end, $block-end, $inline-start) {
+ @include padding-left($inline-start);
+ @include padding-right($inline-end);
+
+ padding-top: $block-start;
+ padding-bottom: $block-end;
+}
+
+@mixin margin-left ($value) {
+ @supports (margin-inline-start: $value) {
+ margin-inline-start: $value;
+ }
+
+ @supports not (margin-inline-start: $value) {
+ margin-left: $value;
+ }
+}
+
+@mixin margin-right ($value) {
+ @supports (margin-inline-end: $value) {
+ margin-inline-end: $value;
+ }
+
+ @supports not (margin-inline-end: $value) {
+ margin-right: $value;
+ }
+}
+
+@mixin padding-left ($value) {
+ @supports (padding-inline-start: $value) {
+ padding-inline-start: $value;
+ }
+
+ @supports not (padding-inline-start: $value) {
+ padding-left: $value;
+ }
+}
+
+@mixin padding-right ($value) {
+ @supports (padding-inline-end: $value) {
+ padding-inline-end: $value;
+ }
+
+ @supports not (padding-inline-end: $value) {
+ padding-right: $value;
+ }
+}