@use "variables" as *;

:host {
    ::ng-deep {
        .p-toolbar {
            padding: $spacing-1 $spacing-3;
            justify-content: normal;

            dot-content-drive-tree-toggler {
                display: flex;
                visibility: visible;
                width: inherit;
                grid-area: tree-toogler;
                transition: all $content-drive-animation-speed $content-drive-animation-ease;

                &.sidebar-expanded {
                    visibility: hidden;
                    width: 0;
                    min-width: 0;
                }
            }
        }

        .dot-content-drive-toolbar {
            background-color: $color-palette-gray-100;
            border: none;
            border-bottom: 1px solid $color-palette-gray-300;
            gap: $spacing-1;
            height: 100%;
        }
    }
}

.p-toolbar-group {
    row-gap: $spacing-1;
    column-gap: $spacing-1;
    display: grid;
    width: 100%;
    grid-template-columns: min-content 1fr;
    grid-template-areas:
        "tree-toogler toolbar-group-top"
        ". toolbar-group-bottom";

    place-items: center;

    transition: column-gap $content-drive-animation-speed $content-drive-animation-ease;

    &:has(dot-content-drive-tree-toggler.sidebar-expanded) {
        column-gap: 0;
    }
}

.p-toolbar-group-top {
    display: grid;
    align-items: center;
    width: 100%;
    grid-area: toolbar-group-top;

    grid-template-columns: repeat(3, minmax(4.5rem, 14rem));

    .search-input {
        grid-column: 1 / 3;
    }

    p-button {
        grid-column: 4;
        justify-self: end;
    }
}

.p-toolbar-group-bottom {
    display: grid;
    grid-template-columns: repeat(3, minmax(4.5rem, 14rem));
    width: 100%;
    grid-area: toolbar-group-bottom;
}

.p-toolbar-group-top,
.p-toolbar-group-bottom {
    gap: $spacing-1;
}
