@use  '../../../assets/styles/effects' as *;

.dropdown-body {
    --uui-main_menu-text: var(--uui-text-contrast);
    --uui-main_menu-text-active: var(--uui-text-contrast);
    --uui-main_menu-active: var(--uui-surface-contrast-lower);
    --uui-main_menu-border-active: var(--uui-primary-50);

    --uui-main_menu-dropdown-bg: var(--uui-surface-contrast-lower);
    --uui-main_menu-dropdown-bg-hover: var(--uui-surface-contrast-low);
    --uui-main_menu-dropdown-hover: var(--uui-primary-50);
    --uui-main_menu-dropdown-shadow: none;
    --uui-main_menu-dropdown-border-radius: none;
    display: flex;
    flex-direction: column;
    min-width: 200px;
    background-color: var(--uui-main_menu-dropdown-bg);
    box-shadow: var(--uui-main_menu-dropdown-shadow);
    border-radius: var(--uui-main_menu-dropdown-border-radius);
    overflow: hidden; // to hide children border radius on dropdown body

    :global(.-clickable) {
        &:global(.uui-button-box):hover {
            background-color: var(--uui-main_menu-dropdown-bg-hover);
        }

        &:focus-visible {
            @include focus-visible-effect(-2px, null);
        }
    }

    :global(.uui-button-box) {
        &:global(.uui-active) {
            border: none;
            border-left: 3px solid var(--uui-main_menu-border-active);
            background-color: var(--uui-main_menu-hover);
        }
    }
}
