$stratum: 10000

// These could actually be 1000, 2000, 3000 and 4000 since the `fixed` position of an element defines
// a stacking context for all contained z-indexes.
//
// However, let's keep the option open that these elements will one day not have its stacking context.
//
// Also let's not do 1, 2, 3 and 4 so other elements have a chance to move themselves between the layers.
$substratum-backdrop: 11000
$substratum-elements: 12000
$substratum-dialog:   13000
$substratum-content:  14000
$substratum-close:    15000

$close-height: 36px
$close-width: 36px
$close-font-size: 34px

.up-modal
  position: fixed
  top: 0
  left: 0
  bottom: 0
  right: 0
  z-index: $stratum
  overflow-x: hidden

.up-modal-backdrop
  z-index: $substratum-backdrop
  background-color: rgba(90, 90, 90, 0.4)
  position: absolute
  top: 0
  right: 0
  bottom: 0
  left: 0

.up-modal-viewport
  position: absolute
  top: 0
  left: 0
  bottom: 0
  right: 0
  z-index: $substratum-elements
  overflow-x: hidden
  // The viewport always has a scrollbar, except when we're animating (see below)
  overflow-y: scroll
  // We prefer centering the dialog as an `inline-block`
  // to giving it a horizontal margin of `auto`. This way
  // the width of `.up-modal-dialog` is controlled by the
  // contents of `.up-modal-content`.
  text-align: center

.up-modal.up-modal-animating
  // During opening/closing animations we let the .up-modal container take over
  // the scrollbars that would usually be owned by .up-modal-viewport.
  // If .up-modal-viewport had a scrollbar while animating with
  // "zoom-in" it would look strange that the scrollbar is scaled.
  &
    overflow-y: scroll
  .up-modal-viewport
    overflow-y: hidden

.up-modal-dialog
  z-index: $substratum-dialog
  // Make sure .up-modal-close is relative to the dialog
  position: relative
  // In case someone sets padding on the dialog box,
  // the width and height attributes set by up.modal
  // should be honored exactly.
  box-sizing: border-box
  margin: 30px 10px

  // In case someone sets a huge width on the dialog.
  max-width: 100%

  // Make it grow with the width of .up-modal-content
  display: inline-block
  text-align: left

.up-modal-content
  z-index: $substratum-content
  padding: 20px
  background-color: #fff
  box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.3)

.up-modal-close
  z-index: $substratum-close
  position: absolute
  right: 0
  top: 0
  width: $close-width
  text-align: center
  line-height: $close-height
  height: $close-height
  font-size: $close-font-size
  color: #666
  cursor: pointer