/* ==========================================
   Jigsocial Soundtrack Player + Media Badges
========================================== */

.soundtrack-player-slot{
  flex:0 1 auto;
  min-width:0;
}

/*
  Allow the minimize/maximize control
  to extend beyond the music circle.
*/

#multiplayerToolbar,
#multiplayerStatusZone,
.soundtrack-player-slot,
.jigsocial-music-player,
.jigsocial-music-icon{
  overflow:visible;
}

/* ==========================================
   PLAYER CONTAINER
========================================== */

.jigsocial-music-player{
  height:40px;
  max-width:235px;

  display:flex;
  align-items:center;

  gap:7px;

  padding:
    3px
    5px
    3px
    3px;

  border:
    1px solid #3a3a3a;

  border-radius:
    999px;

  background:
    #080808;

  box-shadow:
    0 4px 14px
    rgba(0,0,0,.3);

  transition:
    max-width .2s ease,
    gap .2s ease;
}

/*
  Minimize independently from
  playback state.

  Audio keeps playing or remains
  paused when minimized.
*/

.jigsocial-music-player.is-minimized{
  max-width:none;

  gap:0;
}

/*
  Bring the play/pause circle
  approximately 10px closer.
*/

.jigsocial-music-player.is-minimized
.jigsocial-music-toggle{
  margin-left:-3px;
}

.jigsocial-music-player audio{
  display:none;
}

/* ==========================================
   MUSIC ICONS AND CARD BADGES
========================================== */

.jigsocial-music-icon,
.jigsocial-music-badge,
.jigsocial-video-badge{
  display:flex;
  align-items:center;
  justify-content:center;

  flex:0 0 auto;

  border-radius:
    50%;

  color:
    #fff;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  font-weight:
    700;

  line-height:
    1;

  user-select:
    none;
}

.jigsocial-music-icon{
  position:relative;

  width:32px;
  height:32px;

  border:
    2px solid #fff;

  background:
    #050505;

  font-size:
    19px;

  transition:
    background .2s ease,
    border-color .2s ease,
    box-shadow .2s ease;
}

.jigsocial-music-notes{
  display:block;

  transform:
    translateY(-1px);
}

/*
  Playing state:
  gradient circle.

  Paused state remains black
  with the white border.
*/

.jigsocial-music-player.is-playing
.jigsocial-music-icon{
  border-color:
    transparent;

  background:
    linear-gradient(
      135deg,
      #7d38ff,
      #f326a6
    );

  box-shadow:
    0 0 12px
    rgba(218,42,199,.42);
}

/* ==========================================
   MINIMIZE / MAXIMIZE BUTTON
========================================== */

.jigsocial-music-collapse{
  position:absolute;

  top:0;
  left:-8px;

  transform:
    translate(
      -35%,
      -35%
    );

  z-index:
    999;

  width:
    17px !important;

  height:
    17px !important;

  min-width:
    17px !important;

  margin:
    0 !important;

  padding:
    0 !important;

  border:
    1px solid white !important;

  border-radius:
    50% !important;

  display:
    flex !important;

  align-items:
    center;

  justify-content:
    center;

  background:
    #050505 !important;

  color:
    white !important;

  font-size:
    12px !important;

  font-weight:
    800 !important;

  line-height:
    1 !important;

  cursor:
    pointer;

  box-shadow:
    0 2px 6px
    rgba(0,0,0,.75);
}

.jigsocial-music-collapse:hover{
  background:
    #222 !important;
}

/* ==========================================
   PLAY / PAUSE BUTTON
========================================== */

.jigsocial-music-toggle{
  position:relative;

  flex:
    0 0 auto;

  width:
    28px;

  height:
    28px;

  padding:
    0 !important;

  border:
    1px solid
    rgba(255,255,255,.72)
    !important;

  border-radius:
    50% !important;

  display:flex;
  align-items:center;
  justify-content:center;

  background:
    #111 !important;

  color:
    #fff;

  cursor:
    pointer;

  transition:
    margin-left .2s ease;
}

.jigsocial-music-toggle:hover{
  background:
    #222 !important;
}

.jigsocial-music-toggle:disabled{
  cursor:
    not-allowed;

  opacity:
    .45;
}

/* Play triangle */

.jigsocial-music-toggle-shape{
  display:block;

  width:0;
  height:0;

  margin-left:
    2px;

  border-top:
    5px solid transparent;

  border-bottom:
    5px solid transparent;

  border-left:
    8px solid #fff;
}

/* Pause bars */

.jigsocial-music-player.is-playing
.jigsocial-music-toggle-shape{
  width:
    8px;

  height:
    10px;

  margin-left:
    0;

  border:
    none;

  background:
    linear-gradient(
      to right,
      #fff 0 3px,
      transparent 3px 5px,
      #fff 5px 8px
    );
}

/* ==========================================
   SONG TITLE AND ARTIST
========================================== */

/*
  The ticker remains visible while
  paused or playing.

  Playback only controls whether
  the text moves.
*/

.jigsocial-music-ticker{
  width:
    150px;

  min-width:
    0;

  opacity:
    1;

  overflow:
    hidden;

  white-space:
    nowrap;

  transition:
    width .2s ease,
    opacity .2s ease;
}

/*
  Minimize controls visibility,
  independently from Play/Pause.
*/

.jigsocial-music-player.is-minimized
.jigsocial-music-ticker{
  display:
    none;

  width:
    0;

  opacity:
    0;
}

.jigsocial-music-ticker-track{
  width:
    max-content;

  display:
    flex;

  align-items:
    center;

  animation:
    jigsocialMusicTicker
    12s
    linear
    infinite;

  animation-play-state:
    paused;
}

/*
  Scroll only when playing
  and maximized.
*/

.jigsocial-music-player.is-playing:not(.is-minimized)
.jigsocial-music-ticker-track{
  animation-play-state:
    running;
}

.jigsocial-music-player.is-minimized
.jigsocial-music-ticker-track{
  animation-play-state:
    paused;
}

.jigsocial-music-ticker-track span{
  padding-right:
    34px;

  color:
    #fff;

  font-size:
    10px;

  font-weight:
    600;

  letter-spacing:
    .01em;
}

/* ==========================================
   ERROR STATE
========================================== */

.jigsocial-music-player.has-error
.jigsocial-music-icon{
  border-color:
    #ff8080;
}

/* ==========================================
   TICKER ANIMATION
========================================== */

@keyframes jigsocialMusicTicker{

  from{
    transform:
      translateX(0);
  }

  to{
    transform:
      translateX(-50%);
  }

}

/* ==========================================
   PUZZLE CARD MEDIA BADGES
========================================== */

.jigsocial-music-badge,
.jigsocial-video-badge{
  /*
    Force identical badge sizing on every page,
    regardless of each page's global box-sizing.
  */

  box-sizing:
    content-box;

  position:
    absolute;

  top:
    12px;

  left:
    12px;

  width:
    34px;

  height:
    34px;

  z-index:
    3;

  pointer-events:
    none;

  border:
    2px solid
    rgba(255,255,255,.88);

  box-shadow:
    0 5px 14px
    rgba(0,0,0,.42);
}

/* Music badge */

.jigsocial-music-badge{
  background:
    linear-gradient(
      135deg,
      #7d38ff,
      #f326a6
    );

  font-size:
    19px;
}

/* Cinematic video badge */

.jigsocial-video-badge{
  background:
    linear-gradient(
      135deg,
      #102b6a,
      #4d8dff
    );
}

/*
  12px top position
  + 38px rendered badge size
  + 11px visible space.

  The rendered size is 38px because the
  34px circle has a 2px border on each side.
*/

.jigsocial-video-badge.is-stacked{
  top:
    61px;
}

/* White play triangle */

.jigsocial-video-badge-icon{
  display:
    block;

  width:
    0;

  height:
    0;

  margin-left:
    3px;

  border-top:
    7px solid transparent;

  border-bottom:
    7px solid transparent;

  border-left:
    11px solid #fff;
}

/* ==========================================
   TABLET
========================================== */

@media (max-width:768px){

  .jigsocial-music-player{
    max-width:
      185px;
  }

  .jigsocial-music-player:not(.is-minimized)
  .jigsocial-music-ticker{
    width:
      100px;
  }

}

/* ==========================================
   MOBILE
========================================== */

@media (max-width:560px){

  .jigsocial-music-player{
    max-width:
      145px;
  }

  .jigsocial-music-player:not(.is-minimized)
  .jigsocial-music-ticker{
    width:
      62px;
  }

  .jigsocial-music-ticker-track span{
    font-size:
      9px;
  }

}