.btn {
    font-size: 12px;
    font-weight: 800;
    border-width: 0;
    border-radius: 0;
    text-transform: uppercase;
    letter-spacing: 1.6px;
    padding: 16px 24px;
    outline: none !important;
}
.btn::before {
    -webkit-transition: all 0.6s ease-in-out;
    -moz-transition: all 0.6s ease-in-out;
    -o-transition: all 0.6s ease-in-out;
    -ms-transition: all 0.6s ease-in-out;
    transition: all 0.6s ease-in-out;
}

/* btn-primary */
.btn-primary {
    background-color: var(--primaryBlue) !important;
}
.btn-primary:hover,
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary,
.btn-primary:focus {
    background-color: var(--black) !important;
    color: var(--white) !important;
}

/* btn-secondary */
.btn-secondary {
    font-size: 14px;
    position: relative;
    background-color: transparent;
    color: var(--black) !important;
    padding: 14px 27px;
    letter-spacing: 2.6px;
    z-index: 0;
    text-wrap: nowrap;
}
.btn-secondary::before {
    background-color: var(--primaryBlue);
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    display: inline-block;
    width: 70px;
    content: "";
    z-index: -1;
    animation: btn-animation-out 0.4s forwards;
}
.btn-secondary:hover,
.btn-secondary:active,
.btn-secondary.active,
.open > .dropdown-toggle.btn-secondary,
.btn-secondary:focus {
    background-color: transparent !important;
    color: var(--black) !important;
}
.btn-secondary:hover::before {
    animation: btn-animation-in 0.6s forwards;
}

/* btn-link */
.btn-link {
    border: none;
    font-size: 14px;
    position: relative;
    color: var(--black) !important;
    padding: 0 0 5px 0;
    text-transform: unset;
    letter-spacing: normal;
    text-decoration: unset;
}
.btn-link::before {
    position: absolute;
    top: calc(100% - 3px);
    left: 0;
    bottom: 0;
    background-color: var(--primaryBlue);
    display: inline-block;
    width: 30px;
    content: "";
    z-index: 1;
    animation: btn-link-animation-out 0.4s forwards;
}
.btn-link:hover,
.btn-link:active,
.btn-link.active,
.open > .dropdown-toggle.btn-link,
.btn-link:focus {
    background-color: transparent !important;
    color: var(--black) !important;
}
.btn-link:hover::before {
    animation: btn-link-animation-in 0.6s forwards;
}

/* btn-danger */
.btn-danger {
    background-color: var(--lightGrey) !important;
    color: var(--grey) !important;
}
.btn-danger:hover,
.btn-danger:active,
.btn-danger.active,
.open > .dropdown-toggle.btn-danger,
.btn-danger:focus {
    background-color: var(--black) !important;
    color: var(--white) !important;
}
/* smaller button */
.btn-sm {
    font-size: 12px;
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
    padding: 6px 18px 5px 17px;
    min-width: 100px;
}

/* disabled */
.btn.disabled,
.btn:disabled,
fieldset:disabled .btn {
    opacity: 0.5;
}

/* animations */
@keyframes btn-animation-in {
    0% {
        width: 70px;
    }
    60% {
        width: 106%;
    }
    100% {
        width: 100%;
    }
}
@keyframes btn-animation-out {
    0% {
        width: 100%;
    }
    50% {
        width: 60px;
    }
    100% {
        width: 70px;
    }
}

@keyframes btn-link-animation-in {
    0% {
        width: 30px;
    }
    60% {
        width: 106%;
    }
    100% {
        width: 100%;
    }
}
@keyframes btn-link-animation-out {
    0% {
        width: 100%;
    }
    50% {
        width: 26px;
    }
    100% {
        width: 30px;
    }
}