@import '../../styles/variables';
@import './variables';

.bdl-Flyout-target {
    display: inline-block;
}

.bdl-Flyout-element {
    outline: none;
}

.flyout-overlay {
    @include common-typography;

    z-index: $overlay-z-index;
    box-sizing: border-box;

    & > div:not(.should-outline-focus):focus {
        outline: none;
    }

    .overlay {
        padding: 15px;
        border-radius: $bdl-border-radius-size-med;
    }

    &.flyout-overlay-target-attached-left,
    &.flyout-overlay-target-attached-right,
    &.dropdown-menu-element-attached-center {
        .overlay {
            @include bdl-openComponentAnimation($bdl-transitionDurationBase);
        }
    }
}

@include breakpoint($medium-screen) {
    .flyout-overlay.bdl-Flyout--responsive {
        &.flyout-overlay-enabled {
            // cancels out the tether inline styling without having to set enabled=false
            transform: none !important;
        }

        .bdl-Overlay > .overlay {
            position: fixed;
            inset: 0;
            margin: 0;
            padding: 0;
            background-color: $white;
            border: none;
            border-radius: 0;
            box-shadow: none;
        }

        .bdl-OverlayHeader {
            position: relative;
            z-index: 1;
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: $bdl-OverlayHeader-height;
            padding: ($bdl-grid-unit * 3) ($bdl-grid-unit * 4);
            background-color: $white;
            box-shadow: $bdl-header-box-shadow;

            .bdl-CloseButton {
                display: block;
            }
        }
    }
}