/**
 * css for videojs-osg
 * With the default plugins for postcss you can
 * - @import files, they will be inlined during build
 * - not worry about browser prefixes, they will be handled
 * - nest selectors. This follows the css specification that is
 *   currently out on some browsers. See https://tabatkins.github.io/specs/css-nesting/
 * - custom properties (aka variables) via the var(--var-name) syntax. See
 *   https://www.w3.org/TR/css-variables-1/
 */


/* Note: all vars must be defined here, there are no "local" vars */
:root {
  --main-color: red;
  --base-font-size: 9;
  --font-size: 7;
}

.video-js {

  &.vjs-osg {
    /* This class is added to the video.js element by the plugin by default. */
    display: block;

    & .vjs-osg {
        display: inline-block;
        position: absolute;

      & img {
        width: 100%;
      }

      &.no-link {
        pointer-events: none;
      }

      &.vjs-osg-tl {
        top: 0;
        left: 0;
      }

      &.vjs-osg-tr {
        top: 0;
        right: 0;
      }

      &.vjs-osg-bl {
        bottom: 0;
        left: 0;
      }

      &.vjs-osg-br {
        bottom: 0;
        right: 0;
      }

      &.vjs-osg-tm {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        margin: auto;
      }

      &.vjs-osg-bm {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: auto;
        margin: auto;
      }

      &.vjs-osg-lm {
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: 100%;
        left: 0;
        right: auto;
        bottom: 0;
      }

      &.vjs-osg-rm {
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: 100%;
        right: 0;
        bottom: 0;
        left: auto;
      }
    }

    & .remove-me, & .remove-me-too, &.finally-remove-me {
      /* examples of postcss syntax, you probably want to remove this */

      color: var(--main-color);

      /**
       * Note that you have to use calc and multiply by a value with a unit
       * prepending the unit like `var(--base-font-size)px` or
       * `calc(10 * var(--base-font-size)em` will NOT work!
       */
      font-size: calc(var(--font-size) * 8 * var(--base-font-size) * 1px);

    }
  }
}