$box-radius: $radius-large !default
$box-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default
$box-padding: 1.25rem !default

$box-link-hover-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px $link !default
$box-link-active-shadow: inset 0 1px 2px rgba($black, 0.2), 0 0 0 1px $link !default

$all-colors: mergeColorMaps($colors, $shades)

.box
    @extend %block
    border-radius: $box-radius
    box-shadow: $box-shadow
    display: block
    padding: $box-padding
    @each $name, $pair in $all-colors
        $color: nth($pair, 1)
        $color-invert: findColorInvert($color)
        &.is-#{$name}
            background-color: $color
            color: $color-invert
            box-shadow: 0 2px 3px rgba($color-invert, 0.1), 0 0 0 1px rgba($color-invert, 0.1)


a.box
    &:hover,
    &:focus
        box-shadow: $box-link-hover-shadow
    &:active
        box-shadow: $box-link-active-shadow
    @each $name, $pair in $all-colors
        $color: nth($pair, 1)
        $color-invert: findColorInvert($color)
        &.is-#{$name}
            &:hover,
            &:focus
                box-shadow: 0 2px 3px rgba($color-invert, 0.1), 0 0 0 1px $link
            &:active
                box-shadow: inset 0 1px 2px rgba($color-invert, 0.2), 0 0 0 1px $link

