@use "variables" as *;

::ng-deep {
    .uve-toolbar {
        padding: 0 $spacing-4;
        transition: padding 0.2s ease;
    }

    .p-button.uve-toolbar-chips,
    .p-button.uve-toolbar-chips:hover,
    .p-button.uve-toolbar-chips:focus {
        height: $field-height-sm;
        background-color: $color-palette-primary-op-10;
        border-color: $color-palette-primary-op-10;
        color: var(--color-palette-primary-500);
        cursor: pointer;
    }

    .p-button.unlock-button:disabled {
        pointer-events: auto;
        color: $color-palette-primary-500;
    }
}

.p-toolbar-group-start,
.p-toolbar-group-end,
.p-toolbar-group-center {
    padding: $spacing-1 0;
    align-items: center;
    gap: $spacing-1;
    align-self: stretch;
}

.vertical-divider {
    align-self: stretch;
    position: relative;
    &::before {
        border-left: 1px solid $color-palette-gray-200;
        position: absolute;
        display: block;
        top: 0;
        left: 50%;
        height: 100%;
        content: "";
    }
}
