@use '@angular/material' as mat;

@keyframes _mat-menu-enter {
    from {
        transform: scale(0.8);
        opacity: 0;
    }

    to {
        transform: none;
        opacity: 1;
    }
}

@keyframes _mat-menu-exit {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

.natural-dropdown-container {
    display: flex;
    flex-direction: column;
    animation: _mat-menu-enter 120ms cubic-bezier(0, 0, 0.2, 1);
    box-shadow: var(--mat-sys-level2);
    border-radius: 2px;
    background: var(--mat-sys-surface-container-high);
    height: 100%;

    & > * > * > * {
        outline: none !important;
    }

    &-content {
        flex: 1;
        padding: 5px;
        overflow: auto;
    }

    .natural-dropdown-validate-button {
        display: flex;
        flex: none;
        flex-direction: row;
        justify-content: flex-end;
        margin: 5px;
    }

    &.mat-menu-panel-exit-animation {
        animation: _mat-menu-exit 100ms 25ms linear forwards;
    }
}