@import "../../variables/colors.scss";
@import "../../variables/spacing.scss";
@import "../../variables/fonts.scss";

$medgo-action-button-color: $white;
$medgo-action-button-color-hover: $primary;
$medgo-action-button-font-size: 12px;
$medgo-action-button-font-family: $font-family-bw-modelica;

.medgo-action-button-animation {
    transition-property: color;
    transition-property: background-color;
    transition-duration: 100ms;
}

.medgo-action-button {
    padding: $padding 4 * $padding;
    border: 1px solid $medgo-action-button-color;
    font-size: $medgo-action-button-font-size;
    background-color: transparent;
    border-radius: 5px;
    color: $medgo-action-button-color;
    width: 100%;
    font-family: $medgo-action-button-font-family;
    line-height: 24px;
    @extend .medgo-action-button-animation;
}

.medgo-action-button:hover {
    background-color: $medgo-action-button-color;
    color: $medgo-action-button-color-hover;
    @extend .medgo-action-button-animation;
}