.mat-button,
.mat-flat-button,
.mat-raised-button,
.mat-stroked-button {
    height: 40px;
    transition: all .2s ease-in-out;

    background: $neutral-90;

    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: bold;

    @include notouch-hover {
        background: darken($neutral-90, 5%);
    }

    p,
    span {
        color: $neutral-10;
    }

    &.mat-button-disabled {
        border: none !important;

        background: $neutral-90 !important;

        cursor: not-allowed !important;
        @include notouch-hover {
            background: $neutral-90 !important;
        }
        p,
        span {
            color: $neutral-60 !important;
        }
    }
}

.mat-flat-button.mat-primary {
    @include set-bg-lighten($primary, $white, 10%);

    p,
    span {
        color: $white;
    }
}

.mat-flat-button.mat-secondary {
    @include set-bg-lighten($secondary, $white, 5%);

    p,
    span {
        color: $white;
    }
}

.mat-flat-button.mat-warn {
    @include set-bg-darken($error, $white, 5%);
}

.mat-flat-button.mat-outline {
    border: 1px solid $neutral-40;

    @include set-bg-darken($white, $neutral-90, 5%);
}

.mat-flat-button.btn-small {
    height: 36px;

    line-height: 2;

    .mat-icon {
        position: relative;
        top: -2px;
    }
}

.mat-flat-button.btn-icon {
    &:not(.mat-primary),
    &:not(.mat-secondary) {
        border: 1px solid $neutral-70;

        background: white;
    }

    &--only-icon {
        border: none;
        width: auto;
        min-width: 0;
        height: auto;
        min-height: 0;
        padding: 0 !important;

        background: transparent;

        line-height: normal;

        .mat-icon {
            width: 16px !important;
            height: 16px !important;

            color: $primary;

            font-size: 16px;
        }
    }

    &.mat-secondary {
        background: $secondary;
        .mat-icon {
            color: $white;
        }
    }

    &__rounded {
        border-radius: 100%;
        width: 40px;
        min-width: 40px;
        padding: 0;
        transition: all .2s ease-in-out;

        .mat-icon {
            position: relative;
            bottom: 1px;
        }
    }

    &.mat-primary {
        .mat-icon {
            color: $white;
        }
    }
}

.mat-flat-button.mat-ghost {
    padding-right: $spacing-s;
    padding-left: $spacing-s;
    transition: all .2s ease-in-out;

    background-color: transparent;

    @include notouch-hover {
        background: transparent;

        p,
        span {
            color: $secondary;
        }
    }

    &--small {
        //height: auto;
        text-transform: none;
        line-height: normal;
        letter-spacing: 0;

        .mat-icon,
        p,
        span {
            color: $secondary;
        }
    }
}

.mat-flat-button.mat-ghost.disabled {
    opacity: .5;
}

.top-animation,
.right-animation {
    position: relative;

    padding-right: 25px !important;

    @include touch-styles {
        padding-right: 0 !important;
    }
    @include notouch-hover() {
        .mat-icon {
            transform: translateY(-50%);
            opacity: 1;
        }
    }

    .mat-icon {
        position: absolute;
        top: 50%;
        right: 0;

        transform: translateY(-90%);
        opacity: 0;
        transition: .2s;
        transition: transform .2s ease-in-out;

        color: $secondary;
    }
}

.right-animation {
    transition: .2s;

    @include notouch-hover() {
        .mat-icon {
            transform: translate(0, -50%);
            opacity: 1;
        }
    }

    a:after,
    &:after {
        content: none;
    }

    .mat-icon {
        position: absolute;
        top: 50%;
        right: 0;

        transform: translate(-10px, -50%);
        opacity: 0;
        transition: transform .2s ease-in-out;

        color: $secondary;
    }
}

.mat-flat-button.btn-download {
    @extend .top-animation;

    padding-left: $spacing-s;

    background-color: transparent;

    text-transform: capitalize;
    letter-spacing: 0;

    p,
    span,
    .mat-icon {
        color: $secondary;
    }
}

.icon--small {
    width: 16px !important;
    height: 16px !important;

    font-size: 16px;
}