.media {
  &__transcript-container {
    margin-top: 7rem;
    position: relative;
  }

  &__transcript-btn {
    padding: @item-padding;
    background-color: @item-color;
    color: @item-color-inverted;
    border-radius: @item-border-radius;
    font-family: @title-family;
    min-width: 120px;

    position: absolute;
    right: 0;
    top: -4rem;

    .no-touch &:hover {
      background-color: @item-color-hover;
      color: @item-color-inverted-hover;
      .transition(background-color @duration ease-in, color @duration ease-in;);
    }
  }

  &__transcript-body-inline {
    margin-top: 4rem;
    padding: @item-padding;
    width: 100%;
    left: 0;
  }

  &__transcript-body-inline a {
    .link-text;
  }


  &__widget.video-youtube {
    .mejs-overlay-button {
      display: none;
    }
  }

  // --------------------------------------------------
  // Overrides for media player controls - to finish
  // --------------------------------------------------
  .mejs-container {
    .mejs-overlay:hover .mejs-overlay-button {
      background-position: 0 0;
    }

    .mejs-overlay-button {
      background-size: contain;
      width: 80px;
      height: 80px;
      margin: -40px;
    }

    .mejs-controls {
      background-image: none;
      background-color: white;
      margin-bottom: -30px;

      .mejs-time {
        color: @slate;
      }
    }

    .mejs-time-rail {
      .mejs-time-total {
        background-image: none;
        background-color: @platinum;
        border-radius: 10px;
      }

      .mejs-time-loaded {
        background-image: none;
        background-color: @platinum;
        border-radius: 10px;
      }

      .mejs-time-current {
        background-image: none;
        background-color: @item-color;
        border-radius: 10px;
      }
    }
  }
  // --------------------------------------------------
}
