$box-color: v("text") !default
$box-background-color: v("scheme-main") !default
$box-radius: v("radius-large") !default
$box-shadow: 0 0.5em 1em -0.125em vAlphaChange("scheme-invert", 0.1), 0 0px 0 1px vAlphaChange("scheme-invert", 0.02) !default
$box-padding: 1.25rem !default

$box-link-hover-shadow: 0 0.5em 1em -0.125em vAlphaChange("scheme-invert", 0.1), 0 0 0 1px v("link") !default
$box-link-active-shadow: inset 0 1px 2px vAlphaChange("scheme-invert", 0.2), 0 0 0 1px v("link") !default

+register(box-background-color,$box-background-color, true)
+register(box-radius,$box-radius, true)
+register(box-shadow,$box-shadow, true)
+register(box-color,$box-color, true)
+register(box-padding,$box-padding, true)
+register(box-link-hover-shadow,$box-link-hover-shadow, true)
+register(box-link-active-shadow,$box-link-active-shadow, true)

.box
  @extend %block
  background-color: v("box-background-color")
  border-radius: v("box-radius")
  box-shadow: v("box-shadow")
  color: v("box-color")
  display: block
  padding: v("box-padding")

a.box
  &:hover,
  &:focus
    box-shadow: v("box-link-hover-shadow")
  &:active
    box-shadow: v("box-link-active-shadow")