/*********************
BUTTON DEFAULTS
*********************/
%button {
        position: relative;
        display: inline-block;
        margin: 0.25rem rem(17);
        padding: rem(8) rem(27) rem(10) rem(27);
        border: 0;
        border-radius: rem(20);
        text-decoration: none;
        font-family: $font-secondary;
        font-size: rem(16);
        line-height: rem(18);
        cursor: pointer;
        // letter-spacing: rem(2);
        // text-transform: uppercase;
        @include transition(all 0.3s ease-in-out);
        &:hover, &:focus {text-decoration: none;}
        &:active {
                text-decoration: none;
                // top: 1px; // adds a tiny hop to the click
        }
        &:disabled {
                &:hover, &:focus {
                        cursor: not-allowed;
                }
        }

} // end .button


.button {
        @extend %button;

        &.skip-navigation {
            position: absolute;
        }
        &.skip-content {
            position: absolute;
        }
}

%btn-grad-1 {
        @extend %button;
        @include css-gradient($color-stop-1,$color-stop-4);
        color: $white !important;
        z-index: 1;

        // &:hover, &:focus {
        //     background: $color-primary ;
        //     color: $white !important;
        // }

        // &:disabled {
        //     color: $white !important;
        //     background-color: $greyLt;

        //     &:hover, &:focus, &:active {
        //         color: $white !important;
        //         background-color: $greyLt;
        //     }
        // }



        &:before {
                position: absolute;
                background: $color-primary;
                content: "";
                top: 0;
                right: 0;
                bottom: 0;
                border-radius: rem(20);
                left: 0;
                z-index: -1;
                transition: opacity 0.5s linear;
                opacity: 0;
        }
        &:hover:before {
                opacity: 1;
        }

        &.btn-circle {
            border-radius: 50%;
            padding: rem(7);
            &:before {
                border-radius: 50%;
            }
        }

}

%btn-grad-2 {
        @extend %button;
        @include css-gradient($tertiary-light,$color-stop-4);
        color: $white !important;

        &:hover, &:focus {
                background: $tertiary-light;
                color: $white !important;
        }

        &:disabled {
                color: $white !important;
                background-color: $greyLt;

                &:hover, &:focus, &:active {
                        color: $white !important;
                        background-color: $greyLt;
                }
        }
}

%btn-white {
    @extend %button;
    background: $white;
    color: $text !important;

    &.ld-button {
        background-color: $white !important;
        color: $text !important;
        font-family: $sans-bold !important;
    }

    &:hover, &:focus {
            background: $white;
            color: $color-primary !important;
    }

    &:disabled {
            color: white(0.7) !important;
            background-color: white(0.2);

            &:hover, &:focus, &:active {
                    color: white(0.7) !important;
                    background-color: white(0.2);
            }
    }
}

%btn-locked {
    @extend %button;
    background: $greyLt;
    color: $grey !important;

    span { &:before { font-size: rem(16); } } 

    &.ld-button {
        background-color: $greyLt !important;
        color: $grey !important;
        font-family: $sans-bold !important;
    }

    &:hover, &:focus {
            background: $greyLt;
            color: $color-primary !important;
    }

    &:disabled {
            color: white(0.7) !important;
            background-color: $greyLt;

            &:hover, &:focus, &:active {
                    color: white(0.7) !important;
                    background-color: $greyLt;
            }
    }
}

input {
    &#passwordbutton {
        @extend %btn-grad-1;
        font-size: rem(12);
        line-height: rem(17);
        margin: 0.25rem rem(17);
        padding: rem(6) rem(11) rem(6) rem(11);
    }
}

.pop-up, #oca-files-sharing-add-to-your-website, .button-vue, .primary, #sendtestemail  {
    @extend %btn-grad-1;
    font-size: rem(12);
    line-height: rem(17);
    margin: 0.25rem rem(17);
    padding: rem(6) rem(11) rem(6) rem(11);
}

input[type="submit"] {
    @extend %btn-grad-1;
    font-size: rem(12);
    line-height: rem(17);
    margin: 0.25rem rem(17);
    padding: rem(6) rem(11) rem(6) rem(11);
}

#updatenotification {
    .update {
        .button {
            @extend %btn-grad-1;
            font-size: rem(12);
            line-height: rem(17);
            margin: 0.25rem rem(17);
            padding: rem(6) rem(11) rem(6) rem(11);
        }
    }
}

#subscription-key-section {

}

.btn-grad-1 {
    @extend %btn-grad-1;

    &.btn-small {
        font-size: rem(12);
        line-height: rem(17);
        margin: 0.25rem rem(17);
        padding: rem(6) rem(11) rem(6) rem(11);
    }

    &.btn-large {
        font-size: rem(18);
        line-height: rem(20);
        padding: rem(9) rem(63) rem(11) rem(63);
    }
}

.btn-grad-2 {
        @extend %btn-grad-2; 

        &.btn-small {
            font-size: rem(14);
            line-height: rem(17);
        }
}

.btn-white {
        @extend %btn-white; 

        &.btn-small {
            font-size: rem(14);
            line-height: rem(17);
        }

        &.btn-border-grey {
            border: 1px solid $grey;
        }
}

.btn-locked {
    @extend %btn-locked; 

    &.btn-small {
        font-size: rem(14);
        line-height: rem(17);
        span { &:before { font-size: rem(14); } } 
    }
}

.btn-search {
    @extend %btn-grad-1;
    border-radius: 0 rem(20) rem(20) 0;
    margin: 0;
    padding: rem(5) rem(12) rem(5) rem(8);

    span { &:before { font-size: rem(26); } }

    &:before {
        border-radius: 0 rem(20) rem(20) 0;
    }
}

.login-option {
    border: unset;
    background-color: unset;
    a {
        @extend %btn-grad-1;
        width: unset;
    }
}

// gradient border button version 2
    .btn-grad-border {
        margin: 0.25rem rem(17);
        padding: 2px !important;
        border-radius: rem(20);
        border: 0 none;
        @include css-gradient($color-stop-1,$color-stop-4);

        // &:before {
        //      position: absolute;
        //      background: $color-primary;
        //      content: "";
        //      top: 0;
        //      right: 0;
        //      bottom: 0;
        //      border-radius: rem(20);
        //      left: 0;
        //      z-index: -1;
        //      transition: opacity 0.5s linear;
        //      opacity: 0;
        // }
        // &:hover:before {
        //      opacity: 1;
        // }

        .grad-inside {
            
            text-decoration: none;
            font-family: $font-secondary;
            font-size: rem(12);
            line-height: rem(17);
            border-radius: rem(20);
            padding: rem(4) rem(11) rem(4) rem(11);
            @include transition(all 0.3s ease-in-out);

            &.no-scale {
                padding: rem(8) rem(27) rem(9) rem(27);
                font-size: rem(16); line-height: rem(18);
            }
        
            &.white { background-color: $white; }
            &.mint { background-color: $tertiary-light; }

        }

        &:hover { .grad-inside { color: $primary }  }
    }

// bio back button