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

@import "../common";

@include export("button") {
    #{$button-class} {
        @include reset-inline-block;
        border: 0;
        margin: 0;
        cursor: pointer;
        text-align: center;
        font-weight: normal;
        line-height: normal;
        white-space: nowrap;
        text-decoration: none;
        @include size-medium;
        @include is-small(true, true) { @include size-small; }
        @include is-large(true, true) { @include size-large; }

        &.is-disabled,
        &[disabled] {
            cursor: not-allowed;
        }

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

        @if index($button-effects, "oval") {
            &#{$shape-oval-class} {
                border-radius: #{$oval-x} / #{$oval-y};
            }
        }

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

        @if index($button-effects, "skew") {
            &#{$shape-skew-class} {
                border-radius: #{$skew-x $skew-x} 0 0 / #{$skew-y $skew-y} 0 0;
            }
        }
    }

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

    @if index($button-modifiers, "gloss") {
        #{$button-class-modifier-gloss} {
            &::after {
                content: "";
                position: absolute;
                width: 100%;
                height: 60%;
                top: 1%;
                left: 0;
                border-radius: 0 0 2rem 2rem / 0 0 1rem 1rem;
                background: linear-gradient(to left, white(.3) 0%, white(0) 50%, white(.3) 100%);
            }

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

            &#{$shape-round-class}::after {
                border-radius: .2rem .2rem 2rem 2rem / .5rem .5rem 1rem 1rem;
                width: 98%;
                left: 1.5%;
            }

            @if index($button-effects, "oval") {
                &#{$shape-oval-class}::after {
                    width: 90%;
                    left: 5.5%;
                    border-radius: 5rem 5rem 4rem 4rem / 1.5rem 1.5rem 1.5rem 1.5rem;
                }
            }

            @if index($button-effects, "pill") {
                &#{$shape-pill-class}::after {
                    width: 90%;
                    left: 5.5%;
                    border-radius: 1rem 1rem 2rem 2rem / 1rem 1rem 1rem 1rem;
                }
            }

            @if index($button-effects, "skew") {
                &#{$shape-skew-class}::after {
                    width: 90%;
                    left: 5.5%;
                    border-radius: 1rem 1rem 3rem 3rem / 1rem 1rem 2rem 2rem;
                }
            }
        }
    }

    @if index($button-modifiers, "reflect") {
        #{$button-class-modifier-reflect}::after {
            content: "";
            position: absolute;
            width: 100%;
            height: 50%;
            top: 0;
            left: 0;
            background: linear-gradient(180deg, white(0), white(.3));
        }
    }

    @if index($button-modifiers, "glare") {
        #{$button-class-modifier-glare}::after {
            content: "";
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            background: linear-gradient(160deg, white(.5) 0%, white(.1) 50%, white(0) 50%, white(.3) 100%);
        }
    }

    @if index($button-modifiers, "popout") {
        #{$button-class-modifier-popout} {
            box-shadow: 0 6px 0 0 black(.25) !important;
            top: -3px;

            &:active {
                box-shadow: 0 3px 0 0 black(.5) !important;
                top: 0;
            }
        }
    }
}