/**
 * @copyright   2010-2015, The Titon Project
 * @license     http://opensource.org/licenses/BSD-3-Clause
 * @link        http://titon.io
 */

@import "../common";

@include export("button-group") {
    #{$buttonGroup-class} {
        @include reset-inline-block;
        @include reset-list;
        @include clear-fix;
        white-space: nowrap;

        > li,
        > #{$button-class} {
            float: $align-direction;
            border-radius: 0;

            &:hover,
            &.is-active { z-index: 1; }
        }

        > li {
            position: relative;
            list-style: none;

            #{$button-class} {
                display: block;
                border-radius: 0;
            }
        }

        //----- Effects -----//

        &#{$shape-round-class} {
            @include button-group-first-child {
                border-top-#{$align-direction}-radius: $round;
                border-bottom-#{$align-direction}-radius: $round;
            }

            @include button-group-last-child {
                border-top-#{$align-opposite-direction}-radius: $round;
                border-bottom-#{$align-opposite-direction}-radius: $round;
            }
        }

        @if index($buttonGroup-effects, "pill") {
            &#{$shape-pill-class} {
                border-radius: $pill;

                @include button-group-first-child {
                    border-top-#{$align-direction}-radius: $pill;
                    border-bottom-#{$align-direction}-radius: $pill;
                }

                @include button-group-last-child {
                    border-top-#{$align-opposite-direction}-radius: $pill;
                    border-bottom-#{$align-opposite-direction}-radius: $pill;
                }
            }
        }

        @if index($buttonGroup-effects, "skew") {
            &#{$shape-skew-class} {
                border-top-#{$align-direction}-radius: $skew;
                border-top-#{$align-opposite-direction}-radius: $skew;
                border-bottom-#{$align-direction}-radius: 0;
                border-bottom-#{$align-opposite-direction}-radius: 0;

                @include button-group-first-child {
                    border-top-#{$align-direction}-radius: $skew;
                    border-bottom-#{$align-direction}-radius: 0;
                }

                @include button-group-last-child {
                    border-top-#{$align-opposite-direction}-radius: $skew;
                    border-bottom-#{$align-opposite-direction}-radius: 0;
                }
            }
        }
    }

    // Space out groups
    #{$buttonGroup-class} + #{$buttonGroup-class} {
        margin-#{$align-direction}: $margin;
    }

    //-------------------- Modifiers --------------------//

    @if index($buttonGroup-modifiers, "vertical") {
        #{$buttonGroup-class-modifier-vertical} {
            vertical-align: top;

            > li,
            > #{$button-class} {
                float: none;
                display: block;
                width: 100%;
                max-width: 100%;

                &:hover { z-index: 1; }
            }

            &#{$shape-round-class},
            &#{$shape-pill-class},
            &#{$shape-skew-class},
            &#{$shape-skew-class}-reverse {
                #{$button-class} { border-radius: 0; }
            }

            //----- Effects -----//

            &#{$shape-round-class} {
                #{$button-class}:first-child,
                #{$button-class}:last-child { border-radius: 0; }

                @include button-group-first-child {
                    border-top-#{$align-direction}-radius: $round;
                    border-top-#{$align-opposite-direction}-radius: $round;
                }

                @include button-group-last-child {
                    border-bottom-#{$align-direction}-radius: $round;
                    border-bottom-#{$align-opposite-direction}-radius: $round;
                }
            }

            @if index($buttonGroup-effects, "pill") {
                &#{$shape-pill-class} {
                    border-radius: $pill;

                    @include button-group-first-child {
                        border-top-#{$align-direction}-radius: $pill;
                        border-top-#{$align-opposite-direction}-radius: $pill;
                        border-bottom-#{$align-direction}-radius: 0;
                        border-bottom-#{$align-opposite-direction}-radius: 0;
                    }

                    @include button-group-last-child {
                        border-top-#{$align-direction}-radius: 0;
                        border-top-#{$align-opposite-direction}-radius: 0;
                        border-bottom-#{$align-direction}-radius: $pill;
                        border-bottom-#{$align-opposite-direction}-radius: $pill;
                    }
                }
            }

            @if index($buttonGroup-effects, "skew") {
                &#{$shape-skew-class} {
                    border-top-#{$align-direction}-radius: $skew-y 1.5rem;
                    border-bottom-#{$align-direction}-radius: $skew-y 1.5rem;

                    @include button-group-first-child {
                        border-top-#{$align-direction}-radius: $skew-reverse;
                    }

                    @include button-group-last-child {
                        border-bottom-#{$align-direction}-radius: $skew-reverse;
                        border-top-#{$align-opposite-direction}-radius: 0;
                    }
                }

                &#{$shape-skew-class}-reverse {
                    border-top-#{$align-opposite-direction}-radius: $skew-y 1.25rem;
                    border-bottom-#{$align-opposite-direction}-radius: $skew-y 1.25rem;

                    @include button-group-first-child {
                        border-top-#{$align-opposite-direction}-radius: $skew-reverse;
                    }

                    @include button-group-last-child {
                        border-bottom-#{$align-opposite-direction}-radius: $skew-reverse;
                    }
                }
            }
        }
    }

    @if index($buttonGroup-modifiers, "justified") {
        #{$buttonGroup-class-modifier-justified} {
            display: table;
            width: 100%;

            > li,
            > #{$button-class} {
                float: none;
                display: table-cell;
            }
        }
    }
}