@use 'sass:map';
@use '../../tools/breakpoint';
@use '../../tools/dictionaries';
@use '../../tools/placement';
@use 'theme';

.DropdownPopover {
    @include placement.child();

    display: none;
    width: max-content;
    padding: theme.$padding;
    border-radius: theme.$border-radius;
    background-color: theme.$background;
    box-shadow: theme.$shadow;

    &[data-spirit-fullwidthmode='mobile-only'] {
        @include breakpoint.down(map.get(theme.$breakpoints, tablet)) {
            width: 100%;
        }
    }

    &[data-spirit-fullwidthmode='all'] {
        width: 100%;
    }
}

.DropdownPopover.is-open {
    display: block;
}

@include dictionaries.generate-placements(
    $class-name: 'DropdownPopover',
    $dictionary-values: theme.$placement-dictionary,
    $offset: theme.$offset
);
