Asymmetrik/ngx-starter

@import '../../../styles/shared';

$flyout-border-top: 8px !default;
$flyout-box-shadow: 0 0.25rem 0.5rem rgba(var(--bs-body-bg-rgb), 0.2) !default;

$flyout-right-top: 24px !default;
$flyout-top-top: 20px !default;
$flyout-bottom-bottom: 20px * 2 !default;

:host {
    position: fixed;
    right: 0;
    top: $flyout-right-top;
    @include transition(left 0.15s ease-in-out, right 0.15s ease-in-out);
    z-index: $zindex-popover;

    &[placement='left'] {
        right: auto;
        left: $nav-open-width;
    }

    &[placement='top'] {
        right: auto;
        top: $flyout-top-top;
        left: $nav-open-width;
    }

    &[placement='bottom'] {
        right: auto;
        top: auto;
        bottom: $flyout-bottom-bottom;
        left: $nav-open-width;
    }
}

.navbar-close {
    :host[placement='left'],
    :host[placement='top'],
    :host[placement='bottom'] {
        left: $nav-closed-width;
    }
}

.flyout {
    background: var(--bs-body-bg);

    &.flyout-left {
        flex-direction: row-reverse;
    }

    &.flyout-top {
        flex-direction: column-reverse;
    }

    &.flyout-bottom {
        flex-direction: column;

        .flyout-btn {
            border-radius: var(--bs-border-radius) var(--bs-border-radius) 0 0;

            .fa-angle-down {
                transform: rotate(180deg);
            }
        }

        &.flyout-open {
            .flyout-btn .fa-angle-down {
                transform: rotate(0deg);
            }
        }
    }

    &.flyout-open {
        .flyout-btn .fa-angle-down {
            transform: rotate(180deg);
        }
    }
}

.flyout-btn {
    position: absolute;
    transform: rotate(90deg);
    transform-origin: 0 0;

    border-radius: 0 0 var(--bs-border-radius) var(--bs-border-radius);

    .flyout-left & {
        transform: rotate(-90deg);
        transform-origin: 100% 0;
    }

    .flyout-top & {
        transform: translateY(100%);
    }

    .flyout-bottom & {
        transform: translateY(-100%);
    }
}

.flyout-content {
    @include box-shadow(var(--bs-box-shadow));

    overflow: auto;
    border-top: $flyout-border-top solid var(--bs-primary);
    max-height: calc(100vh - 80px);
    width: 0;

    .flyout-top &,
    .flyout-bottom & {
        border-top: none;
        border-left: $flyout-border-top solid  var(--bs-primary);
        width: auto;
        height: 0;
        max-height: calc(100vh - 100px);
    }

    @include transition(width 1s ease-in-out, height 1s ease-in-out);
}