// Dropdown styles for dark theme
@mixin dark-theme-dropdown {
    background-color: $dark;
    color: $light;

    a {
        color: $light;
    }

    // Dropdown item hover
    .dropdown-item.dropdown-item-action {
        transition: background-color $base-transition-time ease;

        &:hover {
            background-color: generate-shade($dark, 30, "lighten");
        }
    }
}

// Dropdown styles for light theme
@mixin light-theme-dropdown {
    background-color: $light;
    color: $dark;

    a {
        color: $dark;
    }

    // Dropdown item hover
    .dropdown-item.dropdown-item-action {
        transition: background-color $base-transition-time ease;

        &:hover {
            background-color: generate-shade($light, 20, "darken");
        }
    }
}


// Base dropdown styles
.dropdown {
    display: inline-block;
    position: relative;


    // Show the dropdown menu when it is collapsed
    &.collapsed {
        .dropdown-menu {
            visibility: visible;
        }
    }

    // Dropdown up styles
    &.dropdown-up {
        .dropdown-toggle .btn-arrow {
            rotate: 180deg;
        }

        .dropdown-menu {
            top: auto !important;
            bottom: calc(100% + $base-margin) !important;
        }
    }

    // Dropdown left styles
    &.dropdown-left {
        .dropdown-toggle .btn-arrow {
            rotate: 90deg;
        }

        .dropdown-menu {
            top: 0 !important;
            left: auto !important;
            right: calc(100% + $base-margin) !important;
        }
    }

    // Dropdown right styles
    &.dropdown-right {
        .dropdown-toggle .btn-arrow {
            rotate: -90deg;
        }

        .dropdown-menu {
            top: 0 !important;
            right: auto !important;
            left: calc(100% + $base-margin) !important;
        }
    }

    // Dropdown button styles
    .dropdown-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        // Dropdown btn-arrow styles
        .btn-arrow {
            display: inline-block;
            margin-left: $base-margin;
        }
    }

    // Dropdown menu styles
    .dropdown-menu {
        position: absolute;
        z-index: 2;
        top: calc(100% + $base-margin);
        left: 0;
        overflow: hidden;
        transition: all $base-transition-time ease;
        padding-bottom: $base-padding;

        // Hide it by default
        visibility: hidden;

        border-radius: $base-border-radius;
        @include light-theme-dropdown;
        @include base-border-style;

        // Dropdown menu item styles
        .dropdown-item {
            padding: $base-padding $base-padding 0 $base-padding;

            // Give nowrap to the link
            a {
                white-space: nowrap;
            }
        }

        .divider {
            margin-top: $base-padding;
        }
    }
}


// Apply dropdown themes
body[data-theme="dark"] {
    .dropdown-menu {
        @include dark-theme-dropdown;
    }
}

body[data-theme="light"] {
    .dropdown-menu {
        @include light-theme-dropdown;
    }
}

.dropdown[data-theme="dark"] {
    .dropdown-menu {
        @include dark-theme-dropdown;
    }
}

.dropdown[data-theme="light"] {
    .dropdown-menu {
        @include light-theme-dropdown;
    }
}