.material-button {
    background-color: #2199E8;
    border: 1px solid transparent;
    // border-radius: 0;
    border-radius: 3px;
    box-shadow: $shadow-minor;
    // color: #FEFEFE;
    color: lighten($button-focus-color, 10%);
    cursor: pointer;
    display: inline-block;
    float: right;
    // font-size: 0.9rem;
    font-size: ($default-font-size * 1.1);
    line-height: 1;
    // margin: 0 0 1rem 0;
    margin: 0;
    overflow: hidden;
    // padding: 0.85em 1em;
    padding: ($default-gap / 2) ($default-gap * 2);
    position: relative;
    text-align: center;
    vertical-align: middle;

    // transition: background-color 0.25s ease-out, color 0.25s ease-out;
    transition: background-color $default-transition-speed ease,
                color $default-transition-speed ease,
                box-shadow $default-transition-speed ease;

    -webkit-appearance: none;

    span {
        color: #FFFFFF;
        display: inline-block;
        font-size: 1rem;
        font-weight: 500;
        line-height: 1.125rem;
        margin: 0;
        position: relative;
        text-transform: uppercase;
        z-index: 1;
    }

    a {
        outline: none;
    }

    &.flat-button {
        background: transparent;
        border: 0 none;
        box-shadow: none;
        height: 2.125rem;
        margin: 0.4375rem 0 0.4375rem 0.5rem;
        min-width: 5.5rem;
        padding: 0;
        position: relative;
        text-align: center;

        span {
            color: $button-focus-color;
            padding: 0.5rem;
        }

        &:hover,
        &.hover {
            background: rgba($button-focus-color, 0.12) !important;
            box-shadow: none;

            span {
                color: darken($button-focus-color, 10%) !important;
            }
        }

        &.active-state {
            // background: transparent !important;

            span {
                color: darken($button-focus-color, 20%) !important;
            }
        }

        &::before {
            background: rgba($button-focus-color, 0.24);
            border: 4px solid rgba($button-focus-color, 0.0525);
        }
    }

    &.delete-action {
        margin-right: 0.5rem;

        span {
            color: $delete-action-color;
        }

        &:hover,
        &.hover {
            background: rgba($delete-action-color, 0.12) !important;

            span {
                color: darken($delete-action-color, 10%) !important;
            }
        }

        &.active-state {
            span {
                color: darken($delete-action-color, 20%) !important;
            }
        }

        &::before {
            background: rgba($delete-action-color, 0.24);
            border: 4px solid rgba($delete-action-color, 0.0525);
        }
    }

    &.primary-action {
        margin-right: 0.5rem;

        span {
            color: $primary-action-color;
        }

        &:hover,
        &.hover {
            background: rgba($primary-action-color, 0.12) !important;

            span {
                color: darken($primary-action-color, 10%) !important;
            }
        }

        &.active-state {
            span {
                color: darken($primary-action-color, 20%) !important;
            }
        }

        &::before {
            background: rgba($primary-action-color, 0.24);
            border: 4px solid rgba($primary-action-color, 0.0525);
        }
    }

    &::before {
        // background: darken($button-focus-color, 40%);
        background-color: #192024;
        // border: 4px solid darken($button-focus-color, 20%);
        border: 4px solid #192024;
        border-radius: 50%;
        content: '';
        display: block;
        height: 20px;
        left: 50%;
        margin: -10px 0 0 -10px;
        opacity: 0;
        position: absolute;
        // transform: scale(0);
        top: 50%;
        width: 20px;
        will-change: opacity, transform;
        z-index: 0;

        // transition-duration: 750ms !important;
        // transition: all 1000ms ease-in,  opacity 750ms cubic-bezier(0.250, 0.460, 0.450, 0.940);
        // transition-timing-function: cubic-bezier(0.250, 0.460, 0.450, 0.940);
    }

    &.click-init {
        &::before {
            transform: scale(0);
        }
    }

    &:hover,
    &.hover {
        box-shadow: $shadow-major;
        color: $button-focus-color;
    }

    // &:active,
    // &:focus,
    &.active-state {
        &::before {
            opacity: 1;
            transform: scale(9);

            transition-duration: 750ms !important;
            transition-property: transform, opacity, -webkit-transform;
            transition-timing-function: cubic-bezier(0.250, 0.460, 0.450, 0.940);
            // transition: transform ($default-transition-speed * 4) ease,
            //             opacity $default-transition-speed ease ($default-transition-speed * 1.3);
        }
    }

    &:focus {
        outline: none;
    }
}
