_component.scss

@import "asimov-contrib-buttons/mixin";

@include exports("buttons") {

    $docs-variations: "";

    /* ==========================================================================
       @section #next-major

       Buttons

       All the buttons in rainbow

       @endsection
       ========================================================================== */

    .button {
        @include button();
    }

    /**
     * @section #next-minor
     *
     * Link button
     *
     * A button style that looks like normal link
     *
     * @markup
     * <div class="button button--link">Click me</div>
     *
     * @default
     * @endsection
     */

    .button--link {
        @include link-button();

        box-shadow: none;

        &:focus {
            outline: 1px dotted get("colors/tertiary");
        }
    }

    /**
     * @section #next-minor
     *
     * Default button
     *
     * @markup
     * <div class="button {$modifiers}">Click me</div>
     *
     * @nodefault
     */

    @each $variation, $properties in get("button/variation") {

        // For docs only!
        $docs-variations: $docs-variations + "<div class=\"button button--#{$variation} {$modifiers}\">Click me</div>";

        /* @modifier .button--#{$variation} - #{get("description", $properties)} */

        .button--#{$variation} {
            @include button($variation, $base:false);

            $states: map-merge(
                get("button/base/states") or (),
                get("button/variation/#{$variation}/states") or ()
            );

            @if $states {
                @each $state, $properties in $states {
                    &:#{$state} {
                        color: get("color", $properties);
                        padding: get("spacing", $properties);
                        background: get("background", $properties);
                        border: get("border", $properties);
                        border-radius: get("border-radius", $properties);
                        font-size: get("font-size", $properties);
                        box-shadow: implode(get("box-shadow", $properties));
                    }
                }
            }
        }
    }

    /* @endsection */


    /**
     * @section #next-minor
     *
     * Button sizes
     *
     * A collection of button sizes variations
     *
     * @nodefault
     * @markup
     * #{$docs-variations}
     */

    @each $size, $p1 in get("button/size") {
        /* @modifier .button--#{$size} */

        .button--#{$size} {
            @include button--size($size);
        }
    }

    /* @endsection */


//    /**
//     * @section #next-minor
//     *
//     * Button shapes
//     *
//     * A collection of button shape variations
//     *
//     * @nodefault
//     * @markup
//     */
//    @each $variation, $p2 in get("button/variation") {
//        /*
//         * <div class="button button--#{$variation} {$modifiers}">Click me</div>
//         */
//    }
//
//    @each $shape, $p1 in get("button/shape") {
//        /* @modifier .button--#{$shape} */
//
//        .button--#{$shape} {
//            @include button--shape($shape);
//        }
//    }
//
//    /* @endsection */

}