@use '~flux/components/css/mixin';

.flyout {
    display: contents;
}

.flyoutDialog {
    // UA styles on <dialog> break inheritance, so the text pair is set explicitly.
    @include mixin.text(default);

    top: var(--pane-y);
    left: var(--pane-x);
    margin: 0;
    padding: 30px;
    background: unset;
    border: 0;
    cursor: default;

    &::backdrop {
        background: unset;
        cursor: default;
    }
}

.flyoutPane {
    max-height: calc(100dvh - 120px);
    width: max-content;
    box-shadow: var(--shadow-md);
    overflow: auto;
    transform: translate3d(var(--pane-mx), var(--pane-my), 0);

    &.isAutoWidth {
        width: var(--opener-width);
    }

    &.isClosing {
        animation: close 210ms var(--swift-out) both;
    }

    &.isOpening {
        animation: open 210ms var(--swift-out) both;
    }
}

@keyframes close {
    to {
        opacity: 0;
    }
}

@keyframes open {
    from {
        opacity: 0;
        transform: translate3d(0, 0, 0)
    }
}