@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;

    .overlay {
        @include bdl-Overlay-container;

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

.header-flyout-list-container {
    padding: 0;

    .flyout-list-container-title {
        padding-bottom: $flyout-header-spacer;
    }

    .flyout-list-title {
        margin: 0;
        font-size: $flyout-title-font-size;
        line-height: $flyout-title-line-height;
    }

    .flyout-list-container-body {
        $title-height: $flyout-title-line-height + $flyout-header-spacer;
        $footer-height: $flyout-title-line-height + 2 * $flyout-footer-spacer;

        // 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 + $title-height);
        }

        &.with-footer {
            // the overall height minus the padding, and the footer height
            height: $flyout-list-height - ($flyout-list-padding + $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 + $title-height + $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;
        }
    }
}