// Bespoke Classes: https://github.com/markdalgleish/bespoke-classes
// Stylus: http://learnboost.github.io/stylus

@import 'normalizecss/normalize.css'

$background = #111
$white = #ddd

.bespoke-parent
  background: $background
  color: $white
  text-size-adjust: auto
  position: absolute
  top: 0
  left: 0
  right: 0
  bottom: 0
  overflow: hidden

.bespoke-scale-parent
  position: absolute
  top: 0
  left: 0
  right: 0
  bottom: 0
  pointer-events: none
  .bespoke-active
    pointer-events: auto

.bespoke-slide
  width: 640px
  height: 480px
  position: absolute
  top: 50%
  left: 50%
  margin-left: -(@width / 2)
  margin-top: -(@height / 2)
  display: flex
  flex-direction: column
  justify-content: center
  align-items: center

.bespoke-inactive
  opacity: 0
  pointer-events: none

.bespoke-bullet-inactive
  opacity: 0
  pointer-events: none

.bespoke-backdrop
  position: absolute
  top: 0
  left: 0
  right: 0
  bottom: 0
  z-index: -1
  opacity: 0

.bespoke-backdrop-active
  opacity: 1

.bespoke-progress-parent
  position: absolute
  top: 0
  left: 0
  right: 0
  height: .3vw

.bespoke-progress-bar
  position: absolute
  height: 100%
  background: #ccc
  transition: width .6s ease

.emphatic
  background: #222

.emphatic-text
  color: white