/*!
 * Name: MSC styles - addional css features that are needed on more regular bases
 * Admin: juraj.kruzliak@sk.ibm.com
 * 
 */

/* add to video player widget element with youtube video when implementing white youtube icon */
/* depreticated DO NOT USE */
.msc-bg-link {
  position: relative;
  display: block;
  height: 100%;
  width: 100%;
}

.msc-bg-link span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 96px;
  height: 80px;
}

.msc-bg-link span:before {
  font-size: 4.5rem;
  top: 0;
  left: 0;
  display: block;
  width: 96px;
  height: 80px;
  position: absolute;
  transform: translate3d(-35%, -50%, 0);
  transform-origin: center;
}

/* ^^^^ depreticated DO NOT USE ^^^^*/

/*------------------------------------*\
  $CTA
\*------------------------------------*/
/* Add to <a> when you need the icon to be in front of text */

.msc-link-before {
  padding-right: 0 !important;
  padding-left: 2.1em !important;
}

.msc-link-before::before {
  left: 0 !important;
  right: initial !important;
}

/*------------------------------------*\
  $YOUTUBE
\*------------------------------------*/
/* Oficial youtube white icon, add .msc-youtube-white on element with video widget */

.msc-youtube-white .ibm-video-placeholder .ibm-play-youtube::before {
	background-image: url(youtube-play-button-white.svg);
}