$btn-text-hover-opacity: 0.08;

//
// Dropdown Menu
//

@mixin fixDropdown() {
    [dir="rtl"],
    .rtl {
        .dropdown-menu {
            text-align: right;
        }

        .dropstart > .dropdown-toggle {
            &:before {
                display: none;
            }

            &:after {
                display: inline-block;
                margin-right: 0.255em;
                vertical-align: 0.255em;
                content: "";
                border-top: 0.3em solid transparent;
                border-right: 0.3em solid;
                border-bottom: 0.3em solid transparent;
            }
        }

        .dropend > .dropdown-toggle {
            &:before {
                display: inline-block;
                margin-left: 0.255em;
                vertical-align: 0.255em;
                content: "";
                border-top: 0.3em solid transparent;
                border-right: 0;
                border-bottom: 0.3em solid transparent;
                border-left: 0.3em solid;
            }

            &:after {
                display: none;
            }
        }
    }
}

@mixin fixDropdownTheme($text, $bg, $activeText, $activeBg) {
    $bg: light-color($bg, 0.15);

    .dropdown-menu {
        color: $text;
        background-color: $bg;
    }

    .dropdown-item {
        color: $text;

        &:hover,
        &:focus {
            background-color: rgba($text, 0.08);
        }

        &.active,
        &:active {
            color: $activeText;
            background-color: $activeBg;
        }
    }
}

//
// T E X T
//
@mixin btnText($name, $color) {
    .btn-text-#{$name} {
        color: $color;
        border: 1px solid transparent;

        &.btn-active,
        &:hover {
            background-color: rgba($color, $btn-text-hover-opacity);
        }

        .ripple-focus {
            color: rgba($color, 0.5);
        }
    }

    @media (hover: none) {
        .btn-text-#{$name}:hover {
            background-color: transparent;
        }
    }
}

//
// C O N T A I N E D
//
@mixin btnContained($name, $text, $bg, $hover) {
    .btn-#{$name} {
        color: $text;
        background-color: $bg;
        border-color: $bg;

        &.btn-active,
        &:hover {
            background-color: $hover;
        }
    }

    @media (hover: none) {
        .btn-#{$name}:hover {
            background-color: $bg;
        }
    }
}

//
// O U T L I N E
//
@mixin btnOutline($name, $color, $border, $border-hover) {
    .btn-outline-#{$name} {
        color: $color;
        border: 1px solid $border !important;

        &.btn-active,
        &:hover,
        &:focus,
        &:active {
            color: $color;
            border: 1px solid $border-hover;
            background-color: rgba($color, $btn-text-hover-opacity);
        }

        .ripple-focus {
            color: rgba($color, 0.5);
        }
    }

    @media (hover: none) {
        .btn-outline-#{$name}:hover {
            background-color: transparent;
        }
    }
}

@mixin button() {
    .btn {
        position: relative;
        padding: 0.75rem;
        line-height: 1;
        transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
            border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
        border: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        grid-gap: 5px;
        vertical-align: middle;
        user-select: none;
        text-decoration: none;
        white-space: nowrap;
        height: 2.25rem;
        color: inherit;

        &:hover,
        &:focus {
            text-decoration: none;
            color: inherit;
        }

        &:focus,
        &:focus:active {
            box-shadow: none;
        }

        svg {
            font-size: 1.43em;
        }
    }

    .btn-sm {
        height: 1.75rem;
        padding: 0 0.5rem;
        font-size: 0.8125rem;
    }

    .btn-lg {
        height: 2.75rem;
        padding: 0 1rem;
        font-size: 1rem;
    }

    .btn-icon {
        border-radius: 50%;
        width: auto;
        height: auto;
        padding: 12px;

        svg {
            font-size: 1.5rem;
        }

        &.btn-sm {
            padding: 8px;

            &.btn-edge-start {
                @include marginStart(-5px);
            }

            &.btn-edge-end {
                @include marginEnd(-5px);
            }

            svg {
                font-size: 1.125rem;
            }
        }

        &.btn-md {
            padding: 8px;

            svg {
                font-size: 1.43rem;
            }
        }

        &.btn-lg svg {
            font-size: 2.1875rem;
        }
    }

    .btn-edge-start {
        @include marginStart(-12px);
    }

    .btn-edge-end {
        @include marginEnd(-12px);
    }

    @media (hover: none) {
        .btn:hover {
            background-color: transparent;
        }
    }

    .btn-contained {
        box-shadow: $bd-shadow-2;

        &:focus {
            box-shadow: $bd-shadow-2;
        }

        &:hover {
            box-shadow: $bd-shadow-4;
        }

        &:active {
            box-shadow: $bd-shadow-8 !important;
        }
    }

    .show > .btn-contained.dropdown-toggle:focus {
        box-shadow: $bd-shadow-2;
    }

    @media (hover: none) {
        .btn-contained:hover {
            box-shadow: $bd-shadow-2;
        }
    }

    .btn-flat {
        box-shadow: none !important;

        &:hover,
        &:focus,
        &:active {
            box-shadow: none !important;
        }
    }

    .btn-disabled {
        opacity: 0.4;

        &.btn-contained {
            box-shadow: none;
        }
    }

    svg {
        fill: currentColor;
        width: 1em;
        height: 1em;
        display: inline-block;
        transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
        flex-shrink: 0;
        user-select: none;
    }

    .dropdown-no-caret {
        &:after {
            display: none !important;
        }
    }

    .btn-fab {
        box-shadow: $bd-shadow-6 !important;
        z-index: 10;

        svg {
            font-size: 1.5rem;
        }

        &:active {
            box-shadow: $bd-shadow-12 !important;
        }

        &.rounded-circle {
            width: 56px;
            height: 56px;

            &.btn-sm {
                width: 48px;
                height: 48px;
            }

            &.btn-xs {
                height: 40px;
                width: 40px;
            }
        }

        &.rounded-pill {
            height: 48px;
            padding: 0 16px;

            &.btn-sm {
                font-size: 0.875rem;
                height: 40px;
            }

            &.btn-xs {
                font-size: 0.875rem;
                height: 34px;
                padding: 0 8px;
            }
        }
    }

    $margin: 2rem;

    .fab-start {
        position: fixed;
        bottom: $margin;

        [dir="rtl"] &,
        .rtl & {
            right: $margin;
        }

        [dir="ltr"] &,
        .ltr & {
            left: $margin;
        }
    }

    .fab-center {
        position: fixed;
        bottom: $margin;
        left: calc(50% - 28px);
    }

    .fab-end {
        position: fixed;
        bottom: $margin;
        right: $margin;

        [dir="rtl"] &,
        .rtl & {
            right: auto;
            left: $margin;
        }
    }
}

@mixin btnTheme($palette) {
    $text-primary: map-get($palette, text, primary);
    $bg: map-get($palette, bg, main);

    $primary-palette: map-get($palette, primary);
    $secondary-palette: map-get($palette, secondary);

    $primary: map-get($primary-palette, main);
    $primary-text: map-get($primary-palette, text);
    $primary-light: map-get($primary-palette, light);
    $primary-dark: map-get($primary-palette, dark);

    $secondary: map-get($secondary-palette, main);
    $secondary-text: map-get($secondary-palette, text);
    $secondary-light: map-get($secondary-palette, light);
    $secondary-dark: map-get($secondary-palette, dark);

    @include btnText("default", $text-primary);
    @include btnText("primary", $primary);
    @include btnText("secondary", $secondary);

    @include btnContained("default", $text-primary, rgba($text-primary, 0.1), rgba($text-primary, 0.2));
    @include btnContained("primary", $primary-text, $primary, $primary-dark);
    @include btnContained("secondary", $secondary-text, $secondary, $secondary-dark);

    @include btnOutline("default", $text-primary, rgba($text-primary, 0.23), rgba($text-primary, 0.23));
    @include btnOutline("primary", $primary, rgba($primary, 0.4), $primary);
    @include btnOutline("secondary", $secondary, rgba($secondary, 0.4), $secondary);

    @include fixDropdownTheme($text-primary, $bg, $primary-text, $primary);
}

@include button();
@include fixDropdown();

.theme-bd.theme-light {
    @include btnTheme(map-get($theme, light));
}

.theme-bd.theme-dark {
    @include btnTheme(map-get($theme, dark));
}