@import "_mixins", "_vars";

.btn {
    cursor: pointer;
}

button, input[type="submit"], input[type="button"], a.button {
    border: $button-border solid $button-border-color;
    cursor: pointer;
    text-shadow: 1px 1px 1px #ffffff;
    min-width: $button-min-width;
    height: $button-height;
    font-size: $button-font-size;
    background: $button-background;
    @include box-shadow-out(#ffffff);

    &:hover, :active {
        text-shadow: -1px -1px 1px #ffffff;
        background: $button-active-background;
    }
}

@mixin color-button($color1, $color2, $fallback, $shadow) {
    color: #ffffff;
    text-shadow: 1px 1px 1px #696969;
    @include gradient-top-bottom($color1, 0, $color2, 100, $fallback);
    @include box-shadow-out($shadow);

    &:hover, :active {
        text-shadow: -1px -1px 1px #696969;
        @include gradient-top-bottom($color2, 0, $color1, 100, $fallback);
    }
}

button.red {
    @include color-button(#f17068, #d16059, #d9645b, #ff8d7c);
}

button.green {
    @include color-button(#9df1ad, #77d17c, #90d99d, #c8ffb6);
}

button.blue {
    @include color-button(#beddf1, #7ba9d1, #97afd9, #cbf3ff);
}

ul.btns {
    list-style: none;
    overflow: hidden;
    font-size: 12px;

    li {
        background: $button-crumb-background;
        border-left: $button-border solid $button-border-color;
        border-top: $button-border solid $button-border-color;
        border-bottom: $button-border solid $button-border-color;
        float: left;
        text-shadow: -1px -1px 1px #ffffff;
        cursor: pointer;

        @include box-shadow-out(#ffffff);

        &:last-child {
            border-right: $button-border solid $button-border-color;
        }

        &:before {
            border-left-color: $button-border-color;
            margin-left: 1px;
        }
    }

    a {
        display: block;
        padding: $button-crumb-padding;
    }

    .active {
        cursor: default;
    }

    .active, li:hover {
        background: $button-crumb-active-background;
    }
}

button.simple {
    background: $button-background;
    border: $button-border solid $button-border-color;
    text-shadow: -1px -1px 1px #ffffff;
    padding: 5px;
    min-width: 40px;

    &:hover {
        background: $button-background;
    }
}