@use "variables" as *;

:host {
    display: block;

    ::ng-deep {
        .p-dropdown {
            display: flex;
        }

        .p-inputnumber {
            width: 100%;
        }

        // Animation
        .p-tabview-panel {
            overflow: auto;
            max-height: 0;
            opacity: 0;
            display: none;
            transition: max-height $content-drive-animation-speed $content-drive-animation-ease;
            padding: 0 $spacing-4;
        }

        .p-tabview-panel[aria-hidden="false"] {
            max-height: 30rem; /* This must be greater than the maximum expected content */
            opacity: 1;
            display: block;
        }

        .p-tabview-panel[hidden] {
            display: block !important;
        }

        p-tabpanel:has(.p-tabview-panel[hidden]) {
            margin: 0;
        }
    }
}

.folder-dialog-tab-content {
    display: flex;
    flex-direction: column;
    gap: $spacing-3;
    margin-top: $spacing-3;
}

.folder-dialog-path {
    background-color: $color-palette-gray-100;
    height: $spacing-5;
    border-radius: 0.375rem; //6px
    padding: 0 $spacing-1;
    display: flex;
    align-items: center;
    margin: 0;
}

.folder-dialog-field {
    display: flex;
    flex-direction: column;
    gap: $spacing-1;
    margin-bottom: $spacing-3;
}

.folder-dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: $spacing-3;
    margin-top: $spacing-3;
    padding: 0 $spacing-4;
}
