# Shadows

The shadow() mixin is an easy way to get UI consistency with your box shadows throughout your application as well as clean up the development environment.

The mixins will pull the values based on the $shadows variable in the _variables.scss file at the root of the /00_Abstracts directory.

Shadows can play an important role in the various states of you UI elements. Take your button elements for example. They have a number ways they communicate their functionality to your users.

# Example:

.button {
    text-align: center;
    @include p(md); // add medium padding to the button

    &:hover {
        @include shadow(md);
    }

    &:disabled {
        background-color: color(light, lighter); // uses lighter variation of the light color in your palette
        color: text-color(light, lighter); // automatically selects accessible color for text based on background color
        @include shadow(inner);
    }

    &:focus {
        @include shadow(outline);
    }
}

# !important

Setting the !important property on your rules is as simple as adding another value to your your mixin - shadow(lg, true).