@import "../variables";

.sg-btn {
    background-color: $sgPrimary;
    cursor: pointer;
    font-family: $mlp-font-gotham-medium;
    font-size: $mlp-font-size-14px;
    text-transform: uppercase;
    padding: ($spacer * 0.65) $spacer ($spacer * 0.35);
    color: $mlp-green;

    &--smaller {
        font-size: $mlp-font-size-12px;
        padding: ($spacer * 0.25) ($spacer * 0.5) ($spacer * 0.15);
    }

    &:not(:disabled):hover {
        background-color: $sgPrimaryHover;
    }

    &--lighter {
        background-color: $mlp-green;
        border: 1px solid $mlp-green;
        color: $sgPrimary;

        &:not(:disabled):hover {
            background-color: $sgSecondaryHover;
            border-color: $sgSecondaryHover;
        }
    }

    &--inverted {
        background-color: $white;
        color: $mlp-green;
        border: 1px solid $mlp-green;

        &:not(:disabled):hover {
            background-color: $mlp-green;
            color: $white;
        }
    }
    &:disabled {
        opacity: .35;
        cursor: not-allowed;
    }
}