@import '../../styles/constants';

.ButtonComponent {

    height: 40px;
    padding: 0 30px;

    font-weight: bold;
    font-size: 16px;
    text-transform: uppercase;

    border: none;
    border-radius: $border-radius-large;
    outline: none;

    cursor: pointer;

    transition: background-color 0.2s ease-in-out, color 0.1s ease-in-out;

    &--primary {
        color: $primary-color-white;

        background-color: $primary-color-teal;

        &:hover {
            background-color: darken($color: $primary-color-teal, $amount: 10%);
        }
    }

    &--secondary {
        color: $primary-color-teal;

        background-color: $primary-color-white;
        border: solid 1px $primary-color-teal;

        &:hover {
            color: $primary-color-white;

            background-color: $primary-color-teal;
        }
    }
}