// Dropdown component - Standalone implementation
// Decoupled from Bootstrap 5, integrated with DaisyUI colors

@use "sass:list";
@use "sass:map";

// Variables
$dropdown-min-width: 10rem !default;
$dropdown-padding-x: 0.5rem !default;
$dropdown-padding-y: 0.5rem !default;
$dropdown-spacer: 0.125rem !default;
$dropdown-font-size: 1rem !default;
$dropdown-border-radius: 0.375rem !default;
$dropdown-border-width: 2px !default;
$dropdown-inner-border-radius: calc(#{$dropdown-border-radius} - #{$dropdown-border-width}) !default;
$dropdown-divider-margin-y: 0.5rem !default;
$dropdown-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !default;
$dropdown-item-padding-y: 0.25rem !default;
$dropdown-item-padding-x: 1rem !default;
$dropdown-header-padding-x: 1rem !default;
$dropdown-header-padding-y: 0.5rem !default;
$dropdown-z-index: 1000 !default;

// Caret variables
$caret-width: 0.3em !default;
$caret-vertical-align: 0.255em !default;
$caret-spacing: 0.255em !default;
$enable-caret: true !default;

// Font
$font-weight-normal: 400 !default;
$font-size-sm: 0.875rem !default;

// Breakpoints
$breakpoints: (
    xs: 0,
    sm: 576px,
    md: 768px,
    lg: 992px,
    xl: 1200px,
    xxl: 1400px) !default;

// Mixins
@mixin media-breakpoint-up($name) {
    $min: map.get($breakpoints, $name
    );

@if $min and $min >0 {
    @media (min-width: $min) {
        @content;
    }
}

@else {
    @content;
}
}

// Caret mixins
@mixin caret-down($width: $caret-width) {
    border-top: $width solid;
    border-right: $width solid transparent;
    border-bottom: 0;
    border-left: $width solid transparent;
}

@mixin caret-up($width: $caret-width) {
    border-top: 0;
    border-right: $width solid transparent;
    border-bottom: $width solid;
    border-left: $width solid transparent;
}

@mixin caret-end($width: $caret-width) {
    border-top: $width solid transparent;
    border-right: 0;
    border-bottom: $width solid transparent;
    border-left: $width solid;
}

@mixin caret-start($width: $caret-width) {
    border-top: $width solid transparent;
    border-right: $width solid;
    border-bottom: $width solid transparent;
}

@mixin caret($direction: down,
    $width: $caret-width,
    $spacing: $caret-spacing,
    $vertical-align: $caret-vertical-align) {
    @if $enable-caret {
        &::after {
            display: inline-block;
            margin-left: $spacing;
            vertical-align: $vertical-align;
            content: "";

            @if $direction ==down {
                @include caret-down($width);
            }

            @else if $direction ==up {
                @include caret-up($width);
            }

            @else if $direction ==end {
                @include caret-end($width);
            }
        }

        @if $direction ==start {
            &::after {
                display: none;
            }

            &::before {
                display: inline-block;
                margin-right: $spacing;
                vertical-align: $vertical-align;
                content: "";
                @include caret-start($width);
            }
        }

        &:empty::after {
            margin-left: 0;
        }
    }
}

@mixin border-radius($radius: $dropdown-border-radius) {
    border-radius: $radius;
}

@mixin border-top-radius($radius) {
    border-top-left-radius: $radius;
    border-top-right-radius: $radius;
}

@mixin border-bottom-radius($radius) {
    border-bottom-left-radius: $radius;
    border-bottom-right-radius: $radius;
}

@mixin gradient-bg($color) {
    background-color: $color;
}

@mixin box-shadow($shadow) {
    box-shadow: $shadow;
}

@mixin font-size($size) {
    font-size: $size;
}

// Breakpoint infix function
@function breakpoint-infix($name, $breakpoints) {
    @if $name ==xs {
        @return "";
    }

    @return "-#{$name}";
}

// The dropdown wrapper (`<div>`)
.dropup,
.dropend,
.dropdown,
.dropstart,
.dropup-center,
.dropdown-center {
    position: relative;
}

.dropdown-toggle {
    white-space: nowrap;

    // Generate the caret automatically
    @include caret();
}

// The dropdown menu
.dropdown-menu {
    // CSS variables using DaisyUI colors
    --dropdown-z-index: #{$dropdown-z-index};
    --dropdown-min-width: #{$dropdown-min-width};
    --dropdown-padding-x: #{$dropdown-padding-x};
    --dropdown-padding-y: #{$dropdown-padding-y};
    --dropdown-spacer: #{$dropdown-spacer};
    --dropdown-font-size: #{$dropdown-font-size};
    --dropdown-color: var(--color-base-content);
    --dropdown-bg: var(--color-base-300);
    --dropdown-border-color: var(--color-base-100);
    --dropdown-border-radius: #{$dropdown-border-radius};
    --dropdown-border-width: #{$dropdown-border-width};
    --dropdown-inner-border-radius: #{$dropdown-inner-border-radius};
    --dropdown-divider-bg: var(--color-base-300);
    --dropdown-divider-margin-y: #{$dropdown-divider-margin-y};
    --dropdown-box-shadow: #{$dropdown-box-shadow};
    --dropdown-link-color: var(--color-base-content);
    --dropdown-link-hover-color: var(--color-base-content);
    --dropdown-link-hover-bg: var(--color-base-200);
    --dropdown-link-active-color: var(--color-primary-content);
    --dropdown-link-active-bg: var(--color-primary);
    --dropdown-link-disabled-color: var(--color-base-content, #adb5bd);
    --dropdown-item-padding-x: #{$dropdown-item-padding-x};
    --dropdown-item-padding-y: #{$dropdown-item-padding-y};
    --dropdown-header-color: var(--color-base-content);
    --dropdown-header-padding-x: #{$dropdown-header-padding-x};
    --dropdown-header-padding-y: #{$dropdown-header-padding-y};

    position: absolute;
    z-index: var(--dropdown-z-index);
    display: none; // none by default, but block on "open" of the menu
    min-width: var(--dropdown-min-width);
    max-width: calc(100dvw - 1rem); // Prevent overflow on small screens
    width: max-content;
    padding: var(--dropdown-padding-y) var(--dropdown-padding-x);
    margin: 0; // Override default margin of ul
    color: var(--dropdown-color);
    text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
    list-style: none;
    background-color: var(--dropdown-bg);
    background-clip: padding-box;
    border: var(--dropdown-border-width) solid var(--dropdown-border-color);
    @include border-radius(var(--dropdown-border-radius));
    @include box-shadow(var(--dropdown-box-shadow));

    &[data-bs-popper] {
        top: 100%;
        left: 0;
        margin-top: var(--dropdown-spacer);
    }

    @if $dropdown-padding-y ==0 {

        >.dropdown-item:first-child,
        >li:first-child .dropdown-item {
            @include border-top-radius(var(--dropdown-inner-border-radius));
        }

        >.dropdown-item:last-child,
        >li:last-child .dropdown-item {
            @include border-bottom-radius(var(--dropdown-inner-border-radius));
        }
    }
}

// Responsive positioning
@each $breakpoint in map.keys($breakpoints) {
    @include media-breakpoint-up($breakpoint) {
        $infix: breakpoint-infix($breakpoint, $breakpoints);

        .dropdown-menu#{$infix}-start {
            --bs-position: start;

            &[data-bs-popper] {
                right: auto;
                left: 0;
            }
        }

        .dropdown-menu#{$infix}-end {
            --bs-position: end;

            &[data-bs-popper] {
                right: 0;
                left: auto;
            }
        }
    }
}

// Allow for dropdowns to go bottom up (aka, dropup-menu)
.dropup {
    .dropdown-menu[data-bs-popper] {
        top: auto;
        bottom: 100%;
        margin-top: 0;
        margin-bottom: var(--dropdown-spacer);
    }

    .dropdown-toggle {
        @include caret(up);
    }
}

.dropend {
    .dropdown-menu[data-bs-popper] {
        top: 0;
        right: auto;
        left: 100%;
        margin-top: 0;
        margin-left: var(--dropdown-spacer);
    }

    .dropdown-toggle {
        @include caret(end);

        &::after {
            vertical-align: 0;
        }
    }
}

.dropstart {
    .dropdown-menu[data-bs-popper] {
        top: 0;
        right: 100%;
        left: auto;
        margin-top: 0;
        margin-right: var(--dropdown-spacer);
    }

    .dropdown-toggle {
        @include caret(start);

        &::before {
            vertical-align: 0;
        }
    }
}

// Dividers (basically an `<hr>`) within the dropdown
.dropdown-divider {
    height: 0;
    margin: var(--dropdown-divider-margin-y) 0;
    overflow: hidden;
    border-top: 1px solid var(--dropdown-divider-bg);
    opacity: 1;
}

// Links, buttons, and more within the dropdown menu
.dropdown-item {
    display: block;
    width: 100%; // For `<button>`s
    padding: var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);
    clear: both;
    font-weight: $font-weight-normal;
    color: var(--dropdown-link-color);
    text-align: inherit; // For `<button>`s
    text-decoration: none;
    white-space: nowrap; // prevent links from randomly breaking onto new lines
    background-color: transparent; // For `<button>`s
    border: 0; // For `<button>`s
    @include border-radius(0);

    &:hover,
    &:focus {
        color: var(--dropdown-link-hover-color);
        @include gradient-bg(var(--dropdown-link-hover-bg));
    }

    &.active,
    &:active {
        color: var(--dropdown-link-active-color);
        text-decoration: none;
        @include gradient-bg(var(--dropdown-link-active-bg));
    }

    &.disabled,
    &:disabled {
        color: var(--dropdown-link-disabled-color);
        pointer-events: none;
        background-color: transparent;
    }
}

.dropdown-menu.show {
    display: block;
}

// Dropdown section headers
.dropdown-header {
    display: block;
    padding: var(--dropdown-header-padding-y) var(--dropdown-header-padding-x);
    margin-bottom: 0; // for use with heading elements
    color: var(--dropdown-header-color);
    white-space: nowrap; // as with > li > a
}

// Dropdown text
.dropdown-item-text {
    display: block;
    padding: var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);
    color: var(--dropdown-link-color);
}

// Dark dropdowns
.dropdown-menu-dark {
    --dropdown-color: #dee2e6;
    --dropdown-bg: #343a40;
    --dropdown-border-color: var(--color-base-300);
    --dropdown-box-shadow: #{$dropdown-box-shadow};
    --dropdown-link-color: #dee2e6;
    --dropdown-link-hover-color: #fff;
    --dropdown-divider-bg: var(--color-base-300);
    --dropdown-link-hover-bg: rgba(255, 255, 255, 0.15);
    --dropdown-link-active-color: var(--color-primary-content);
    --dropdown-link-active-bg: var(--color-primary);
    --dropdown-link-disabled-color: #adb5bd;
    --dropdown-header-color: #adb5bd;
}
