@use "variables" as *;

.p-sidebar {
    background: $white;
    border: 0 none;
    box-shadow: $shadow-xs;
}
.p-sidebar .p-sidebar-header {
    padding: 0;
}
.p-sidebar .p-sidebar-header .p-sidebar-close,
.p-sidebar .p-sidebar-header .p-sidebar-icon {
    width: $spacing-5;
    height: $spacing-5;
    border: 0 none;
    background: transparent;
    border-radius: 50%;
    transition:
        background-color 0.2s,
        color 0.2s,
        box-shadow 0.2s;
}
.p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover,
.p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover {
    border-color: transparent;
}
.p-sidebar .p-sidebar-header .p-sidebar-close:focus,
.p-sidebar .p-sidebar-header .p-sidebar-icon:focus {
    outline: 0 none;
    outline-offset: 0;
}

.p-sidebar .p-sidebar-content {
    padding: $spacing-3;
    height: 100%;
}

.p-sidebar-mask {
    backdrop-filter: blur(5px);

    &.p-component-overlay-enter {
        animation: p-component-overlay-enter-animation 150ms forwards;
    }

    &.p-component-overlay-leave {
        animation: p-component-overlay-leave-animation 150ms forwards;
    }
}

@keyframes p-component-overlay-enter-animation {
    from {
        background-color: transparent;
    }
    to {
        background-color: $color-palette-black-op-80;
    }
}
@keyframes p-component-overlay-leave-animation {
    from {
        background-color: $color-palette-black-op-80;
    }
    to {
        background-color: transparent;
    }
}
