$btn-color-1: #ffab2d;

.btn {
    min-width: 150px;
    font-size: $default-font-size;
    line-height: 1.71;
    font-family: "Rubik", sans-serif;
    font-weight: 500;

    &.btn-primary {
        background-color: rgba($btn-color-1, 0.2);
        background-image: none;
        color: $btn-color-1;
        border-color: transparent;

        &:not(:disabled) {

            &:hover,
            &:active,
            &.active {
                background-color: $btn-color-1;
                color: white;
            }
        }


        &.focus,
        &:focus {
            box-shadow: 0 0 0 3px rgba($btn-color-1, .5);
        }

        &:not(:disabled):active,
        &:not(:disabled).active {
            border-color: $btn-color-1;
        }
    }

    @include media-breakpoint-down(sm) {
        min-width: 125px;
    }
}

.btn-wrapper {
    @include media-breakpoint-down(sm) {
        @include display-flex();
        justify-content: center;

        .btn:not(:first-child) {
            margin-left: 3rem;
        }
    }
}

.icon-btn {
    cursor: pointer;
}