@use "variables" as *;

.p-contextmenu {
    padding: $spacing-1 0;
    background: $white;
    color: $black;
    border: 0 none;
    box-shadow:
        0 2px 4px -1px $color-palette-black-op-20,
        0 4px 5px 0 $color-palette-black-op-10,
        0 1px 10px 0 $color-palette-black-op-10;
    width: 12.5rem;
}

.p-contextmenu .p-menuitem-link {
    padding: $spacing-2 $spacing-2;
    color: $black;
    border-radius: 0;
    transition: none;
    user-select: none;
}

.p-contextmenu .p-menuitem-link .p-menuitem-text {
    color: $black;
}

.p-contextmenu .p-menuitem-link .p-menuitem-icon {
    color: $black;
    margin-right: $spacing-1;
}

.p-contextmenu .p-menuitem-link .p-submenu-icon {
    color: $black;
}

.p-contextmenu .p-menuitem-link:not(.p-disabled):hover {
    background: $bg-hover;
}

.p-contextmenu .p-menuitem-link:not(.p-disabled):hover .p-menuitem-text {
    color: $text-color-hover;
}

.p-contextmenu .p-menuitem-link:not(.p-disabled):hover .p-menuitem-icon {
    color: $text-color-hover;
}

.p-contextmenu .p-menuitem-link:not(.p-disabled):hover .p-submenu-icon {
    color: $text-color-hover;
}

.p-contextmenu .p-menuitem-link:focus {
    background: $bg-highlight;
    outline: 2px solid $color-palette-primary;
    outline-offset: -2px;
}

/* PrimeNG keyboard navigation focus styles */
.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
    background: $bg-highlight;
}

.p-contextmenu
    .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus
    > .p-menuitem-content
    .p-menuitem-link {
    background: $bg-highlight;
    color: $text-color-hover;
}

.p-contextmenu .p-menuitem.p-focus > .p-menuitem-content .p-menuitem-text {
    color: $text-color-hover;
}

.p-contextmenu .p-submenu-list {
    padding: $spacing-1 0;
    background: $white;
    border: 0 none;
    box-shadow:
        0 2px 4px -1px $color-palette-black-op-20,
        0 4px 5px 0 $color-palette-black-op-10,
        0 1px 10px 0 $color-palette-black-op-10;
}

.p-contextmenu .p-menuitem.p-menuitem-active > .p-menuitem-link {
    background: $bg-highlight;
}

.p-contextmenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-text {
    color: $black;
}

.p-contextmenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-icon,
.p-contextmenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-submenu-icon {
    color: $black;
}

.p-contextmenu .p-menu-separator {
    border-top: 1px solid $color-palette-black-op-10;
    margin: $spacing-1 0;
}

.p-contextmenu .p-submenu-icon {
    font-size: $font-size-sm;
}
