/* ========================================
   NAIRA BUTTON COMPONENT
   ======================================== */

/* Base Button */
.button_naira {
    position: relative;
    padding: 0;
    overflow: hidden;
    background-color: transparent;
    border: none;
    cursor: pointer;
    -webkit-transition: background-color 0.65s;
    transition: background-color 0.65s;
    z-index: 1;
    border-radius: 16px;
}

.button_naira::before {
    content: '';
    position: absolute;
    left: -50%;
    width: 200%;
    height: 200%;
    top: -50%;
    z-index: -1;
    -webkit-transform: translate3d(0, -100%, 0) rotate3d(0, 0, 1, -10deg);
    transform: translate3d(0, -100%, 0) rotate3d(0, 0, 1, -10deg);
}

.button_naira > span {
    display: block;
    position: relative;
    z-index: 2;
}

.button_naira .button_icon {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
}

.button_naira .button_icon svg {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
}

.button_naira > span,
.button_naira .button_icon {
    padding: 1em 2em;
    white-space: nowrap;
    -webkit-transition: transform 0.65s cubic-bezier(0.75, 0, 0.125, 1);
    transition: transform 0.65s cubic-bezier(0.75, 0, 0.125, 1);
}

/* Hover States */
.button_naira:hover::before {
    -webkit-animation: anim-naira-down 0.65s forwards ease-in;
    animation: anim-naira-down 0.65s forwards ease-in;
}

.button_naira:hover .button_icon {
    -webkit-transform: translate3d(0, 0, 0) !important;
    transform: translate3d(0, 0, 0) !important;
}

.button_naira:hover > span {
    opacity: 1;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
}

/* ========================================
   DIRECTION MODIFIER (Up)
   ======================================== */
.button_naira-up::before {
    -webkit-transform: translate3d(0, 100%, 0) rotate3d(0, 0, 1, 10deg);
    transform: translate3d(0, 100%, 0) rotate3d(0, 0, 1, 10deg);
}

.button_naira-up .button_icon {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
}

.button_naira-up:hover::before {
    -webkit-animation: anim-naira-up 0.65s forwards ease-in;
    animation: anim-naira-up 0.65s forwards ease-in;
}

.button_naira-up:hover > span {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
}

/* ========================================
   ANIMATIONS
   ======================================== */
@-webkit-keyframes anim-naira-down {
    50% {
        -webkit-transform: translate3d(0, -50%, 0) rotate3d(0, 0, 1, -10deg);
        transform: translate3d(0, -50%, 0) rotate3d(0, 0, 1, -10deg);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
    100% {
        -webkit-transform: translate3d(0, 0%, 0) rotate3d(0, 0, 1, 0deg);
        transform: translate3d(0, 0%, 0) rotate3d(0, 0, 1, 0deg);
    }
}

@keyframes anim-naira-down {
    50% {
        -webkit-transform: translate3d(0, -50%, 0) rotate3d(0, 0, 1, -10deg);
        transform: translate3d(0, -50%, 0) rotate3d(0, 0, 1, -10deg);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
    100% {
        -webkit-transform: translate3d(0, 0%, 0) rotate3d(0, 0, 1, 0deg);
        transform: translate3d(0, 0%, 0) rotate3d(0, 0, 1, 0deg);
    }
}

@-webkit-keyframes anim-naira-up {
    50% {
        -webkit-transform: translate3d(0, 50%, 0) rotate3d(0, 0, 1, 10deg);
        transform: translate3d(0, 50%, 0) rotate3d(0, 0, 1, 10deg);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
    100% {
        -webkit-transform: translate3d(0, 0%, 0) rotate3d(0, 0, 1, 0deg);
        transform: translate3d(0, 0%, 0) rotate3d(0, 0, 1, 0deg);
    }
}

@keyframes anim-naira-up {
    50% {
        -webkit-transform: translate3d(0, 50%, 0) rotate3d(0, 0, 1, 10deg);
        transform: translate3d(0, 50%, 0) rotate3d(0, 0, 1, 10deg);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
    100% {
        -webkit-transform: translate3d(0, 0%, 0) rotate3d(0, 0, 1, 0deg);
        transform: translate3d(0, 0%, 0) rotate3d(0, 0, 1, 0deg);
    }
}

/* ========================================
   COLOR MODIFIERS (Add your colors here)
   ======================================== */

/* HERO BUTTON */
.hero_btn{ background-color: #F7B718; }
.hero_btn::before,
.hero_btn:hover { 
    background: #f5af00; 
    -webkit-transition: background-color 0s 0.65s;
    transition: background-color 0s 0.65s;
}
.hero_btn .button_icon,
.hero_btn > span { color: #000; }
.hero_btn:hover .button_icon { color: #000 !important; }

/* PRIMARY */
.button_primary{ background-color: #F9C546; }
.button_primary::before,
.button_primary:hover { 
    background: #f5af00; 
    -webkit-transition: background-color 0s 0.65s;
    transition: background-color 0s 0.65s;
}
.button_primary .button_icon,
.button_primary > span { color: #000; }
.button_primary:hover .button_icon { color: #000 !important; }

/* SECONDARY */
.button_secondary{ background-color: transparent; border: 1px solid #0D1A3A; }
.button_secondary::before,
.button_secondary:hover { 
    background: #0D1A3A; 
    -webkit-transition: background-color 0s 0.65s;
    transition: background-color 0s 0.65s;
}
.button_secondary .button_icon,
.button_secondary > span { color: #0D1A3A; }
.button_secondary:hover .button_icon { color: #fff !important; }