@mixin btn(
    $btn-size: nth(map-get($btn-sizes, 'md'), 1),
    $font-size: 14px
) {
    // Define base styles for a button
    cursor: pointer;
    display: inline-block;
    text-align: center;
    border: 0;
    text-decoration: none;
    font-size: $font-size;
    padding: $btn-size $btn-size * 2;
    border-radius: $base-border-radius;

    // The transition would be rewritten when user adds the scroll animation to the buttons
    transition: all $base-transition-time ease-in-out;
}

@mixin btn-color($color) {
    // Define color for regular buttons
    background: $color;
    color: get-contrast-color($color);
    border: 0.1rem solid $color;

    &:hover {
        background-color: get-hover-color($color);
        border: 0.1rem solid get-hover-color($color);
    }

    // Colors for the disabled buttons
    &.disabled,
    &:disabled {
        background-color: $color !important;
        border: 0.1rem solid $color !important;
    }
}

@mixin btn-outline-color($color) {
    // Define color for outlined buttons
    background-color: transparent;
    border: $base-border-sickness solid $color !important;
    color: $color;

    &:hover {
        background-color: $color;
        color: get-contrast-color($color);
    }

    // Colors for the disabled buttons
    &.disabled,
    &:disabled {
        background-color: transparent !important;
        border: $base-border-sickness solid $color !important;
        color: $color !important;
    }
}


// Default button styles
.btn {
    @include btn;
    @include btn-color($dark);
}


// Close button
.btn-close {
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    cursor: pointer;
    transition: all $base-transition-time / 3 ease-in-out;

    &::before, &::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform-origin: center;

        width: 1.25rem;
        height: 0.15rem;
        background-color: $close-btn-color;
    }

    &::before {
        transform: translate(-50%, -50%) rotate(45deg);
    }
    &::after {
        transform: translate(-50%, -50%) rotate(-45deg);
    }
}

// Arrow button
.btn-arrow {
    position: relative;
    width: 0.7rem;
    height: 1rem;
    cursor: pointer;

    // Not active arrow button styles
    &::after, &::before {
        content: "";
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        transition: all $base-transition-time ease;

        width: 7px;
        height: 2px;

        background-color: $close-btn-color;
    }

    &.btn-arrow-light {
        &::after, &::before {
            background-color: $light;
        }
    }

    &::before {
        left: 0;
        transform: rotate(45deg);
    }
    &::after {
        right: 0;
        transform: rotate(-45deg);
    }

    // Active arrow button styles
    &.active::before {
        transform: rotate(-45deg);
    }
    &.active::after {
        transform: rotate(45deg);
    }
}


// Iterate over each key-val pair in the $btn-sizes
@each $key, $val in $btn-sizes {
    // Generate classes for each btn size
    .btn-#{$key} {
        @include btn(nth($val, 1), nth($val, 2));
        @include btn-color($dark);
    }

    // Iterate over each bp_key-bp_val pair to generate color classes for each breakpoint
    @each $bp_key, $bp_val in $breakpoints {
        @media (min-width: $bp_val) {
            // Generate breakpoint classes for each btn size
            .#{$bp_key}\:btn-#{$key} {
                @include btn(nth($val, 1), nth($val, 2));
                @include btn-color($dark);
            }
        }
    }
}


// Iterate over each key-val pair in the $theme-color-palette map
@each $key, $val in $theme-color-palette {
    // Create classes for theme buttons
    .btn-#{$key} {
        @include btn-color($val);
    }

    // Create classes for outlined buttons
    .btn-outline-#{$key} {
        @include btn-outline-color($val);
    }


    // Iterate over each bp_key-bp_val pair to generate color classes for each breakpoint
    @each $bp_key, $bp_val in $breakpoints {
        @media (min-width: $bp_val) {
            // Create classes for classic buttons
            .#{$bp_key}\:btn-#{$key} {
                @include btn-color($val);
            }

            // Create classes for outlined buttons
            .#{$bp_key}\:btn-outline-#{$key} {
                @include btn-outline-color($val);
            }
        }
    }
}


// Iterate over each key-val pair in the $base-color-palette map
@each $key, $val in $base-color-palette {
    // Generate color classes for all shades
    @for $i from 1 through 9 {
        // Define color shade
        $shade: if($i <= 4, generate-shade($val, 100-$i*10, 'lighten'), generate-shade($val, $i*10-40, 'darken'));


        // Create classes for classic buttons
        .btn-#{$key}-#{$i*100} {
            @include btn-color($shade);
        }

        // Create classes for outlined buttons
        .btn-outline-#{$key}-#{$i*100} {
            @include btn-outline-color($val);
        }

        // Iterate over each bp_key-bp_val pair to generate color classes for each breakpoint
        @each $bp_key, $bp_val in $breakpoints {
            @media (min-width: $bp_val) {
                // Create classes for classic buttons
                .#{$bp_key}\:btn-#{$key}-#{$i*100} {
                    @include btn-color($shade);
                }

                // Create classes for outlined buttons
                .#{$bp_key}\:btn-outline-#{$key}-#{$i*100} {
                    @include btn-outline-color($val);
                }
            }
        }
    }
}



button.disabled,
button:disabled,
a.disabled {
    cursor: default;
    opacity: .6 !important;
}