// copied from twitch-styles sass/base/mobile in order to override media query args and settings

@import ~mweb/common/components/base
@import ~mweb/common/components/variables

*
  box-sizing: border-box
  margin: 0
  padding: 0

body
  background: $hinted-grey-15

a
  text-decoration: none

.page
  font-family: 'Helvetica Neue'
  -webkit-text-size-adjust: 100% // Stop WebKit from autoscaling fonts.

header
  background-color: $twitch-purple
  color: $white
  display: flex
  align-items: center
  padding: 10px 6px 10px 8px
  height: 44px

  h1
    background-image: url('/images/twitch_logo_white.svg')
    background-position: left center
    background-repeat: no-repeat
    background-size: auto 26px
    text-indent: 100%
    white-space: nowrap
    overflow: hidden
    flex: 1
    font-size: 24px // Temporary.

// Create a responsive placeholder box (.dynamic-player) that
// maintains our 16x9 asepct ratio and holds our player (.player-holder)
.dynamic-player
  position: relative
  padding-bottom: 56.25%
  height: 0
  overflow: hidden

  .player-holder
    background: $black
    position: absolute
    top: 0
    left: 0
    right: 0
    bottom: 0

  .full
    margin-bottom: -3px

.discover-more
  flex: 0 0 100%
  padding: 10px 10px 0
  width: 100%

  .discover-more__button
    border: 1px solid $twitch-purple-10
    border-radius: 2px
    color: $twitch-purple
    display: block
    font-size: 13px
    font-weight: bold
    padding: 8px 16px 9px
    margin-bottom: 10px
    text-align: center
    text-decoration: none

.switch-to-desktop
  display: block
  margin-bottom: 10px
  padding: 15px 0 10px
  color: $hinted-grey-12
  font-size: 12px
  font-weight: bold
  text-align: center

// Responsive design.
@media only screen and (min-device-width: 768px) and (orientation: landscape)
  .page
    position: absolute
    right: 0
    top: $mw-top-nav-height
    bottom: 0
    width: $mw-page-width

  // In Landscape mode remove the aspect holder styles and shove dynamic-player
  // to the left by mobile-page-width (320px) and set it to fill the entire page
  .dynamic-player
    position: fixed
    padding-bottom: 0
    left: 0
    top: $mw-top-nav-height
    right: $mw-page-width
    bottom: 0
    height: auto
