@mixin btnSize($ext, $paddingVertical, $paddingHorizontal, $fontSize) {
    .btn#{$ext}{
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: $paddingVertical $paddingHorizontal;
        background-color: transparent;
        border: var(--border-thickness) var(--text-color) var(--border-style);
        cursor: pointer;
        border-radius: var(--small-border-radius);
        position: relative;
        font-size: $fontSize;
    
        &:active{
            animation: clicked var(--animation-time) ease;
        }
    }
}

@include btnSize('', 0.5rem, 0.5rem, var(--text-font-size));
@include btnSize('-md', 0.8rem, 1.2rem, var(--h4-size));
@include btnSize('-lg', 1rem, 2rem, var(--h3-size));



@keyframes clicked{
    0%{
        transform: scale(1);
    }

    50%{
        transform: scale(0.9);
    }

    90%{
        transform: scale(1.05);
    }

    100%{
        transform: scale(1);
    }
}


$btnTypes: primary, warning, danger, success;

@each $type in $btnTypes{
    // Solid Buttons
    .solid-#{$type}{
        background: var(--color-#{$type});
        border-color: var(--color-#{$type});
        color: var(--main-background);
        transition: var(--transition-time);

        *{
            fill: var(--main-background);
            stroke: var(--main-background);
            color: var(--main-background);
        }

        &:hover{
            filter: brightness(1.15);
        }

    }

    .outlined-#{$type}{
        border-color: var(--color-#{$type});
        color: var(--color-#{$type});
        fill: var(--color-#{$type});
        transition: var(--transition-time);

        &:hover{
            background: var(--color-#{$type});
            color: var(--main-background);

            *{
                color: var(--main-background);
                fill: var(--main-background);
            }
        }

        *{
            color: var(--color-#{$type});
            fill: var(--color-#{$type});
            stroke: var(--color-#{$type});
        }
    }

    .glow-#{$type}{
        border-color: transparent;
        color: var(--color-#{$type});
        fill: var(--color-#{$type});
        transition: var(--transition-time);
        position: relative;

        *{
            color: var(--color-#{$type});
            fill: var(--color-#{$type});
            stroke: var(--color-#{$type});
        }

        &::before{
            content: '';
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            background: var(--color-#{$type});
            opacity: 0.17;
            border-radius: inherit;
            transition: var(--transition-time);
        }

        &:hover::before{
            opacity: 0.3;
        }
    }
}

.outline-btn-not-rounded{
    padding: 0.3rem 1.5rem;
    background: none;
    outline: none;
    border: 1px solid;
    border-radius: 2px;
    cursor: pointer;
    transition: var(--transition-time) all;

    &:hover{
        background: rgba(200, 200, 200, 0.2);
    }
}


// Icon Button (Button with Icons)
.btn-icon{
    i{
        margin: 0 0.5rem 0 0;
    }
}

// Round Button
.btn-round{
    cursor: pointer;
    border-radius: 10000rem;
    padding-left: 2rem;
    padding-right: 2rem;
}

.btn-icon-round{
    cursor: pointer;
    border-radius: 10000rem;
}


// DropDown

.dropdown{
    display: inline-block;
    position: relative;
    cursor: pointer;

    .dropdown-options{
        display: none;
        transition: var(--transition-time) opacity ease;
        position: absolute;
        top: 100%;
        z-index: 10;
        border-radius: var(--border-radius);
        padding: 1rem 0;
        background: var(--off-background);
        // box-shadow: 0 0 30px rgba(var(--accent-color-triad), 0.4);
        box-shadow: 0 0 20px var(--dropshadow-color);

        .dropdown-item{
            padding: 0.5rem 1rem;
            transition: var(--transition-time) background ease;
        }

        .dropdown-item:hover{
            background: rgba(var(--accent-color-triad), 0.3);
        }
    }

    .dropdown-left{
        left: 0;
    }

    .dropdown-right{
        right: 0;
    }

    .dropdown-show{
        display: inline-block;
        animation: fade_dropdown var(--transition-time);
    }
}

.closedropdown{
    position: absolute;
    top: 0;
    right: 0;
}

// DropDown Ends

@keyframes fade_dropdown {
    0%{
        opacity: 0;
    }

    100%{
        opacity: 1;
    }
}