/* -------------------------------------------
    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
.btn {
    display: inline-block;
    border: 2px solid #eee;
    background-color: #eee;
    color: var(--wolmart-dark-color, $dark-color);
    outline: 0;
    border-radius: 0;
    // Height 44px, Width 120px for default
    padding: 1.3rem 2.7rem;
    font-weight: 600;
    font-size: 1.4rem;
    line-height: 1;
    text-transform: uppercase;
    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(--wolmart-dark-color, $dark-color);
        border-color: darken(#eee, 7%);
        background-color: darken(#eee, 7%);
    }

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

@if use(btn-solid) {
    .btn-solid {
        background-color: #fff;
        border-color: #fff;
        color: var(--wolmart-dark-color, $dark-color);

        &:hover,
        &:active,
        &:focus {
            border-color: var(--wolmart-dark-color, $dark-color);
            background-color: var(--wolmart-dark-color, $dark-color);
            color: #fff;
        }
    }
}

// Outline Button
.btn-outline {
    border: 2px solid #eee;
    color: var(--wolmart-body-color, $body-color);
    background-color: transparent;

    &:hover,
    &:active,
    &:focus {
        border-color: var(--wolmart-body-color, $body-color);
        background-color: var(--wolmart-body-color, $body-color);
        color: #fff;
    }

    &.btn-outline-light {
        padding: 1.07em 2.21em;
        border-width: 1px;
    }

    &.btn-bg {
        color: #fff;
    }
}

.btn-default {
    color: var(--wolmart-dark-color, $dark-color);
    border-color: var(--wolmart-light-color, $light-color);
    background-color: var(--wolmart-light-color, $light-color);

    &.disabled {
        border-color: var(--wolmart-light-color, $light-color);
        background-color: var(--wolmart-light-color, $light-color);
    }

    &.btn-outline {
        background-color: transparent;
    }

    &:hover,
    &:focus,
    &:active {
        color: var(--wolmart-dark-color, $dark-color);
        border-color: #e1e1e1;
        background-color: #e1e1e1;
    }
}

// Button Icon
.btn-icon-right {
    >i {
        margin-#{$left}: .7rem;
    }
}

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

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

// Reveal Button
@if use(btn-reveal-left) {
    .btn-reveal-left {
        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-reveal-right {
    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
@if use(btn-slide-left) {
    @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;
        }
    }
}

@if use(btn-slide-up) {
    @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;
            }
        }
    }
}

@if use(btn-slide-down) {
    @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
@if use(btn-shadow-lg) {
    .btn.btn-shadow-lg {
        box-shadow: 0 13px 20px -10px rgba(0, 0, 0, .15);

        &:hover,
        &:active,
        &:focus {
            box-shadow: 0 13px 20px -10px rgba(0, 0, 0, .2);
        }
    }
}

@if use(btn-shadow) {
    .btn.btn-shadow {
        box-shadow: 0 15px 20px -15px rgba(0, 0, 0, .15);

        &:hover,
        &:active,
        &:focus {
            box-shadow: 0 15px 20px -15px rgba(0, 0, 0, .2);
        }
    }
}

@if use(btn-shadow-sm) {
    .btn.btn-shadow-sm {
        box-shadow: 0 17px 20px -20px rgba(0, 0, 0, .15);

        &:hover,
        &:active,
        &:focus {
            box-shadow: 0 17px 20px -20px rgba(0, 0, 0, .2);
        }
    }
}

// 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: '';
    }
}

@if use(btn-underline-sm) {
    .btn-underline.sm::after {
        width: 46%;
    }
}

@if use(btn-underline-lg) {
    .btn-underline.lg::after {
        margin-left: -16.5%;
        margin-right: -16.5%;
        width: 133%;
    }
}

// Link Button
.btn-link {
    padding: 0;
    color: var(--wolmart-dark-color, $dark-color);
    border: 0;

    &,
    &:hover,
    &.active,
    &:focus {
        background-color: transparent;
    }
}

// Load Button - Aligns Center
.btn-load {
    position: relative;
    left: 50%;
    border-radius: 3px;
    transform: translateX(-50%);
    margin-bottom: 2rem;
}

.product-archive+.btn-load {
    margin-top: 3rem;
}

@if use(btn-rounded) {
    .btn-rounded {

        &,
        &::before,
        &::after {
            border-radius: 3px;
        }
    }
}

@if use(btn-ellipse) {
    .btn-ellipse {

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

.btn {
    &.btn-block {
        display: block;
        padding-left: 0;
        padding-right: 0;
        width: 100%;
    }

    &.btn-lg {
        font-size: 1.8rem;
        padding: 1.7rem 3.3rem;
    }

    &.btn-xl {
        font-size: 2.4rem;
        padding: 2rem 4.2rem;
    }

    &.btn-md {
        padding: 1.2rem 1.9rem;
        font-size: 1.4rem;
    }

    &.btn-sm {
        font-size: 1.3rem;
        padding: 1rem 1.8rem;
    }

    &.btn-link {
        padding: 0;
    }

    &.btn-border-thin {
        border-width: 1px;
        padding: 1em 2em;
    }
}


// 8. Button Color Styles
.btn-primary {
    @include button-variant(var(--wolmart-primary-color, $primary-color), var(--wolmart-primary-color-hover, ligthen($primary-color, 10%)));
}

.btn-secondary {
    @include button-variant(var(--wolmart-secondary-color, $secondary-color), var(--wolmart-secondary-color-hover, ligthen($secondary-color, 10%)));
}

.btn-success {
    @include button-variant($success-color, lighten($success-color, 10%));
}

.btn-warning {
    @include button-variant($warning-color, lighten($warning-color, 10%));
}

.btn-danger {
    @include button-variant($danger-color, lighten($danger-color, 10%));
}

.btn-dark {
    @include button-variant(var(--wolmart-dark-color, $dark-color), var(--wolmart-dark-color-hover, ligthen($dark-color, 10%)));
}

.btn-white {
    color: var(--wolmart-dark-color, $dark-color);
    background-color: #fff;
    border-color: #fff;

    &:hover,
    &:active,
    &:focus {
        color: #fff;
        border-color: var(--wolmart-primary-color, $primary-color);
        background-color: var(--wolmart-primary-color, $primary-color);
    }

    &.btn-outline {
        color: #fff;
        background-color: transparent;
        border-color: #fff;

        &:hover,
        &:active,
        &:focus {
            color: var(--wolmart-primary-color, $primary-color);
            background-color: #fff;
        }
    }

    &.btn-link {
        color: #fff;
        background-color: transparent;

        &:hover,
        &:active,
        &:focus {
            color: #fff;
            background-color: transparent;
        }
    }
}

// Other Button Styles
.btn.disabled,
.button.disabled,
.btn[disabled],
.button[disabled] {
    background-color: #eee;
    color: var(--wolmart-body-color, $body-color);
    border-color: #eee;
    box-shadow: none;
    pointer-events: initial;
    cursor: not-allowed;

    &.btn-outline {
        background-color: transparent;
        color: $grey-color;
    }
}

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