@use "../../core/size";
@use "../../core/mixins/breakpoints";
@use "../../core/mixins/forcedcolors";
@use "../../core/config-variables";
@use "variables" as *;

.ipopupmenu {
    background-color: $popupmenu-color-background;

    &__list {
        margin: 0;
        border: var(--f-border-width-small) solid $popupmenu-color-border;
        padding: size.$padding-050;

        &__item {
            cursor: pointer;
            list-style-type: none;
            white-space: nowrap;

            a,
            a:visited,
            a:active {
                color: $popupmenu-color-text-active;

                @media (forced-colors: active) {
                    color: LinkText;
                }
            }

            @media (hover: hover) {
                a:hover {
                    color: $popupmenu-color-text-hover;

                    @media (forced-colors: active) {
                        color: LinkText;
                    }
                }
            }
        }
    }
}

.ipopupmenu--vertical {
    .ipopupmenu__list {
        display: block;

        &__item {
            padding: size.$padding-075;
            display: block;

            @media (hover: hover) {
                &:hover:not(.ipopupmenu__list__item--highlight) {
                    background-color: $popupmenu-color-background-hover;
                    @include forcedcolors.hover-indicator(outline, 2px);
                }
            }

            &--highlight {
                background-color: $popupmenu-color-background-selected;
                font-weight: var(--f-font-weight-medium);
                @include forcedcolors.selected-indicator;

                & a {
                    color: $popupmenu-color-text-selected;

                    @media (forced-colors: active) {
                        color: HighlightText;
                    }
                }
            }
        }
    }
}