@use "variables" as *;

:host {
    display: contents;
}

.bubble-menu {
    display: flex;
    align-items: center;
    background-color: $white;
    border-radius: $border-radius-md;
    box-shadow: $shadow-m;
    padding: $spacing-0;
    gap: $spacing-xxs;
    width: 100%;

    &.hidden {
        display: none;
    }

    .divider {
        border-left: 1px solid $color-palette-gray-200;
        height: 1.5rem;
        margin: 0 $spacing-0;
    }

    .bubble-menu-button {
        background: none;
        border: none;
        outline: none;
        cursor: pointer;
        border-radius: $border-radius-sm;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background-color $basic-speed;
        padding: $spacing-0;
        font-size: $font-size-sm;

        &:hover {
            background-color: $color-palette-gray-300;
        }

        &.is-active {
            background-color: $color-palette-gray-300;
        }

        &:disabled {
            opacity: $field-disabled-opacity;
            cursor: not-allowed;
        }

        .material-icons {
            font-size: $font-size-lg;
        }

        &--char {
            font-weight: $font-weight-bold;
            width: 1.75rem;
            height: 1.75rem;
            padding: 0;
            font-size: 1rem;

            i {
                font-style: italic;
            }
            u {
                text-decoration: underline;
            }
            s {
                text-decoration: line-through;
            }
        }

        &--icon {
            width: 1.75rem;
            height: 1.75rem;
            padding: 0;
        }
    }
}

::ng-deep .bubble-menu-dropdown {
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: $border-radius-xs;
    transition: background-color $basic-speed;
    height: 2rem;
    padding: 0;

    &.p-dropdown.p-dropdown-open {
        border-color: transparent;
        outline: none;
    }

    &.p-dropdown:not(.p-disabled).p-focus {
        border-color: transparent;
        outline: none;
    }

    &:not(.p-disabled):hover {
        background-color: $color-palette-gray-300;
    }

    .p-dropdown-label {
        padding: $spacing-0;
    }

    .p-dropdown-trigger {
        background: transparent;
        color: $black;
        width: 1.75rem;
    }
}

::ng-deep .bubble-menu-dropdown-panel {
    padding: $spacing-1 0;

    .p-dropdown-items .p-dropdown-item {
        padding: 0;
    }

    .p-dropdown-items .p-focus {
        background-color: $color-palette-gray-200;
    }

    .p-dropdown-items .p-dropdown-item.p-highlight {
        background: $color-palette-gray-300;
    }

    .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover {
        background: $color-palette-gray-200;
    }
}

.dropdown-item-content {
    display: flex;
    align-items: center;
    padding: $spacing-0 $spacing-1;
    gap: $spacing-3;
}

.dropdown-item-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 1px solid $color-palette-gray-300;
    border-radius: $border-radius-sm;
}
