/**
 *
 *
 *
 *
 */

@mixin components__button() {
    .button {
        position: relative;
        color: $crispy__color-white;

        border: 0;
        padding: 10px 30px;

        transition: background-color 0.3s ease-in-out;
        background: url(
            data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAFklEQVQYlWNgIBJIIWFsfCooGEg3AACalwOpdVZM4wAAAABJRU5ErkJggg==
        ) repeat;

        &--highlight {
            border: 4px solid $crispy__color-background;

            &:after, &:before {
                position: absolute;
                z-index: -1;

                top: -6px;
                width: 15px;
                height: 56px;
                content: '';
            }

            &:before {
                left: -6px;
            }

            &:after {
                right: -6px;
            }
        }
    }

    @each $name, $color in $crispy__colors {
        .button--#{$name} {
            text-shadow: 0 0 3px #000000;
            background-color: darken($color, 8%) !important;

            &:hover {
                background-color: lighten($color, 5%) !important;
            }

            &.button--highlight {
                &:after, &:before {
                    background-color: darken($color, 8%) !important;
                }

                &:hover {
                    &:after, &:before {
                        background-color: lighten($color, 5%)  !important;
                    }
                }
            }
        }
    }
}