// 
// @TODO: Add docs to Button!
//


@mixin Button() {
    .Button {
        @include button;
        @each $name, $color in $foundation-colors {
            &--#{$name} {
              @include button-style($color, auto);
            }
        }
        &--full {
            @include button-expand(true);
        }
        &--hollow {
            @include button-hollow;
            @include button-hollow-style($button-background);
            @each $name, $color in $foundation-colors {
                &--#{$name} {
                  @include button-hollow-style($color);
                }

                &--#{$name}.dropdown::after {
                  border-top-color: $color;
                }
          }
        }
        &--dropdown {
            @include button-dropdown;
        }
        &--small {
            font-size: map-get($button-sizes, small); 
        }
        &--large {
            font-size: map-get($button-sizes, large);
        }
        &--transparent {
            @include button-style(white, $light-gray, $black);
            background-color: transparent;
//              @include button-style(white, auto, white);
            
        }
        &--secondary {
//            @include button-style($secondary-color, auto, $secondary-color);
            @include button(false, $secondary-color, auto, $secondary-color, hollow);
//            &.Button--hollow {
//                @include button(false, $secondary-color, auto, $secondary-color, hollow);
//            }

        }
        &.is-disabled {
            @include button-disabled;
        }        
        @content;
    }
    .ButtonClose {
        @include close-button;
    }
    .Button--withSpinner {
        .Spinner {
            display: none;
            vertical-align: middle;
        }
        &.is-loading {
            .Spinner {               
                display: inline-block;
            }

        }
    }
    
    .ButtonGroup {
        @include button-group();
        
        &--expand {
            @include button-group-expand();
        }
    }
    
}