// Principal
.btn-principal {
    color: $almost-white !important;
    background: linear-gradient(to left, $pink, $purple);
    border-color: transparent;
}

.btn-principal:hover {
    color: $white !important;
    background: linear-gradient(
        to left,
        darken($pink, 10%),
        darken($purple, 10%)
    );
    text-decoration: none;
}

.btn-principal:focus {
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(248, 248, 248, 0.55);
}

// Principal inverse
.btn-principal-inverse {
    color: $almost-white !important;
    background: linear-gradient(to left, $purple, $pink);
    border-color: transparent;
    font-weight: 700 !important;
    padding: 10px 40px 10px 40px;
    margin-left: -20px;
    font-size: 1.6vw !important;
    left: 55%;
}
.btn-principal-inverse:hover {
    color: $white !important;
    background: linear-gradient(
        to left,
        darken($purple, 10%),
        darken($pink, 10%)
    );
    text-decoration: none;
}

.btn-principal-inverse:focus {
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(248, 248, 248, 0.55);
}

// Pink blue
.btn-pink-blue {
    color: $almost-white !important;
    background: linear-gradient(to left, $blue-2, $pink-2);
    border-color: transparent;
}

.btn-pink-blue:hover {
    color: $white !important;
    background: linear-gradient(
        to left,
        darken($blue-2, 10%),
        darken($pink-2, 10%)
    );
    text-decoration: none;
}

.btn-pink-blue:focus {
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(248, 248, 248, 0.55);
}

// White
.btn-white {
    color: $purple !important;
    font-size: 1.5rem;
    background: $almost-white !important;
    border-color: transparent;
}

.btn-white:hover {
    background: $white !important;
    text-decoration: none;
}

.btn-white:focus {
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(82, 48, 228, 0.75);
}

// Two blue
.btn-two-blue {
    color: $almost-white !important;
    background: linear-gradient(to left, $blue-dark, $blue-light);
    border-color: transparent;
}

.btn-two-blue svg {
    fill: $almost-white !important;
}

.btn-two-blue:hover {
    color: $white !important;
    text-decoration: none;
    background: linear-gradient(
        to left,
        darken($blue-dark, 10%),
        darken($blue-light, 10%)
    );
}

.btn-two-blue:focus {
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(248, 248, 248, 0.55);
}

.btn-two-blue:hover svg {
    fill: $white !important;
    background: linear-gradient(
        to left,
        darken($blue-dark, 10%),
        darken($blue-light, 10%)
    );
}

.btn-two-blue:focus svg {
    fill: $white;
}

// Bitz -success-wait
.btn-bits {
    width: 90%;
    padding: .75em 1em !important;
    color: $white !important;
    font-size: 1.5rem;
    background: linear-gradient(to right, $pink, #3a1d87);
    border-left: none !important;
    border-right: none !important;
    border-top-right-radius: 0 !important;
    border-top-left-radius: 0 !important;
}

.btn-bits:hover {
    background: $white !important;
    color: #3a1d87 !important;
    border: 1px solid #3a1d87 !important;
    text-decoration: none;
}

.btn-bits:focus {
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(82, 48, 228, 0.75);
}

.btn-bits:disabled {
    cursor: not-allowed;
    outline: 0;
}

// Bitz -wait
.btn-waitBits {
    width: 90%;
    padding: .75em 1em !important;
    color: $white !important;
    font-size: 1.5rem;
    background: linear-gradient(to right, $yellow,#ff7b00);
    border-left: none !important;
    border-right: none !important;
    border-top-right-radius: 0 !important;
    border-top-left-radius: 0 !important;
}

.btn-waitBits:hover {
    background: $white !important;
    color: $yellow !important;
    border: 1px solid $yellow !important;
    text-decoration: none;
}

.btn-waitBits:focus {
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(255, 207, 161, 0.75);
}

.btn-waitBits:disabled {
    outline: 0;
    cursor: not-allowed;
}

// Bitz -buy blue-
.btn-noBits {
    width: 90%;
    padding: .75em 1em !important;
    color: $white !important;
    font-size: 1.5rem;
    background: linear-gradient(to right, $red, #ff859d);
    border-left: none !important;
    border-right: none !important;
    border-top-right-radius: 0 !important;
    border-top-left-radius: 0 !important;
}

.btn-noBits:hover {
    background: $white !important;
    color: $red !important;
    border: 1px solid $red !important;
    text-decoration: none;
}

.btn-noBits:focus {
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(255, 0, 51, 0.75);
}

.btn-noBits:disabled {
    cursor: not-allowed;
    outline: 0;
}
/* --- */
.almost-btn-price {
    width: 90%;
    padding: .75em 1em !important;
    color: $white !important;
    font-size: 1.5rem;
    background: #c3c2bd;
    border-left: none !important;
    border-right: none !important;
    border-radius: 4px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    text-align: center;
}