@import 'colors.styl'
@import 'easing.styl'
@import 'icons.styl'
@import 'shadowdom.styl'
@import 'sizes.styl'
@import 'timing.styl'
@import 'typography.styl'

$disabled = '&:disabled,&[disabled]'
$not-disabled = ':not([disabled]):not(:disabled)'

disabled = '&:disabled,&[disabled]'
not-disabled = ':not([disabled]):not(:disabled)'

$z-modal = 9000
$z-overlay = 8000
$z-dropdown = 7000
$z-tooltip = 6000
$z-base = 1000

mp-box-shadow(size=10)
  box-shadow 0 (size)px (size * 4)px rgba(0, 0, 0, 0.15)

bg-img(image-path, width=null, height=null)
  background-image url(image-path)
  background-repeat no-repeat
  if width != null && height != null
    background-size width height
    height height
    width width

bg-img-with-2x(original-image, two-times-image, width, height)
  bg-img(original-image, width, height)
  @media only screen and (min-device-pixel-ratio: 2),
    only screen and (device-pixel-ratio: 2),
    only screen and (device-pixel-ratio 2/1),
    only screen and (min-device-pixel-ratio 2),
    only screen and (min-resolution 192dpi),
    only screen and (min-resolution 2dppx)
      bg-img(two-times-image)