@use "variables" as *;

:host {
    display: block;

    &.hide {
        visibility: hidden;
    }

    .drag-image {
        position: absolute;
        top: -1000px;
        left: -1000px;
        padding: $spacing-3;
        width: fit-content;
        background-color: white;
        border: 1px solid $color-palette-gray-400;
        border-radius: $border-radius-lg;
        z-index: 1;
        visibility: visible;
    }

    ::ng-deep {
        .p-button-raised {
            background-color: $white;
            color: $black;
            box-shadow: $shadow-s;
            transition: all 0.15s ease-in-out;

            &:disabled {
                pointer-events: auto;
            }

            &:hover:enabled,
            &:focus:enabled {
                background-color: $color-palette-primary-100;
                color: $color-palette-primary-500;
                box-shadow: $shadow-s;
                transform: scale(1.1);
            }
        }

        .delete {
            color: $color-palette-gray-500;
        }
    }
}

.bounds {
    position: absolute;
    pointer-events: none;
    outline: solid 2px $color-palette-primary-500;
}

.actions {
    display: flex;
    justify-content: flex-end;
    gap: $spacing-0;
}
