@mixin base-button {
    border: none;
    outline: none;
    color: white !important;
    padding: 10px 24px;
    margin-left: $button-margin-left;
    margin-right: $button-margin-right;
    // Needed because on mobile buttons can get vertical
    margin-top: $button-margin-vertical;
    margin-bottom: $button-margin-vertical;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    border-radius: $button-radius;
    transition: $material-transition;
    box-shadow: $shadow-small;

    &:hover {
        box-shadow: $shadow-medium;
    }

    &:active, &:hover, &::-moz-focus-inner {
        outline: none;
        border: none;
    }

    &:disabled, &:disabled:hover {
        background-color: #757575;
    }
}

.button-blue {
    @include base-button;
    background-color: #2196f3;
}

.button-blue:hover {
    background-color: #64b5f6;
}