/* -------------------------------------------
    Buttons
        - Button
            - Default
            - Solid
        - Outline Button
        - Icon Button
            - Icon Button
            - Reveal Button
            - Slide Button
        - Shadow Button
        - Underline Button
        - Link Button
        - Other Button Styles
        - Button Color Styles
---------------------------------------------- */

// Button
button {
    cursor: pointer;
    transition: color .3s, border-color .3s, background-color .3s, box-shadow .3s;
}
.btn {
    display: inline-block;
    border: 2px solid var(--alpha-change-color-light-2);
    background-color: var(--alpha-change-color-light-2);
    color: var(--alpha-change-color-dark-1);
    outline: 0;
    border-radius: 0;
    // Height 44px, Width 120px for default
    padding: 1.8rem 3.9rem;
    font-weight: 600;
    font-size: 1.4rem;
    letter-spacing: -.025em;
    line-height: 1;
    text-transform: capitalize;
    text-align: center;
    transition: color .3s, border-color .3s, background-color .3s, box-shadow .3s;
    white-space: nowrap;
    cursor: pointer;


    &:hover,
    &:active,
    &:focus {
        color: var(--alpha-change-color-dark-1);
        border-color: var(--alpha-change-border-color-light);
        background-color: var(--alpha-change-border-color-light);
    }

    i {
        display: inline-block;
        margin-#{$left}: .4rem;
        font-size: 1.3em;
        vertical-align: -0.15em;
        line-height: 0;    
    }
}
.btn-search i {
    font-size: inherit;
}

.btn-solid {
    background-color: var(--alpha-white-color);
    border-color: var(--alpha-white-color);
    color: var(--alpha-change-color-dark-1);
    &:hover,
    &:active,
    &:focus {
        border-color:   var(--alpha-change-color-dark-1);
        background-color: var(--alpha-change-color-dark-1);
        color: var(--alpha-white-color);
    }
}

// Outline Button
.btn-outline {
    border: 2px solid var(--alpha-change-color-light-2);
    background-color: transparent;

    &:hover,
    &:active,
    &:focus {
        border-color: var(--alpha-change-border-color-light);
        background-color: var(--alpha-change-border-color-light);
    }
   
    &.btn-outline-light {
        padding: 1.07em 2.21em; 
        border-width: 1px;
    }

    &.btn-bg {
        color: var(--alpha-white-color);
    }
}

.btn-default {
    color: var(--alpha-change-color-dark-1);
    border-color: var(--alpha-change-color-light-3);
    background-color: var(--alpha-change-color-light-3);
    &.disabled {
        border-color: var(--alpha-change-color-light-3);
        background-color: var(--alpha-change-color-light-3);
    }
    &.btn-outline {
        background-color: transparent;
    }
    &:hover,
    &:focus,
    &:active {
        color: var(--alpha-change-color-dark-1);
        border-color: var(--alpha-change-border-color);
        background-color: var(--alpha-change-border-color);
    }
}

.btn-outline2 {
    position: relative;
    border: 0;
    margin: 5px;
    &:after, &:before {
        content: "";
        position: absolute;
        top: -5px;
        left: -5px;
        bottom: -5px;
        right: -5px;
    }
    &:after {
        border: 1px solid;
        border-color: inherit;
        opacity: 1;
        transition: margin .3s,opacity .3s;
    }
    &:hover:after {
        margin: 5px;
        opacity: 0;
    }
}
// Button Icon
.btn-icon-right {
    > i {
        margin-#{$left}: .8rem;
    }
}

.btn-icon-left {
    > i {
        margin-#{$right}: .8rem;
    }
}

.btn-icon {
    > i {
        margin: 0;
        line-height: 1;
    }
}

// Reveal Button
.btn-icon-left.btn-reveal {
    i {
        opacity: 0;
        margin-#{$left}: -1em;
        transform: translateX(if-ltr(.5em, -.5em));
        margin-#{$right}: 0;
        transition: transform .3s, opacity .3s, margin .3s;
    }
    &:hover,
    &:active,
    &:focus {
        i {
            opacity: 1;
            margin-#{$left}: 0;
            transform: translateX(0);
            margin-#{$right}: .7rem;
        }
    }
}

.btn-icon-right.btn-reveal {
    i {
        opacity: 0;
        margin-#{$right}: -1em;
        transform: translateX(if-ltr(-.5em, .5em));
        margin-#{$left}: 0;
        transition: transform .3s, opacity .3s, margin .3s;
    }
    
    &:hover,
    &:active,
    &:focus {
        i {
            opacity: 1;
            margin-#{$left}: .7rem;
            transform: translateX(0);
            margin-#{$right}: 0;
        }
    }
}
// Slide Button
@keyframes slideLeft {
    0% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(if-ltr(-.5em, .5em));
    }
    100% {
        transform: translateX(0);
    }
}

.btn-slide-left {
    &:hover,
    &:active,
    &:focus {
        i {
            animation: .5s ease slideLeft;
        }
    }
}

@keyframes slideRight {
    0% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(if-ltr(.5em, -.5em));
    }
    100% {
        transform: translateX(0);
    }
}

.btn-slide-right {
    &:hover,
    &:active,
    &:focus {
        i {
            animation: .5s ease slideRight;
        }
    }
}

@keyframes slideUp {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-.5em);
    }
    100% {
        transform: translateY(0);
    }
}

.btn-slide-up {
    &:hover,
    &:active,
    &:focus {
        i {
            animation: .5s ease slideUp;
        }
    }
}

@keyframes slideDown {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(.5em);
    }
    100% {
        transform: translateY(0);
    }
}

.btn-slide-down {
    &:hover,
    &:active,
    &:focus {
        i {
            animation: .5s ease slideDown;
        }
    }
}

.btn-infinite {
    &:hover {
        i {
            animation-iteration-count: infinite;
        }
    }
}


// Shadow Button
.btn.btn-shadow-lg {
    box-shadow: 0 5px 50px rgba(0, 0, 0, .1);
    &:hover,
    &:active,
    &:focus {
        box-shadow: none;
    }
}

.btn.btn-shadow {
    box-shadow: 0 5px 20px rgba(0, 0, 0, .1);
    &:hover,
    &:active,
    &:focus {
        box-shadow: none;
    }
}

.btn.btn-shadow-sm {
    box-shadow: 0 5px 10px rgba(0, 0, 0, .1);
    &:hover,
    &:active,
    &:focus {
        box-shadow: none;
    }
}

// Underline Button
.btn-underline {
    &:hover,
    &.active,
    &:focus {
        &:after {
            transform: scaleX(1);
        }
    }
    &:after {
        display: block;
        margin-top: 3px;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        height: 3px;
        border-top: 1px solid;
        border-bottom: 2px solid;
        transform: scaleX(0);
        transition: transform .3s;
        content: '';
    }
}

.btn-underline.sm:after { width: 46%; }

.btn-underline.lg:after { 
    width: 60%;
    margin-#{$left}: 0;
    transform-origin: $left;
}

// Link Button
.btn-link {
    padding: 0;
    color: var(--alpha-change-color-dark-1);
    border: 0;
    &,
    &:hover,
    &.active,
    &:focus {
        background-color: transparent;
    }
}

// Box Shadow Button
.btn-boxshadow {
    position: relative;
    border: none;
    transition: ease transform .3s;

    &:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: inherit;
        opacity: 0.4;
        border-radius: inherit;
        transform: translate3d(5px,5px,0);
        transition: ease transform .3s;
        z-index: 0;
    }
    &:hover {
        transform: translate3d(2.5px,2.5px,0);
        &:before {
            transform: translate3d(0,0,0);
        }
    }
    span {
        position: relative;
    }
}

// Load Button - Aligns Center
.btn-load {
    position: relative;
    left: 50%;
    border-radius: $corner-md;
    transform: translateX(-50%);
    margin: 4rem 0 2rem;
}

.btn-rounded {
    &,
    &:before,
    &:after {
        border-radius: $corner-sm;
    }
}

.btn-ellipse {
    &,
    &:before,
    &:after {
        border-radius: 100px;
    }
}

.btn-circle {
    &,
    &:before,
    &:after {
        border-radius: 50%;
    }
}

.btn {
    &.btn-block {
        display: block;
        padding-left: 0;
        padding-right: 0;
        width: 100%;
    }
    &.btn-xl {
        font-size: 2.2rem;
        padding: 2.8rem 5.1rem;
    }
    &.btn-lg {
        font-size: 1.8rem;
        padding: 2.15rem 4.4rem;
    }
    &.btn-md {
        font-size: 1.4rem;
        padding: 1.4rem 2.9rem;
    }
    &.btn-sm {
        font-size: 1.2rem;
        padding: 1.1rem 1.9rem;
    }
    &.btn-link {
        padding: 0;
    }
    &.btn-border-thin {
        border-width: 1px;
        padding: 1.4rem 2.9rem;
    }
}


// 8. Button Color Styles
.btn-primary {
    @include button-variant(var(--alpha-primary-color), var(--alpha-primary-color-hover));
}
.btn-secondary {
    @include button-variant(var(--alpha-secondary-color), var(--alpha-secondary-color-hover));
}
.btn-accent  {
    @include button-variant(var(--alpha-accent-color), var(--alpha-accent-color-hover));
}
.btn-success  {
    @include button-variant(var(--alpha-success-color), var(--alpha-success-color-hover));
}
.btn-info { 
    @include button-variant(var(--alpha-info-color), var(--alpha-info-color-hover));
}
.btn-warning { 
    @include button-variant(var(--alpha-alert-color), var(--alpha-alert-color-hover));
}
.btn-danger { 
    @include button-variant(var(--alpha-danger-color), var(--alpha-danger-color-hover));
}
.btn-dark {
    @include button-variant(var(--alpha-dark-color), var(--alpha-dark-color-hover));
}
.btn-white {
    color: var(--alpha-dark-color);
    background-color: var(--alpha-white-color);
    border-color: var(--alpha-white-color);

    &:hover,
    &:active,
    &:focus {
        color: var(--alpha-white-color);
        border-color: var(--alpha-primary-color);
        background-color: var(--alpha-primary-color);
    }

    &.btn-outline {
        color: var(--alpha-white-color);
        background-color: transparent;
        border-color: var(--alpha-white-color);
        &:hover,
        &:active,
        &:focus {
            color: var(--alpha-primary-color);
            background-color: var(--alpha-white-color);
        }
    }
    &.btn-link {
        color: var(--alpha-white-color);
        background-color: transparent;
        &:hover,
        &:active,
        &:focus {
            color: var(--alpha-white-color);
            background-color: transparent;
        }
    }
}

// Gradient Button
.btn-gradient {
    position: relative;
    color: var(--alpha-white-color);
    background: linear-gradient(113deg, #f4f4f4, #edf7fa);
    border: none;
    padding: 2rem 4.9rem;
    transition: background .25s, color .25s, border .25s;
    overflow: hidden;
    
    &.btn-xl {
        padding: 3rem 4.9rem;
    }
    &.btn-lg {
        padding: 2.45rem 4.4rem;
    }
    &.btn-md {
        padding: 1.6rem 3rem;
    }
    &.btn-sm {
        padding: 1.25rem 2rem;
    }

    &:hover,
    &:active,
    &:focus {
        color: var(--alpha-white-color);
    }

    &:after {
        content: "";
        position: absolute;
        top: -50%;
        left: 0%;
        right: 0%;
        bottom: -50%;
        background-image: linear-gradient(90deg,rgba(255,255,255,0) 20%,rgba(255,255,255,0.4) 50%,rgba(255,255,255,0) 80%);
        transform: skewX(-45deg) translateX(-100%);
        transition: transform 0.8s;
    }

    &:hover:after {
        transform: skewX(-45deg) translateX(100%);
    }
}
.btn-gra-primary {
    background: linear-gradient(100deg, var(--alpha-primary-gradient-2) 26%, var(--alpha-primary-gradient-1) 74%);
}
.btn-gra-purple {
    background: linear-gradient(135deg, #8b47de 26%, #1637e2 74%);
}
.btn-gra-blue {
    background: linear-gradient(148deg, #00cfff 26%, #00a2ff 74%);
}
.btn-gra-orange {
    background: linear-gradient(142deg, #fc7638 26%, #fd5d42 74%);
}
.btn-gra-pink {
    background: linear-gradient(148deg, #da008b 29%, #9400f4 71%);
}
.btn-gra-green {
    background: linear-gradient(124deg, #3ac3d5 26%, #aab927 74%);
}
.btn-gra-dark {
    background: linear-gradient(128deg, #7f7c7c 27%, #414141 73%);
}

.btn-link-gradient {
    background: transparent;

    &, & i:before {
    background-size: 100%;
    background-attachment: scroll;
    background-position: 0 0;
    background-repeat: repeat;
    -webkit-box-decoration-break: clone;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    }

    &:after {
        content: none;
    }
    &.btn {
        padding: 0;
    }

    &.btn-gra-primary {
        &, & i:before {
        background-image: linear-gradient(100deg, var(--alpha-primary-gradient-2) 26%, var(--alpha-primary-gradient-1) 74%);
        }
    }
    &.btn-gra-purple {
        &, & i:before {
        background-image: linear-gradient(135deg, #8b47de 26%, #1637e2 74%);
        }
    }
    &.btn-gra-blue {
        &, & i:before {
        background-image: linear-gradient(148deg, #00cfff 26%, #00a2ff 74%);
        }
    }
    &.btn-gra-orange {
        &, & i:before {
        background-image: linear-gradient(142deg, #fc7638 26%, #fd5d42 74%);
        }
    }
    &.btn-gra-pink {
        &, & i:before {
        background-image: linear-gradient(148deg, #da008b 29%, #9400f4 71%);
        }
    }
    &.btn-gra-green {
        &, & i:before {
        background-image: linear-gradient(124deg, #3ac3d5 26%, #aab927 74%);
        }
    }
    &.btn-gra-dark {
        &, & i:before {
        background-image: linear-gradient(128deg, #7f7c7c 27%, #414141 73%);
        }
    }

    &:hover,
    &:active,
    &:focus {
        background-position: 3em 0;
    }
}

// Other Button Styles
.btn.disabled, .button.disabled, .btn[disabled], .button[disabled] {
    background-color: var(--alpha-change-border-color);
    color: var(--alpha-body-color);
    border-color: var(--alpha-change-border-color);
    box-shadow: none;
    cursor: not-allowed;

    &.btn-outline {
        background-color: transparent;
        color: var(--alpha-grey-color);
    }
}

.video-popup .btn-video-iframe,
.btn-video-player {
    display: inline-flex;
    justify-content: center;
    align-items: center;
}