@import '../../css/variables';
@import '../../css/mixins';
@import 'css/variables';
@import 'css/sizes';
@import 'css/colors';

.dropdown-wrapper {
    display: inline-block;
    position: relative;

    .dropdown-trigger {
        display: contents;
        cursor: pointer;
    }
}

.dropdown {
    @include popup(('z-index': var(----z-index)));
    @include popup-arrow();
    @include popup-arrow-size-variant();

    text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
    list-style: none;
    line-height: var(----line-height);
    font-size: var(----font-size);
    background-clip: padding-box;
    display: inline-block;
    white-space: normal;
    min-width: var(----min-width);
    max-width: var(----max-width);
    color: var(----color);
    box-shadow: var(----box-shadow);

    > .dropdown-header {
        border-width: var(----border-top-width) var(----border-right-width) 0 var(----border-left-width);
        border-style: var(----border-style);
        border-color: var(----border-color);
        background-color: var(----header--background);
        padding: var(----header--padding);
    }

    > .dropdown-body {
        border-width: var(----border-width);
        border-style: var(----border-style);
        border-color: var(----border-color);
        background-color: var(----background);
        padding: var(----body--padding);

        .dropdown-wrapper {
            width: 100%;
        }

        .dropdown-divider {
            margin-top: var(----divider--margin-top);
            margin-bottom: var(----divider--margin-bottom);
            background-color: var(----border-top-color);
        }
    }

    > .dropdown-footer {
        border-width: 0 var(----border-right-width) var(----border-bottom-width) var(----border-left-width);
        border-style: var(----border-style);
        border-color: var(----border-color);
        background-color: var(----footer--background);
        padding: var(----footer--padding);
    }

    > *:nth-child(2) {
        border-top-left-radius: var(----border-top-left-radius);
        border-top-right-radius: var(----border-top-right-radius);
    }

    > *:last-child {
        border-bottom-left-radius: var(----border-bottom-left-radius);
        border-bottom-right-radius: var(----border-bottom-right-radius);
    }

    @include popup-arrow-color-variant-for-side('top', (
        'background': var(----background),
        'border-color': var(----border-bottom-color)
    ));

    @include popup-arrow-color-variant-for-side('bottom', (
        'background': var(----background),
        'border-color': var(----border-top-color)
    ));

    @include popup-arrow-color-variant-for-side('left', (
        'background': var(----background),
        'border-color': var(----border-right-color)
    ));

    @include popup-arrow-color-variant-for-side('right', (
        'background': var(----background),
        'border-color': var(----border-left-color)
    ));
}