.button {
    font-size: $button-font-size;
    outline: 0;
    text-decoration: none;
    color: $button-raised-color;
    background-color: $primary-color;
    text-align: center;
    @include bs(0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2));
    @include tr(.2s ease-out);
    cursor: pointer;
    border: $button-border;
    border-radius: $button-radius;
    display: inline-block;
    min-height: $button-height;
    line-height: $button-height;
    padding: $button-padding;
    text-transform: uppercase;
    vertical-align: middle;
    // Gets rid of tap active state
    -webkit-tap-highlight-color: transparent;

    i {
        font-size: $button-icon-font-size;
        line-height: inherit;
        float: left;
        margin-right: 10px;
        &.right {
            margin-right: 0px;
            margin-left: 10px;
        }
    }

    &:hover {
        color: white;
        background-color: $button-raised-background-hover;
        @include bs(0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 7px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -1px rgba(0, 0, 0, 0.2));
    }
    &.flat {
        border: $button-border;
        border-radius: $button-radius;
        display: inline-block;
        height: $button-height;
        line-height: $button-height;
        padding: $button-padding;
        text-transform: uppercase;
        vertical-align: middle;
        // Gets rid of tap active state
        -webkit-tap-highlight-color: transparent;
    }
    &.off,
    :disabled,
    [disabled] {
        pointer-events: none;
        background-color: $button-disabled-background !important;
        box-shadow: none;
        color: $button-disabled-color !important;
        cursor: default;

        &:hover {
            background-color: $button-disabled-background !important;
            color: $button-disabled-color !important;
        }
    }

    // Block button
    &.block {
        width: 100%;
        display: block;
    }
    &.square,
    &.round {
        display: inline-block;
        color: $button-floating-color;
        //position: relative;
        overflow: hidden;
        z-index: 1;
        width: $button-floating-size;
        // min-height: $button-floating-size;
        line-height: $button-floating-size;
        padding: 0;
        border-radius: $button-floating-radius;
        transition: .3s;
        cursor: pointer;
        vertical-align: middle;

        i {
            width: inherit;
            display: inline-block;
            text-align: center;
            color: $button-floating-color;
            font-size: $button-large-icon-font-size;
            line-height: $button-floating-size;
        }
        &:focus {
            background-color: darken($button-raised-background, 10%);
        }
        &:hover {
            background-color: $button-floating-background-hover;
        }

        &:before {
            border-radius: 0;
        }
        &.small {
            width: 34px;
            padding: 0px;
            i {
                font-size: 25px;
                line-height: 34px
            }
        }
        &.xsmall {
            width: 24px;
            padding: 0px;
            i {
                font-size: 20px;
                line-height: 24px
            }
        }
        &.large {
            &.halfway-fab {
                bottom: -$button-floating-large-size / 2;
            }

            width: $button-floating-large-size;
            height: $button-floating-large-size;
            i {
                line-height: $button-floating-large-size;
            }
        }
    }
    &.square {
        border-radius: 3px;
    }

    &.green {
        background-color: $green-color !important;
    }
    &.black {
        background-color: $black-color !important;
    }
    &.blue {
        background-color: $blue-color !important;
    }
    &.red {
        background-color: $red-color !important;
        &:hover {
            color: white;
        }
    }
    &.orange {
        background-color: $orange-color !important;
    }
    &.white {
        background-color: white !important;
        color: initial;
    }
    &.yellow {
        background-color: $yellow-color !important;
    }
    &.tyellow {
        color: $yellow-color !important;
    }
    &.iblack, &.ired, &.iblue, &.iyellow {
        background-color: white;
        border: 2px solid black;
        //line-height: 36px;
        &.active {
            color: white !important;
        }
    }
    &.iblack {
        border: 2px solid $black-color;
        color: $black-color;
        &.active {
            background: $black-color;
        }
    }
    &.iblue {
        border: 2px solid $blue-color;
        color: $blue-color;
        &.active {
            background: $blue-color;
        }
    }
    &.ired {
        border: 2px solid $red-color;
        color: $red-color;
        &.active {
            background: $red-color;
        }
    }
    &.iyellow {
        border: 2px solid #FFD151;
        color: #FFD151;
        &.active {
            background: #FFD151;
        }
    }
    &.xsmall {
        min-height: $button-large-height - 30;
        line-height: $button-large-height - 30;
        padding: 0 1rem;

        i {
            font-size: $button-large-icon-font-size - 30;
        }
    }
    &.small {
        min-height: $button-large-height - 20;
        line-height: $button-large-height - 20;

        i {
            font-size: $button-large-icon-font-size - 20;
        }
    }
    &.large {
        min-height: $button-large-height;
        line-height: $button-large-height;

        i {
            font-size: $button-large-icon-font-size;
        }
    }

    &[disabled] {
        pointer-events: none;
        background-color: #DFDFDF !important;
        -webkit-box-shadow: none;
        box-shadow: none;
        color: #9F9F9F !important;
        cursor: default;
    }
}