@import '../../../components/flyout/variables';
@import '../../../styles/variables';
@import '../../../styles/mixins/overlay';
@import './variables';

.header-flyout {
    &::before {
        display: none;
    }
}

.header-flyout-overlay {
    width: $flyout-list-width;
    height: $flyout-list-height;
    animation: bdl-open-flyout-animation 0.3s cubic-bezier(0.32, 0, 0.33, 1.3);
    animation-fill-mode: both;
    transform-origin: top right;

    @media (prefers-reduced-motion: reduce) {
        animation: none;
    }

    .overlay {
        @include bdl-Overlay-container;

        padding: (2 * $flyout-header-spacer) $flyout-list-padding 0;
    }

    .header-flyout-title {
        margin: 0;
        padding-bottom: $flyout-header-spacer;
        font-size: $flyout-title-font-size;
        line-height: $flyout-title-line-height;
    }
}

@keyframes bdl-open-flyout-animation {
    from {
        opacity: 0;
        transform: translateY(-10px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.header-flyout-list-container {
    .flyout-list-container-body {
        // the overall height, minus the top and bottom padding
        height: $flyout-list-height - 2 * $flyout-list-padding;
        margin-bottom: $flyout-list-padding;

        &.with-header {
            // the overall height minus the padding, and header height
            height: $flyout-list-height - (2 * $flyout-list-padding + $flyout-title-height);
        }

        &.with-footer {
            // the overall height minus the padding, and the footer height
            height: $flyout-list-height - ($flyout-list-padding + $flyout-footer-height);
            margin-bottom: 0;
        }

        &.with-header.with-footer {
            // the overall height minus the padding, and both text hbdl-gray-50
            height: $flyout-list-height - ($flyout-list-padding + $flyout-title-height + $flyout-footer-height);
            margin-bottom: 0;
        }
    }

    .flyout-list-container-footer {
        padding: $flyout-footer-spacer 0;
        font-size: $flyout-footer-font-size;
        line-height: $flyout-footer-line-height;
        border-top: 1px solid $bdl-gray-10;

        &.hidden {
            display: none;
        }
    }
}

@include breakpoint($medium-screen) {
    .bdl-Flyout--responsive {
        .header-flyout-list-container {
            .flyout-list-container-body {
                $header-height: $bdl-OverlayHeader-height;

                height: calc(100vh - #{$header-height});

                &.with-header {
                    height: calc(100vh - #{$header-height});
                }

                &.with-footer {
                    height: calc(100vh - #{$flyout-footer-height});
                }

                &.with-header.with-footer {
                    height: calc(100vh - #{$header-height} - #{$flyout-footer-height});
                }

                .scroll-container {
                    overflow-y: auto;

                    .scroll-wrap-container {
                        &::before,
                        &::after {
                            display: none;
                        }
                    }
                }
            }

            .flyout-list-container-footer {
                height: $flyout-footer-height;
                padding: $flyout-footer-spacer;
            }
        }

        .header-flyout-overlay {
            animation: none;

            .header-flyout-title {
                padding-bottom: 0;
            }
        }
    }
}