@import '../../../styles/themes';

.button {
    border-radius: 6px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0);
    border: none;
    text-align: center;
    cursor: pointer;
    text-decoration: none;

    &:focus {
        outline: none;
    }

    &--primary {
        background-color: $primary;
        color: #ffffff;
        border: 2px solid $primary;
        // transition: background-color 0.4s linear, color 0.4s linear, border 0.4s linear;


        &:hover {
            background-color: #f49744;
            color: $white;
            border: 2px solid $primary;
        }
    }

    &--secondary {
        background-color: #ffffff;
        color: $text-color;
        border: 2px solid $primary;
        transition: background-color 0.4s linear, color 0.4s linear, border 0.4s linear;

        &:hover {
            background-color: $primary;
            color: #ffffff;
            border: 2px solid $primary;
        }
    }

    &--transparent{
        background-color: #ffffff;
        color: $text-color;
        transition: background-color 0.4s linear, color 0.4s linear, border 0.4s linear;
        border: 2px solid #ffffff;

        &:hover {
            background-color: $light-gray;
            border: 2px solid $light-gray;

        }
    }
}